-1

In my React application, I am using material-table, some of my columns are sortable and some of them are not:

Column-1 is check box, Column-2 could able to sort, but Column-3 unable to sort.

Parent class

    
class Parent extends Component{
  render() {
    return (
   <EditableTable 
      columns={[
            { title: 'Column-1'},
            { title: 'Column-2'},
            { title: 'Column-3'}
          ]}
   )
  }
}

Child class

import MaterialTable from 'material-table';     

    class EditableTable extends Component{
return (
      <MaterialTable
        title={props.title}
        tableRef={props.tableRef}
        options={{
          ...props.options,
          search: props.enableSearch,
          actionsColumnIndex: -1, // aligning table actions on the right-hand side
          toolbar: props.showToolbar,
          showTitle: props.showTitle,
          title: props.title,
          toolbarButtonAlignment: props.toolbarButtonAlignment ?                         props.toolbarButtonAlignment : 'right',
          doubleHorizontalScroll: false,
          paging: props.paging,
          sorting: true,
          addRowPosition: 'last',
          maxBodyHeight: props.maxBodyHeight,
          padding: "dense",
          loadingType: "overlay"
        }}
        columns={props.columns}
        data={props.data}
        editable={props.editable}
        actions={props.actions}
        onSelectionChange={props.onSelectionChange}
        detailPanel={props.detailPanel}
        id="material-table-main"
      />
)}
NicoE
  • 4,373
  • 3
  • 18
  • 33
Sara
  • 189
  • 1
  • 13

1 Answers1

1

you could try using 'customSort' column's attribute, where you can define a function that will be used as a compare function.

Take this as example of a column definition:

 {
          title: "BW [mbps]",
          field: "bandwidth",
          grouping: false,
          cellStyle: cellStyleSmall,
          headerStyle: headerStyleSmall,
          customSort: (a, b) => a.bandwidth - b.bandwidth,
        },

The arrow function defined as customSort value, follows these type of algorithms:

function compare(a, b) {
if (a is less than b by some ordering criterion) {
  return -1;
}
if (a is greater than b by the ordering criterion) {
  return 1;
}
// a must be equal to b
return 0;
}

Here is the reference to that example shown at MDN.

good luck!

NicoE
  • 4,373
  • 3
  • 18
  • 33