How can I make a checkbox checked as default when data has selected item

[Jakub41]

Hello,

I would like to know how I get in a row a checkbox already checked when I have specific data. I'm receiving data as preparedSites[dataIndex][0] === site.siteId as you will see under when I have this condition true I'm putting the row with a background color. On the same row, the box should be already checked but I don't know how to do it.

I hope to get some help with it :)

Thank you

const options = useMemo(
    () => ({
      filter: true,
      filterType: 'dropdown',
      responsive: 'standard',
      tableBodyHeight: '100%',
      tableBodyWith: '100%',
      tableBodyMaxHeight: '100%',
      selectableRowsHideCheckboxes: hideCheckBox,
      selectableRowsOnClick: true,
      selectableRows: 'single',
      search: false,
      viewColumns: false,
      download: false,
      print: false,
      isRowSelectable: dataIndex => preparedSites[dataIndex][5] !== 'INACTIVE',
      setRowProps: (row, dataIndex) => {
        if (preparedSites[dataIndex][0] === site.siteId)
          return {
            style: { backgroundColor: 'rgba(0, 168, 238, .1)' },
          };
        else if (preparedSites[dataIndex][5] === 'INACTIVE')
          return {
            style: {
              opacity: '.5',
            },
          };
        return '';
      },
      setFilterChipProps: () => {
        return {
          color: 'primary',
          variant: 'outlined',
        };
      },
      onRowSelectionChange: rowsSelectedData => {
        const id = preparedSites[rowsSelectedData[0].dataIndex][0];
        const status = preparedSites[rowsSelectedData[0].dataIndex][5];
        if (status === 'ACTIVE') selectSite(id);
      },
    }),
    [sites, site],
  );

[wdh2100]

@Jakub41

Hello~

using rowsSelected option

Name	Type	Default	Description
rowsSelected	array		User provided array of numbers (dataIndexes) which indicates the selected rows.

  const rows = [];
  data.forEach((element, index) => {
    if (element[0].includes("Jones")) {
      rows.push(index);
    }
  });

  const options = {
    ...
    rowsSelected: rows
    ...
  };

sample : https://codesandbox.io/s/muidatatables-custom-toolbar-forked-vooy0?file=/index.js:1687-1699

[Jakub41]

Hello, thank you @wdh2100 I have a last question when I have the pre-select checkbox is possible to hide the pop-up message saying that 1 row selected? Becasue it is hiding the filters then or there is a different solution to it?

[SmoochieMcWallace]

You'll have to remove the select toolbar then (note that this will also remove the delete icon) using selectToolbarPlacement: "none"

[zblcool]

@Jakub41

Hello~

using rowsSelected option

Name Type Default Description rowsSelected array   User provided array of numbers (dataIndexes) which indicates the selected rows.

  const rows = [];
  data.forEach((element, index) => {
    if (element[0].includes("Jones")) {
      rows.push(index);
    }
  });

  const options = {
    ...
    rowsSelected: rows
    ...
  };

sample : https://codesandbox.io/s/muidatatables-custom-toolbar-forked-vooy0?file=/index.js:1687-1699

Question: What if the table has been sorted. 'rowsSelected' only takes dataIndex right? Will it work in that case?