Add row sub component render feature about material-table HOT 23 CLOSED

@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

from material-table.

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

from material-table.

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

from material-table.

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:

from material-table.

+1 this would be really awesome

from material-table.

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

from material-table.

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

from material-table.

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

from material-table.

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?

from material-table.

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.

from material-table.

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

from material-table.

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

from material-table.

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

from material-table.

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.

from material-table.

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.

from material-table.

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

from material-table.

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

from material-table.

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?

from material-table.

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>
            );
          }
          }
        />

from material-table.

@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.

from material-table.

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

from material-table.

Thank @urirahimi :) I will do it asap.

from material-table.

@urirahimi I need a similar application of tree data

from material-table.