collapsing row

[danipralea]

Hello again! Is there any way to manually collapse or expand a row?

Thanks in advance.

[gabrielliwerant]

Manually would be by clicking on it or using the keyboard. Do you mean collapse/expand via code? If so, rowsExpanded is probably the option you want. You can see it used in the expandable-rows example. You can use a state variable here and switch the rows like you can with rowsSelected.

[danipralea]

@gabrielliwerant thank you for your reply. I'm looking more like keeping a ref to the table and send it the collapse message with a row parameter. I wonder if it's possible to do that.

My code is like this:

const cancelEdit = (id?: number) => {
    if (id) {
      const index = data.map(client => client.id).indexOf(id)
      console.log('collapse row at index : ', index);
    } else {
      console.log('cancel add client');
    }
  }

const options: MUIDataTableOptions = {
    filter: true,
    serverSide: true,
    count: count,
    page: page,
    download: false,
    print: false,
    expandableRows: !isLoading,
    expandableRowsOnClick: !isLoading,
    renderExpandableRow: (rowData: string[], rowMeta: { dataIndex: number; rowIndex: number }) => {
      const client = data[rowMeta.dataIndex];
      return <TableRow>
        <TableCell colSpan={columns.length + 1}>
          <AddClient client={client} cancel={cancelEdit} />
        </TableCell>
      </TableRow>
    },
  };

  return (
    <>
    {isAddingClient && <AddClient cancel={() => setIsAddingClient(false)}/>}
      <MUIDataTable data={data} columns={columns} options={options} />
    </>
  );

[gabrielliwerant]

It should be possible, but you'll need to track and update the rowsExpanded option.

(psuedocode)

// No rows expanded to start
state = {
  rowsExpanded: []
};

const cancelEdit = id => {
  const { rowsExpanded } = this.state;

  // if id is good, collapse row by removing it from expanded rows
  const index = rowsExpanded.findIndex(id);
  rowsExpanded.splice(index, 1);

  this.setState({ rowsExpanded });
}

const options = {
  rowsExpanded: this.state.rowsExpanded,
  onRowsExpand: data => this.setState({ rowsExpanded: data }), // Track which rows have been expanded
  ...
}

<MUIDataTable options={options} data={data} columns={columns} />

See if something along those lines works for you.

[danipralea]

thanks for the reply. It actually does it, but there's no onRowsExpand option. Might it be because @types/mui-datatables is not updated? I see it still has 2.10.3, while mui-datatables is on 2.12.0 So while it works, if I have more than one row expanded, it currently collapses all expanded rows.

Should I use renderExpandableRow instead? EDIT: I tried using renderExpandableRow, but I need to click twice on the row to be expanded. and the callback gets called twice.

[gabrielliwerant]

Feel free to update the types if you want, but the option is available in 2.12.0 if you pull that version into your project.

[danipralea]

Feel free to update the types if you want, but the option is available in 2.12.0 if you pull that version into your project.

@gabrielliwerant I already have the max for the types, which is 2.10.3

And also, I already have 2.12.0 for mui-datatables. 2.10.3 is the latest version for @types:

Is there any way I can update the types myself? I would love to help to be honest

UPDATE: tried to do it with

onTableChange: (action, tableState) => {
      if (action === 'expandRow') {
        const indexes = tableState.expandedRows.data.map(value => (value as any).dataIndex) as number[]
        setRowsExpanded(indexes)
      }
    }

but I get a [Violation] 'click' handler took 287ms warning and also, it still collapses all rows once I try to dismiss either one of them

[gabrielliwerant]

There are a couple of options to help out. The simplest way is just to keep the definitely typed (https://github.com/DefinitelyTyped/DefinitelyTyped) definitions up to date. This library does not have official typescript support, but that would be the unofficial place for it. As far as I know, you can use whatever js libraries you want with typescript, you either have to define the types yourself or just forgo the type safety for that particular library. It would be quite limiting otherwise.

The other way, which is much bigger, is to add official type definitions to this library. There have been some attempts at this in the past by people, but they went ahead and converted the library to typescript. It's not my intention to convert it, I like my js just fine. But I respect that other people want a range of options, so I have no problems with adding dual support to this library, kind of like how material-ui does it. If you wanted to work on that, that would be great. Let me know and I can create an issue for you if you like.

[favna]

This can be closed once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38981 has been merged bumping @types/mui-datatables to v2.12.0

[danipralea]

This can be closed once DefinitelyTyped/DefinitelyTyped#38981 has been merged bumping @types/mui-datatables to v2.12.0

that's amazing. thank you so much @Favna