LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page
  • Placing the Data Grid &/or Table into your custom designs
  • Coding the Data Grid & Table

Was this helpful?

  1. Features

Using the MUI Data Grid & Table

PreviousRadio GroupNextData & List Bindings

Last updated 2 years ago

Was this helpful?

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: under Design Kits.

Note: The free MUI Community kit only has Table but the paid version has Data Grid as well.

Placing the Data Grid &/or Table into your custom designs

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:

  1. To be a reuable component for your table or data grid that can be setup to your liking and used in multiple places.

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

Coding the Data Grid & Table

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:

https://mui.com/material-ui/react-table/
https://mui.com/x/react-data-grid/
Helpful Resources
Copy and paste any of the variants in the "Table" component on the Table page.
Copy and paste any of the variants in the "DataGrid" component on the Data Grid page.
Example of the "DataGrid" nested inside a new component called MyGrid.
This is the Data Grid pasted into your custom design