Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI

Rate this content
Bookmark
Github

Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.


Table of contents:

- Introducing our project and tools

- App setup and package installation

- Constructing the dashboard

- Prototyping, styling, and themes - Joy UI features

- Filtering, sorting, editing - Data Grid features

- Conclusion, final thoughts, Q&A

Sam Sycamore
Sam Sycamore
Siriwat (Jun) Kunaporn
Siriwat (Jun) Kunaporn
137 min
24 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Workshop focused on building a CRUD app using the MUI X data grid and Joy UI. Material UI is still popular and will continue to be developed, with efforts to implement Material Design version 3. The workshop covered various topics such as adding columns, filtering data, replacing slots with Joy UI components, creating an autocomplete column, customizing appearance and styling, saving and updating data, and handling errors. The workshop concluded with plans for future features and a call to connect with attendees for further assistance.

1. Introduction to MUI Workshop

Short description:

Today we're going to be demonstrating how you can build a clean and sophisticated CRUD app using the MUI X data grid in conjunction with joy UI. By the end, you will walk away with a solid foundational template that you can use to expand on to your heart's content. If you do build something cool with the code from today's workshop, let us know and we could potentially share it on our project showcase at mui.com.

Let's get it started then without any further ado. Alright. Well, thank you all for being here. This is a MUI workshop. Today we're going to be demonstrating how you can build a clean and sophisticated CRUD app. That's create read update delete. A very sophisticated CRUD app that can handle massive amounts of data with features like filtering and sorting right out of the box. Using the MUI X data grid in conjunction with joy UI which is our latest React UI component library and a sister library to our flagship product material UI. Hopefully some of you here are familiar with.

Now if you were to build such an app from scratch it could take days or weeks of full time work. And that's before you account for the bugs and edge cases that trust me will definitely come up along the way. By contrast we will be up and running here in a matter of minutes something like 90 minutes give or take. And by the end you will walk away with a solid foundational template that you can use to expand on to your heart's content. If you do build something cool with the code from today's workshop or just from anything we learn today the workshop I hope you'll let us know. We'd love to see it and if it's cool we could potentially share it on our project showcase which is at mui.com.

2. MUI and Workshop Stack

Short description:

Today we're going to be demonstrating how you can build a clean and sophisticated CRUD app using the MUI X data grid in conjunction with joy UI. By the end, you will walk away with a solid foundational template that you can use to expand on to your heart's content. If you do build something cool with the code from today's workshop, let us know and we could potentially share it on our project showcase at mui.com.

Before we get into the coding just like to take a minute to introduce myself and my co-conspirators who are leading the workshop here with me today. So hi, I'm Sam Sycamore. I am a developer advocate at MUI. My background is in technical writing and front-end development primarily JavaScript, react and Next.js. I've been with MUI for about a year and a half now. I live in Minnesota as you can see this is actually my surroundings. Well, not really but close enough. I spent most of my time working on the product documentation at MUI. And engaging with the community developers who work with our core component libraries, which is to say Material UI, Base UI and Joy UI. We'll get into MUI's products a little bit deeper here in just a minute. So don't sweat it if you're new to our ecosystem.

Joining me here today is my colleague Jun who is an engineer on our core team and the primary developer behind the component library Joy UI that we're working with today. So I'm really glad he's here with us to answer any questions, and just to show us all the cool stuff he's been building. Jun has been with MUI for about two years now and is very passionate about all things related to developer experience, which I think really shines through in Joy UI. And I think you'll agree once you see it. So Jun will be the one leading the live coding with us here in just a few moments. And we're also joined today by Andrew who's our tech lead on the DataGrid team. So he's here in the workshop. He's also hanging out on Discord. He'll be around to answer any questions you might have about MUIX and the grid, especially if there are any super technical questions. I'm certainly no expert on the grid. But if anyone is, it's this fellow right here. So we're glad to have him with us.

Now you know a little bit about who we are. Let's talk about who we represent at this conference. So maybe I'm preaching to the choir for those of you who chose to show up for this workshop. Maybe you already know everything there is to know about us. But let's just make sure we're all on the same page. So MUI as a company began with Material UI, which is the open source implementation of Google's Material design in React. Despite popular misconceptions, MUI is in fact not affiliated with Google. No disrespect. We love the Google family. But we are an independent entity with a headcount of just over 30 these days. And MUI's product offerings now extend well beyond the realm of Material design. So you can see here we've got on our core team, our products include Base UI, which is for headless components and low level hooks. We've got Joy UI, which implements our own in-house design system and some fresh new ideas and developer experience. And then we've also got MaterialUI, as you well know, and Material, or sorry, MUI system, which is our in-house style system. And that's just on the core side. On the X side, that is MUIX, we've got our advanced components like the Data Grid, which we'll be working with today. We've also got the date and time pickers and, coming soon in the not-so-distant future, we'll have some cool new stuff as well. And then we've got MUI-Toolpad. We're still in very early stages of this app, but this is our low-code admin builder where essentially you can take all of the MUI components that you know and love and start building a full stack app just by dragging and dropping. So we're very excited about that. And if you have any questions about any of those products, please don't hesitate to reach out. I'd be happy to walk you through them all.

So with that, I think we're ready now to move on and discuss the stack that we'll be working with today. We are, of course, operating in the world of React, and today we'll be coding in JavaScript. I know that might be a controversial decision in 2023 as the world seems to increasingly be adopting TypeScript. In fact, we pretty much only use TypeScript internally at MUI these days. But we didn't want to assume that everyone here has prior experience with TypeScript, and we didn't want to get too bogged down in the details of TS.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
You can check the slides for James' talk here.
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
Building Cross-Platform Component Libraries for Web and Native with React
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React & React Native in combination.
Walking the Line Between Flexibility and Consistency in Component Libraries
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.