[DataGrid] Introduce new component #18872
Conversation
oliviertassinari
added
new feature
|
@material-ui/core: parsed: +0.04% , gzip: +0.48% Details of bundle changes.Comparing: c99bd0d...9b3301c
|
|
Congratulations, i am really appreciated with your effort as a open source developer and consumer. I hope that MUI ecosystem achieves more than this. I will help as i can. But firstly i want to focus on material-table. I don't see this situation as competition. I am still part of MUI ecosystem :) |
|
Hi, I will see how I can help out. The great work of @mbrn can probably teach us a lot for this component. We should think about how to save the data without mutating the props and how to connect the rows with data like selection, edit etc. I am thinking about a flat state where maps with IDs are used instead of plain arrays. Will this Component be written in ts or js? |
|
Hi, thanks for the opportunity. @kadosh is also involved in the development of Tubular React. He is willing to participate. |
|
Regarding layout here's another post that may or may not be interesting in the context of R&D for this component: https://adamlynch.com/flexible-data-tables-with-css-grid/ |
I would like to give it a try to sources written in TypeScript:
|
|
Hey guys, I'm willingly to help on this but I need some orientation. Where should I start? |
|
@kadosh thats great. We decided to write it in typescript so I added a PR to the fork which is the source of this PR to turn the dataGrid Component to tsx. Once this is merged we can start hacking away in ts. |
I've spent a great deal of time working with ag-grid all the way from version 1 back when I was an angular dev 🤕 and through literally every version since both at work and for personal projects. I've also had the pleasure of meeting some of the people from the team. @ceolter and @seanlandsman (and the rest of the team - they have a full fledged company now) have been working around the clock on ag-grid for a few years now. They are fantastic and highly determined engineers - not to mention just being great all-around people. Ag-grid is extraordinarily capable product and is very well documented. Why am I mentioning all that? Well.. if your goal is to achieve feature parity with ag-grid... why not just use ag-grid? Without even asking them first, I feel absolutely certain that Niall and Sean would at least have a quick video call with you some day to discuss synergistic ways material-ui and ag-grid can work together. On our side with material-ui, this could be a huge huge boon for the project as many many enterprise and serious companies are already using ag-grid (since it's by far the most capable tool of its class). On their side, they are very very interested in maintaining their status as a first-class react tool, so I know aligning with a project that has as much momentum as material-ui would be enticing to them. I'd be happy to send an intro email if you want. |
oliviertassinari
force-pushed
the
data-grid
branch
13 times, most recently
from
b6ac8bd
to
c78d05f
Compare
|
@oliviertassinari great work so far, what are some open issue we should focus on? And is there a reason why the main component is still js? |
|
@Domino987 I have started writing the component in TypeScript to later realize that:
require('@babel/register')({ extensions: ['.js', '.jsx', '.ts', '.tsx'] });But it's only one piece of the puzzle. We also need to handle: eslint vs tslint, API generation for docs, d.ts generation for build, and maybe more.
|
| # Data Grid - Data | ||
|
|
||
| <p class="description">A fast and extendable data table and data grid for React. It's a feature-rich compoent available in MIT or Enterprise versions.</p> | ||
|
|
There was a problem hiding this comment.
might be worth adding a section on row and cell rendering since that's a pretty common use case
| /** | ||
| * The data record array to be rendered. | ||
| */ | ||
| rowsData: PropTypes.array, |
There was a problem hiding this comment.
how about just rows? (since columns are simply columns)
|
|
||
| const rowsHeader = [columns]; | ||
|
|
||
| const handleResizeMouseMove = useEventCallback(event => {}); |
There was a problem hiding this comment.
maybe column resize can be its own hook? useColumnResize or something? 🤷♂
oliviertassinari
force-pushed
the
data-grid
branch
3 times, most recently
from
3a0af05
to
793611c
Compare
oliviertassinari
force-pushed
the
data-grid
branch
7 times, most recently
from
f142dc1
to
8993694
Compare
oliviertassinari
force-pushed
the
data-grid
branch
from
8993694
to
773e4b6
Compare
|
Is there anything I can help with? This is the first time I'm involved in something like this. And to be honest, I'm not sure how to contribute. It feels like you're doing all the work. |
|
@kadosh Thanks for your interest! We are in the process of hiring https://material-ui.com/company/software-engineer/ a skilled developer that will lead this effort. While I did start the effort, gain enough context on it, they are too much work for me to handle it alone and likely nor to coordinate contributions. Stay tuned :). |
This comment has been minimized.
This comment has been minimized.
github-actions
bot
added
the
PR: out-of-date
|
Closing, we have been working on this component for the last 3 months with @dtassone (450+ cumulated hours so far, probably x10 more to come) under a private repository. We will soon or later start to share more information about it, make it public, etc. If you want to get an early preview or be part of the early beta testers, please send us a message at [email protected] :) |
Preview: https://deploy-preview-18872--material-ui.netlify.com/components/data-grid/
This is a first batch for the MIT version of the component. The long term objective is to be, more or less at feature parity with ag-grid. This is a strategical effort to strengthen the idea that Material-UI primary focus is to solve complex UI problems at its core. To truly execute on our strapline:
Providing a nice looking layer on top of these components is a necessary secondary requirement (Material Design), that we might support different design specifications in the future (2-3 years?), like fluent, or ant.
I plan to dedicate 100 hours to this first batch, similarly to the first batch of the Autocomplete component. I estimate that it will take about 6 weeks to complete (end of January) if I keep the primary focus on the daily issues and pull requests flow coordination. Long term, we will likely need a good 5,000 hours on this problem.
@gabrielliwerant, @gregnb, @geoperez, @mbrn, @Domino987 per your previous interest and effort on different projects to solve this problem, you are welcome to come in and help :)! We have a dedicated $ fund to support this effort (including the development of not MIT features).
Regarding the 4 complementary projects we link in the documentation, once this component is feature-rich enough, we will remove these mentions, as we did for the Autocomplete for downshift and react-select because they overlap.
Progress: 30/100 hours (still in a preliminary phase, most of the time spent on early R&D).
Closes #5069
Closes #14267
Closes #18019
Closes #18434
Closes #18712