Using the MUI Data Grid & Table
Last updated
Last updated
To use the MUI Data Grid and/or MUI Table you need to copy and paste them from the official MUI Figma Design Kit files into a custom component then copy and paste that new custom component somewhere into your custom designs. You can find links to them in the docs here: Helpful Resources under Design Kits.
Note: The free MUI Community kit only has Table but the paid version has Data Grid as well.
In the Design Kit files, you'll need to go to the correct page then locate the component you need at the bottom of the page.
Copy it from the MUI Design Kit file, then paste it into a new component like the screenshot below. DO NOT, export this component yet, you'll want to use an instance of this new component in your custom designs instead.
This will now serve 2 purposes:
To be a reuable component for your table or data grid that can be setup to your liking and used in multiple places.
This new component is to be copied and pasted into all paces you need it (not copying and pasting the table or data grid directly). This new component is where the developer can add the appropriate code (see "Coding the Data Grid & Table below).
From here you will copy and paste this new custom component into other parts of your design. In this example, we'd copy and paste the "MyGrid" component (which contains the MUI table) into a section of the "Dashboard" component.
Once in you paste the custom component you just created into the place, you may wish to change the layout a bit. You can adjust the width to be fixed to an exact amount or change it to hug or fill based on the parent container.
Note: Sometimes there is a bug in Figma where setting it to Fill will not fill the header row. If that happens, simply go to the header row in the component and toggle Hug then back to Fill to fix this.
Unlike other MUI components that you copy and paste into your design, these 2 component types should be considered more like placeholders for your developer to set up the code. They simply show the placement of where it should go and how it should be responsive. The columns and rows are to be determined by code so whatever you add into your design can change. If using Data Grid, you can even create custom components for cells that can be added to the grid with code as well.
In order to implement the data grid or table, what you need to do is to sync the custom grid component into Quest. The developer can then export it. Once exported, that component can be hand-coded with the appropriate data and bindings (it will typically just be a few lines for the presentation part). You can refer to the MUI docs for table and data grid below:
