CODEWITHSUNDEEP
reactjsmaterial-uimui-datatable
lrefopam
lrefopam

Reputation: 531

mui-datatables can't disable selectableRows

I created a table with mui-datatables. Everything is working fine, except setting selectableRows in the options. It throws the following error:

Type '{ selectableRows: boolean; }' is not assignable to type 'Partial<{ caseSensitive: boolean; confirmFilters: boolean; columnOrder: number[]; count: number; customFilterDialogFooter: (filterList: string[][], applyNewFilters?: ((...args: any[]) => any) | undefined) => ReactNode; ... 80 more ...; viewColumns: ToolbarButton; }>'. Types of property 'selectableRows' are incompatible. Type 'boolean' is not assignable to type 'SelectableRows | undefined'. TS2322

 const columns = [
      {
           name: "id",
           label: "ID",
           options: {
                filter: true,
                sort: true,
           }
      },
      {
           name: "val",
           label: "val",
           options: {
                filter: true,
                sort: true,
           }
      },
      {
           name: "zip",
           label: "zip",
           options: {
                filter: true,
                sort: true,
           }
      }
 ];

 const options = {
      selectableRows: false
 };

 return (
      <div className={classes.root}>
           <MUIDataTable
           title={""}
           data={rows}
           columns={columns}
           options={options}
           />
      </div>
 );

Upvotes: 1

Views: 1807

Answers (2)

Ash
Ash

Reputation: 51

I believe what you are looking for is isRowSelectable

Here is a copy of the document.

isRowSelectable: Enable/disable selection on certain rows with custom function. Returns true if not provided. function(dataIndex: number, selectedRows: object(lookup: {dataindex: boolean}, data: arrayOfObjects: {index, dataIndex})) => boolean.

so technically you need to pass a function to this option. And in that function, you can access to dataIndex,selectedRows,data as arguments and return with a boolean that checks your own criteria.

So ideally it should look like this: 

  isRowSelectable: (dataIndex, selectedRows, data) => {
    return (
     dataArray[dataIndex].required === false
    )
  },

Upvotes: 2

lrefopam
lrefopam

Reputation: 531

I don't know if it's the best approach, but setting selectableRowsHideCheckboxes to false did it to me.

Upvotes: 0

Related Questions