Comments (23)
@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.
Related Issues (20)
- Row Unique Id for MaterialTable v4 HOT 1
- Will there be a support for react 18? HOT 1
- help HOT 1
- Is there any upgrade to MUI v5 and React 18? HOT 3
- cannot read properties of undefined (reading 'editing') material-table HOT 1
- How to override parent/child first cell style? HOT 1
- How can I put a back button next to the title?
- What are the changes needed when using material-table 2.0.5 version with react 18.2?
- Can we have Math.round fixed for the vunerability scan warning
- browser is freezing HOT 1
- Disable default grouping.
- headerStyle is not working.
- Add custom style for the scrollbar
- Filter resets when an action happens
- I want to show count infront of field name in grouping
- Want to add Autocomplete in Show/Hide column menu
- Uncaught TypeError: Cannot read properties of undefined (reading 'saveTooltip')
- Filtering after typing text and pressing the Enter button
- Title: WCAG 4.1.2: Ensures every form element has a label (.PrivateSwitchBase-input-317[value=""][data-indeterminate="false"])
- Since update I have warning in my browser console: Warning: Failed prop type: The prop `columns` is marked as required in `MTableAction`, but its value is `undefined`.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-table.