Mui-datatables: Set manually "allSelectedRows" checkbox true/false on table loading

[tecnoher]

I want to be able to set selectAllRows checkbox (in header) on/off when datatable is loaded (as response of some initial condition)

This is my code, I use customRowRender prop.

` title={'Puestos'}
data={dataJob}
columns={columnsJob}
options={optionsJp()}
/>

title={'Centros de costos'}
data={dataOrg}
columns={columnsOrg}
options={optionsOu()}
/>

const optionsOu = () => ({
download: false,
print: false,
rowsPerPage: 10,
selectableRows: 'multiple',
sort: false,
fixedHeader: true,
filter: false,
selectableRowsHeader: true,
onTableChange: (action, tableState) => {
//this.props.outerState().isDeselect = true;
onSelectAllChange(tableState.selectedRows.data.length);
},
customRowRender: organizationalUnitsRowRender,
textLabels: {
body: {
noMatch: "Lo sentimos, no hay registros",
toolTip: "Orden",
columnHeaderTooltip: column => Orden para ${column.label}
},
selectedRows: {
text: "filas(s) seleccionadas"
},
}
});

const organizationalUnitsRowRender = (row, index) => {
let [id, code, description] = row;
let isSelected = isOuRowSelected(id);
return (
hover
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={'ou' + id}
selected={isSelected}
>
padding="checkbox"
onClick={() => { handleClickOu({ id, code, description }) }}
>


{id}
{code}
{description}

);
};`

Steps to Reproduce (for bugs)

1.
2.
3.
4.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.0.1 |
| MUI-datatables | 2.14.0 |
| React | 16.13.1 |
| browser | chrome |
| etc | |

[patorjk]

You'll want to look at the rowsSelected option.

Example: https://codesandbox.io/s/muidatatables-custom-toolbar-kj4gg?file=/index.js

[tecnoher]

Thanks @patorjk , but mi intention was using customRowRender, anyway, I decide to take your suggestion, and now I'm facing an issue related with the checkbox "ALL" in the header, on a first load, if I have partial content selected, it still remains checked,

here is the example: https://codesandbox.io/s/toxo6

[wdh2100]

@tecnoher

Returns Undefined If you don't declare a return value in function(js)

Remove undefined

  const setOuRowsSelected = () => {
    return data
      .map((item, idx) => {
        if (previousSelectedData.filter(e2 => item.id === e2.id).length > 0) {
          console.log("find " + idx);
          return idx;
        }
        return undefined;
      })
      .filter(item => item !== undefined);
  };

ref : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

[tecnoher]

@wdh2100 & @patorjk thanks a lot ! you guys have been really helpfuls