How to Customize material-table "lookup"

Question

I use material-table for my data tables.

how can I Customize all part of " material-table lookup" component ?(Access to each Elements of that to add extra logics and styles)

)

const columns = [
  {
    title: "Is_Active",
    field: "is_active",
    cellStyle: { textAlign: "center", padding: "0px", width: "7%" },
    render: (rowData) => {
      return rowData.is_active ? (
        <CheckCircleOutlineIcon style={{ fill: "green" }} />
      ) : (
        <HighlightOffIcon style={{ fill: "red" }} />
      );
    },
    lookup: {
      1: "yes",
      0: "no",
    },
    type: "enum",
  },
];

and then :

 <MaterialTable
          columns={columns}
          // other props...
        />

Thanks for Your Help✌

Answer 1

I've Found My Question's Answer !

You can use filterComponent in your column identifier object for override filter component (in this case I've use Select Component 🤪) , like this :

{
    title: 'Is Active',
    field: 'isActive',
    cellStyle: {
        borderColor: '#d4d4d4',
        borderStyle: 'solid',
        borderRightStyle: 'solid',
        borderLeftStyle: 'solid',
        borderWidth: '1px',
        fontSize: '12px',
        textAlign: 'center',
        padding: '0px',
        width: '10%'
    },
    render: (rowData) => {
        return rowData.isActive ? <CheckCircleOutlineIcon style={doneIconStyle}/> :
            <HighlightOffIcon style={dontIconStyle}/>;
    },
    filterComponent: ({ columnDef, onFilterChanged }) => (
        <Select
            defaultValue={2}
            variant={'standard'}
            onChange={(e) => {
                // Calling the onFilterChanged with the current tableId and the new value
                onFilterChanged(columnDef.tableData.id, e.target.value);
            }}
        >
            <MenuItem selected={true} key={2} value={2}>All</MenuItem>
            <MenuItem key={1} value={1}>yes</MenuItem>
            <MenuItem key={0} value={0}>no</MenuItem>
        </Select>
    ),
    lookup: {
        2: 'all',
        1: 'yes',
        0: 'no'
    },
    type: 'enum'
}

I hope my answer helped you to solve this problem 👍