KevinVandy / material-react-table

A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
https://material-react-table.com
MIT License
1.53k stars 442 forks source link

When only one Row is existing in a table, and I select this row `getIsSomeRowsSelected` reports still `false`. #400

Closed tobiashochguertel closed 1 year ago

tobiashochguertel commented 1 year ago

material-react-table version

v.1.8.1

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

When only one Row is existing in a table, and I select this row getIsSomeRowsSelected reports still false.

image

Console.log:

table.getIsSomeRowsSelected() false [react_devtools_backend.js:4066:31](moz-extension://f7f736e3-7996-4c3f-b2f9-3e29bc33d8da/build/react_devtools_backend.js)
table.getSelectedRowModel()  
Object { rows: (1) […], flatRows: (1) […], rowsById: {…} }
[react_devtools_backend.js:4066:31](moz-extension://f7f736e3-7996-4c3f-b2f9-3e29bc33d8da/build/react_devtools_backend.js)

Minimal, Reproducible Example - (Optional, but Recommended)

return (
    <>
      <MaterialReactTable
        displayColumnDefOptions={{
          'mrt-row-actions': {
            muiTableHeadCellProps: {
              align: 'center'
            },
            size: 120
          }
        }}
        columns={columns}
        data={notifications.content}
        enableColumnFilterModes
        enableColumnOrdering
        editingMode="modal" //default
        enableEditing
        enableGrouping
        enablePinning
        enableRowActions
        enableRowSelection
        onEditingRowSave={handleSaveRowEdits}
        onEditingRowCancel={handleCancelRowEdits}
        initialState={{showColumnFilters: false, density: 'compact', sorting: [{id: 'id', desc: true}]}}
        positionToolbarAlertBanner="bottom"
        renderRowActions={({row, table}) => (
          <Box sx={{display: 'flex', gap: '1rem'}}>
            <Tooltip arrow placement="left" title="Show">
              <IconButton onClick={() => navigate(`${row.original.id}/show`)}>
                <FileOpenIcon/>
              </IconButton>
            </Tooltip>
            <Tooltip arrow placement="left" title="Edit">
              <IconButton onClick={() => table.setEditingRow(row)}>
                <Edit/>
              </IconButton>
            </Tooltip>
          </Box>
        )}
        renderTopToolbarCustomActions={({table}) => {
          console.log('table.getIsSomeRowsSelected()', table.getIsSomeRowsSelected());
          console.log('table.getSelectedRowModel()', table.getSelectedRowModel());

          const handleNew = () => {
            const body: ApiModule.Notification = {
              name: 'New Notification'
            };
            return dataProvider.create(resourceName, {body: body}).then((monitor: Monitor) => {
              dataProvider.getMany(resourceName, {}).then((response) => {
                setNotifications(response);
              });
            });
          };

          const handleDelete = () => {
            const rsp = table.getSelectedRowModel().flatRows.map((row) => {
              dataProvider.delete(resourceName, {id: row.original.id}).then(() => {
                dataProvider.getMany(resourceName, {}).then((response) => {
                  setNotifications(response);
                });
              });
            });
            table.setRowSelection({});
            return rsp;
          };

          return (
            <ButtonGroup color="secondary">
              <Button onClick={handleNew}>New</Button>
              <Button onClick={handleDelete} variant="warning" disabled={!table.getIsSomeRowsSelected()}>
                Delete
              </Button>
            </ButtonGroup>
          );
        }}
      />
    </>
  );

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

KevinVandy commented 1 year ago

For some reason, this is how TanStack Table users expected the function to work because of indeterminate logic. You just also have to add a check for table.getIsAllRowsSelected()

tobiashochguertel commented 1 year ago

For some reason, this is how TanStack Table users expected the function to work because of indeterminate logic. You just also have to add a check for table.getIsAllRowsSelected()

ah! okay. Thanks. good to know. I will combine it with table.getIsAllRowsSelected()