How to change filter in CUBA Platform's DataTable

Question

In frontend, I have a DataTable built by fields. I need to change one column's filter type from select to input field. Is that possible to do with CUBA's DataTable? I do not have access to ColumnsDefinitions prop

Answer 1

CUBA fronted generator create table components based on DataTable and fields property (which is deprecated). Usage of DataTable could be easily transformed to work with more modern columDefinitions, which provide better control on each column.

As first step we can simply pass the same string array fields as columnDefinitions property.

 <DataTable
        dataCollection={this.dataCollection}
        columnDefinitions={this.fields}
        onRowSelectionChange={this.handleRowSelectionChange}
        hideSelectionColumn={true}
        buttons={buttons}
      />

Then we can change only needed field in array from string to column definition.

  ownerColumnDefinition: ColumnDefinition<Pet> = {
    field: "owner",
    columnProps: {}
  }

  fields: (string | ColumnDefinition<Pet>)[] = [
    "identificationNumber",
    "birthDate",
    "name",
    "type",
    this.ownerColumnDefinition
  ];

And then implement antd filterDropdown as described in Ant Design Customized Filter

  ownerColumnDefinition: ColumnDefinition<Pet> = {
    field: "owner",
    columnProps: {
      filterDropdown: () => {/* custom filter implementation here */}
    }
  }

Complete example based on CUBA Petclinic app available at https://github.com/vadimbasko/cuba-petclinic-custom-table-filter, you can see customized filter with input field implemented in PetList component for owner column https://github.com/vadimbasko/cuba-petclinic-custom-table-filter/blob/0f8e7e62779d0afb0fbd733dfffabf26df754f68/modules/front/src/app/pet/PetList.tsx#L29-L70.