Material-table: Add row sub component render feature

[mbrn]

Add row sub component render feature. Every row can render an collapse panel which could be rendered according row data

[jakeleventhal]

+1 this would be really awesome

[bgits]

Here is an example UX that this should enable. At 12:07 in this video the element under the row appears when the user clicks on it.

https://youtu.be/QKaNUX8ROG0?t=723

[jakeleventhal]

I think that this would look really well if implemented with a dropdown animation and an arrow indicating that it can be dropped down

[jakeleventhal]

https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/tree-data/

This seems to be the best implementation of this that i've seen so far

[mbrn]

This is what i want to implement in material-table. We think same @jakeleventhal :)

[bgits]

How would tree-data work in this example: https://github.com/status-im/liquidpledging/blob/embark-dapp/app/components/PledgesTable.jsx#L72 ?

Here WithdrawCard should be appended directly under the row that triggers it rather than the table?

[jakeleventhal]

@mbrn they also seem to have implemented column resizing and scrolling very well too (but that is for another issue)

[jakeleventhal]

Any ballpark estimate on when this will be release? I need to have something figured out kind of soon or find another library in the meantime.

[mbrn]

I think i can do this in a few days. So i hope it will be released next week.

[mbrn]

Hi @jakeleventhal ,

You can try it with v1.10.0.

Look at example: https://mbrn.github.io/material-table/#/docz-examples-11-example-detail-panel

[bgits]

How can one choose the icon for the detail panel? Can a row have multiple detail panels?

[mbrn]

How can one choose the icon for the detail panel?
Try this:

        <MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          detailPanel={rowData => (
            <div style={{textAlign: 'center'}}>
              {rowData.name}
            </div>
          )}
          icons={{
            DetailPanel: props => "A"
          }}
        />

Can a row have multiple detail panels?
What do you mean? You can render everything you want on detail panel.

[bgits]

How can one choose the icon for the detail panel?
Try this:

        <MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          detailPanel={rowData => (
            <div style={{textAlign: 'center'}}>
              {rowData.name}
            </div>
          )}
          icons={{
            DetailPanel: props => "A"
          }}
        />

Can a row have multiple detail panels?
What do you mean? You can render everything you want on detail panel.

For example you can have two detail icons, one triggers a detail panel for a video another triggers a form.

[mbrn]

I got it. You can not do it easily. But i will work on it and change detailPanel to be accept array of panels.

[mbrn]

I completed multiple detailPanel feature. You can use it in next release. I think It will be very useful:)

[jakeleventhal]

How does this work if you want to have more table data as a sub row as in the link i shared earlier in the thread?

[mbrn]

You can return a new MaterialTable in detailPanel.

Example:

<MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          detailPanel={rowData => {
            return (
              <div style={{ padding: '10px 50px 10px 50px' }}>
                <MaterialTable
                  columns={[
                    { title: 'Name', field: 'name' },
                    { title: 'Surname', field: 'surname' },
                    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
                    { title: 'Birth Place', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } },
                  ]}
                  data={[
                    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
                    { name: 'Zerya Betül', surname: 'Baran', birthYear: 1987, birthCity: 63 },
                  ]}
                  options={{
                    toolbar: false,
                    paging: false
                  }}
                />
              </div>
            );
          }
          }
        />

[urirahimi]

@mbrn I liked the dropdown style that @jakeleventhal posted earlier. Do you think that your implementation for returning another table will change into a smoother transition from row to subrow or is that not to be expected.

[mbrn]

I think that this is another feature. It is tree data feature. So i opened another issue(#135) and i can work on it.

[urirahimi]

@mbrn I really appreciate it. I'm working on an accounting system that could use the tree structure very badly and as you know your table is already one of the better ones and I'd like to stick to it

[mbrn]

Thank @urirahimi :) I will do it asap.

[jakeleventhal]

@urirahimi I need a similar application of tree data

[Leocete]

I'm working in a logistic project and we use your Material-Table heavily there - it is the best JS table lib.
@mbrn, is there functionality to show the detail panel by default? I mean not to toggle it, and completely remove the toggle icon. Here is what I'm trying to achieve: