Adding rowspan or column span functionality at the table while generating data-table using (React) material table

Question

I am generating dataTable using material-table plugin in ReactJS. I couldn't find any direct way or option to generate rowspan or column span at dataTable using the plugin. Is there any way to do it ?

Here is a sample screenshot of what table might look like but will be shown via dataTable

Answer 1

The explanation of what you are trying to do is a little bit unclear.

If you want to add something like a button on each row in a col span you can define it in the "columns" prop of your Table like so:

columns={[
      { title: 'Update', field: '', render: rowData => <button onClick={() => doSomethingWithId(rowData.id)} className="myTableButtonStyle" /> },
      { title: 'Name', field: 'name' },
      ....
    ]}

This will add an update button which will call on the doSomethingWithId() function passing the id of the line as a parameter. Is it what you are looking for? Else would you mind explaining a little bit more what you want?

EDIT

Here is what i obtain

with the following code

<MaterialTable
      data={[
        { name: '', nationality: 'British', address: '', country: 'England' },
        { name: 'Noor', nationality: 'American', address: 'California', country: 'US' },
        { name: '', nationality: 'Chinese', address: '', country: 'China' },
        { name: '', nationality: '', address: '', country: '' },
      ]}
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Nationality', field: 'nationality' },
        { title: 'Address', field: 'address' },
        { title: 'Country', field: 'country' },
      ]}
      options={{
        rowStyle: {
          height: '25px',
        },
      }}
      title="Display Data"
    />

You don't need to add rows or colspan to achieve this render, just giving the good dataSet and the Columns definition will do.

In your data props you need to give a list of objects with all the datas you need. You then define which datas are displayed where with the columns props. if you want a more personalize render in one column (ex: you want to display the country in bold) you can define it by giving a render in the columns object like so:

{title: 'Country', field: '', render: rowData => <strong>{rowData.country}</strong>

for the empty row to have the same size as others, use props options on your table. Does this help you?