Muhi Masri RSS Feed

Build a Customizable Next.js Blog with Material UI

Developers always want to showcase or share their work, whether that’s through GitHub projects, technical blogs, or personal portfolios. Personally, I’ve found that writing blogs not only helps others, but also deepens my own knowledge and makes me more confident when working with teams and contributing to the community.

I’ve rebuilt my blog and portfolio site three times already, and finally decided it was time to make it modular, scalable, and easy to maintain. So I built a Next.js starter that’s not only developer-friendly, but actually fun to work with.

It comes with a bunch of useful features out of the box:

Dark mode with token-based theming
Dynamic Table of Contents (TOC) for each article
MDX support with code highlighting built-in
Optimized performance (90–100% Lighthouse scores)
Clean component-based architecture for easy customization
SEO-friendly with metadata and semantic URLs
Simplistic and beautiful design

In this tutorial, I’ll walk you through, step by step, how to build a blog and portfolio site using Next.js and Material UI (MUI). It will cover a well structured nextjs template to start from and customize it to your liking.

Before we dive in, here’s a quick demo of the starter, a live version, and a link to the repo:

GitHub Repo: nextjs starter repository

Live Demo: nextjs blog demo

Next.js Setup

Alright, let’s get the foundation in place with a fresh Next.js project. If you’ve done this before, feel free to skim.

Create the project

In your terminal, run:

npx create-next-app@latest nextjs-mui-blog-starter

You’ll get a few prompts, things like TypeScript, App Router, Tailwind, etc. You can go with the defaults or tweak settings based on your preferences. The only must-do? Include the App Router, and skip Tailwind—we’re going with Material UI for this one (no hate on Tailwind; it’s just not what we’re using here).

This setup uses the app/ directory structure introduced in Next.js 13, which supports layouts and routing optimized for both performance and clarity.

Run the dev server

Once the setup finishes, go ahead and jump into the new directory:

cd nextjs-mui-blog-starter
npm run dev

You should see the usual Next.js welcome screen at http://localhost:3000. Nice!

Pro tip: In package.json, you can modify the port to run your app on a different one, like 9000. Modify "dev": "next dev -p 9000" in the scripts section.

Material UI Setup

Now that Next.js is ready, let’s bring in Material UI (MUI) to style our application with a powerful and responsive component library. We’ll set up MUI into the project and shape a cohesive nextjs theme that’s consistent and accessible.

Install Material UI

To get started, install MUI along with its required dependencies:

npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache

MUI uses Emotion as its default styling engine. No need for global stylesheets or external CSS frameworks.

The @mui/material-nextjs package simplifies server-side rendering with MUI in the Next.js App Router. Without it, you’d need to manually handle Emotion cache, inject styles into HTML streams, and manage SSR hydration mismatches.

Clean Up and Configure MUI

Before adding custom components, let’s do a quick cleanup and MUI setup:

Delete global CSS files like globals.css and page.module.css; we’ll use MUI’s CssBaseline instead.
Remove the content in page.tsx so it starts clean.

export default function Home() {
  return <div></div>;
}

Update layout.tsx to configure MUI’s SSR support and add a global style baseline:

import { CssBaseline } from "@mui/material";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider>
          <CssBaseline />
          {children}
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

AppRouterCacheProvider: Handles MUI’s server-generated styles as Next.js streams the page to the browser (learn more)
CssBaseline: Applies consistent base styles (typography, color, layout) across browsers (learn more)

At this point, your app should render a clean, white page with no default Next.js styles.

Test MUI with a Header Component

Let’s test that MUI is working by building a quick header with navigation:

components/Header.tsx

// Simple MUI AppBar component to validate Material UI setup
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

export default function Header() {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" mr={5}>
          My Blog
        </Typography>
        <Button color="inherit">Home</Button>
        <Button color="inherit">Blog</Button>
        <Button color="inherit">About</Button>
      </Toolbar>
    </AppBar>
  );
}

Then update layout.tsx to include the Header:

import { CssBaseline } from "@mui/material";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import Header from "./components/Header";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider>
          <CssBaseline />
          <Header />
          {children}
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

If you see a blue top bar with “My Blog” and three navigation buttons, MUI is now integrated and rendering correctly!

MDX Setup

Now that we have Next.js and Material UI wired up, let’s add the ability to write blog posts using MDX, Markdown with embedded JSX.

Install MDX Dependencies

MDX is one of the most flexible ways to author content in a React-based site, allowing your nextjs blog to support markdown with interactive components.

To get started, install the required packages:

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

Configure Next

Next, we’ll update the next.config.ts file to enable .mdx pages to be routed like normal React components:

import withMdx from "@next/mdx";

const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
};

const mdxConfig = {
  // You can add remark/rehype plugins here
};

export default withMdx(mdxConfig)(nextConfig);

This configuration tells Next.js to treat .mdx files as valid page routes. The @next/mdx plugin automatically compiles them into React components that render just like .tsx files.

Add Components Mapping

With the App Router, we also need to define custom component mappings for MDX rendering.

We can achieve this by creating a new file called mdx-components.tsx at the root of the src/ directory:

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  };
}

The useMDXComponents hook allows us to customize how MDX elements are rendered throughout the application.

Create a Test Blog Post

Let’s create a simple blog post to verify everything is working.

Inside the app/ directory, create a folder called blogs/
Inside blogs/, create a new folder: my-first-blog-post/
Inside that folder, create a file named page.mdx

# Introduction

Welcome to my first blog post! In this post, I’ll share my journey of learning Next.js and Material UI. Stay tuned for more!

## Setup

To get started, we’ll install the latest Next.js version and create a new project:

```bash
npx create-next-app@latest nextjs-mui-blog-starter
```

Now navigate to http://localhost:3000/blogs/my-first-blog-post and boom, your MDX content should render just like any other page!

How It Works

The App Router in Next.js makes this possible by treating folders as route segments. Since page.mdx is a valid route file, it gets compiled and rendered automatically, just like page.tsx.

We can nest routes, use dynamic segments (like [slug]), or structure our blog by date, tag, or category. All with native file-system routing.

Final Structure Overview

Here’s what your project should now look like:

nextjs-mui-blog-starter
├── app
│ ├── blogs
│ │ └── my-first-blog-post
│ │   └── page.mdx
│ ├── components
│ │ └── Header.tsx
│ ├── layouts
│ │ └── layout.tsx
├── mdx-components.tsx
├── next.config.ts
├── package.json
└── tsconfig.json

Building a Blog

Now that the foundation is in place, let’s start building the actual blog experience. This is where things get fun and a bit more dynamic.

Understanding Dynamic Routing

Next.js App Router supports dynamic segments using square brackets like [slug]. That is perfect for content-driven pages such as blogs, docs, or portfolios because the URL becomes the source of truth for which content to render.

SEO Tip: Using slug-based folders and filenames keeps URLs semantic and helps both search engines and generative engines map each route to a specific content source.

Let’s break it down:

A folder named [slug] inside app/blogs/ tells Next.js that anything matching /blogs/\* should be routed to this segment.

When a request comes in (e.g., /blogs/my-first-post), the part after /blogs/ (my-first-post) is passed as a parameter to your route.

You can then use that slug to fetch content, metadata, and render it dynamically.

Loading Dynamic Content

Inside app/blogs/, we’ll create [slug]/page.tsx. Start with a minimal page so routing is set up cleanly:

import { readdirSync } from "fs";
import path from "path";

interface BlogPostPageProps {
  params: { slug: string };
}

export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const { slug } = await params;
  return (
    <div>
      <h1>{slug}</h1>
    </div>
  );
}

// Return all slugs for SSG
export async function generateStaticParams() {
  const blogDir = path.join(process.cwd(), "content/blogs");
  const slugs = readdirSync(blogDir);
  return slugs.map(slug => ({ slug }));
}

What’s happening here?

generateStaticParams tells Next.js which paths to statically pre-render at build time.
We’re scanning the blog directory and generating a list of slugs based on folder names.
The [slug] parameter becomes available inside the BlogPostPage component, giving us dynamic access to the requested post.

Important routing note

When visiting http://localhost:3000/blogs/my-first-blog-post, you may still see the original static page we created inside app/ instead of the dynamic one with the slug value. Next.js gives static routes precedence over dynamic ones inside the project. To avoid unexpected behavior and keep the content separate from the project’s main routing, store all blog posts in a top-level content/blogs folder outside app/. Think of content/ as your CMS or database. It prevents accidental route collisions and keeps the App Router focused on UI, not raw content files.

A clean layout looks like this:

nextjs-mui-blog-starter
├── src
│   ├── app
│   │   └── blogs
│   │       └── [slug]
│   │           └── page.tsx
├── content
│   ├── blogs
│   │   ├── my-first-blog-post
│   │   │   └── page.mdx
│   │   └── my-second-blog-post
│   │       └── page.mdx

At this point, visiting http://localhost:3000/blogs/my-first-blog-post should display the slug, but no content yet.

Loading MDX Content

With React 19, next-mdx-remote has not been updated and has known issues. We will use next-mdx-remote-client instead. It works well with the App Router and keeps MDX rendering on the server in an RSC-friendly fashion.

npm install next-mdx-remote-client

In app/blogs/[slug]/page.tsx, we will update the code to load and render each post:

import { readdirSync, readFileSync } from "fs";
import { MDXRemote } from "next-mdx-remote-client/rsc";
import path from "path";

interface BlogPostPageProps {
  params: { slug: string };
}

export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const { slug } = await params;

  const filePath = path.join(
    process.cwd(),
    "content",
    "blogs",
    slug,
    "page.mdx"
  );
  const fileContents = readFileSync(filePath, "utf8");

  return (
    <div>
      <h1>{slug}</h1>
      <MDXRemote source={fileContents} />
    </div>
  );
}

// Return all slugs for SSG
export async function generateStaticParams() {
  const blogDir = path.join(process.cwd(), "content/blogs");
  const slugs = readdirSync(blogDir);
  return slugs.map(slug => ({ slug }));
}

What this does

Reads the .mdx file for the requested slug from content/blogs/<slug>/page.mdx.
Renders it with <MDXRemote source={fileContents} />.

To test this out on multiple blogs, we can create another folder and MDX file for a new blog post.

content/blogs/my-second-blog-post/page.mdx

# Introduction

Welcome to my second blog post! In this post, I’ll share my journey of learning MDX and how it integrates with Next.js.

## Setup

To get started, we’ll install the latest MDX packages:

```bash
npm install @mdx-js/react
```

If everything is set up correctly, visiting the following URLs should render the respective blog posts:

Frontmatter and Metadata

Frontmatter is a block of structured data (usually in YAML or JSON) placed at the top of Markdown or MDX files. It’s commonly used to store metadata like:

Title
Description
Date
Author
Tags

This metadata helps you build SEO-friendly pages, dynamic lists of posts, and consistent layouts. All without hardcoding details into the component.

Add Frontmatter to Blog Posts

Let’s update each post with a frontmatter block as follows:

my-first-blog-post/page.mdx

---
title: My First Blog Post
description: Welcome to my first blog post! In this post, I will share my journey of learning Next.js and Material UI. Stay tuned for more exciting content!
date: "2022-01-01"
author: Mareli Ramos
tags: nextjs, material-ui
---

# Introduction

Your content goes here...

my-second-blog-post/page.mdx

---
title: My Second Blog Post
description: Welcome to my second blog post! This is a page created using MDX.
date: "2022-01-02"
author: Mareli Ramos
tags: mdx, react
---

# Introduction

Your content goes here...

Parsing Frontmatter

To extract frontmatter from each post, we’ll use the gray-matter package. It’s fast, lightweight, and handles both YAML and JSON.

npm install gray-matter

In app/blogs/[slug]/page.tsx, extract frontmatter and render it alongside the MDX content:

import { readdirSync, readFileSync } from "fs";
import matter from "gray-matter";
import { MDXRemote } from "next-mdx-remote-client/rsc";
import path from "path";

interface BlogPostPageProps {
  params: { slug: string };
}

export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const { slug } = await params;
  const filePath = path.join(
    process.cwd(),
    "content",
    "blogs",
    slug,
    "page.mdx"
  );
  const fileContents = readFileSync(filePath, "utf8");

  const { content, data: frontmatter } = matter(fileContents);

  return (
    <div>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.date}</p>
      <p>{frontmatter.author}</p>
      <p>{frontmatter.description}</p>
      <p>{frontmatter.tags}</p>
      <MDXRemote source={content} />
    </div>
  );
}
// Scans the content/blogs folder to return all slugs for SSG
export async function generateStaticParams() {
  const blogDir = path.join(process.cwd(), "content/blogs");
  const slugs = readdirSync(blogDir);
  return slugs.map(slug => ({ slug }));
}

At this point, when you visit the URLs:

http://localhost:3000/blogs/my-first-blog-post

http://localhost:3000/blogs/my-second-blog-post

You’ll see not only the blog content, but also all the metadata rendered above it.

Table of Contents (TOC)

A Table of Contents (TOC) is more than just a list—it’s a navigation boost for both your readers and search engines. It helps readers quickly jump to the content they need and gives search engines a clearer understanding of your page structure, which can even improve your chances of getting rich results in search.

Instead of maintaining one manually, we’ll generate a dynamic TOC based on the headings inside each blog post. This way, your TOC stays accurate and updated, no extra work required.

Install Required Packages

We’ll use a few handy libraries to parse and walk through the content tree:

npm install unified remark-parse remark-mdx unist-util-visit rehype-slug

I know that might seem like a lot, but they’re lightweight, efficient, and save us from manually parsing all the edge cases.

Here’s what we’re using:

unified – the core processor for parsing and transforming content
remark-parse – parses raw Markdown into an AST (abstract syntax tree)
remark-mdx – enables MDX parsing
unist-util-visit – allows us to traverse the AST efficiently
rehype-slug – generates slug IDs for heading elements

Extracting Headings

Let’s create a new function in app/blogs/[slug]/page.tsx that extracts all heading nodes from the MDX content:

...

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkMdx from "remark-mdx";
import { visit } from "unist-util-visit";

...

interface Heading {
  depth: number;
  text: string;
  slug: string;
}

...

export async function extractHeadings(content: string): Promise<Heading[]> {
  const headings: Heading[] = [];

  const processor = unified().use(remarkParse).use(remarkMdx);
  const ast = processor.parse(content);

  visit(ast, "heading", (node: any) => {
    const text = node.children.map((child: any) => child.value).join("");
    headings.push({
      depth: node.depth,
      text,
      slug: text
        .toLowerCase()
        .replace(/\s+/g, "-")
        .replace(/[^\w-]/g, ""), // Convert to slug-friendly format. E.g. "My Heading" -> "my-heading"
    });
  });

  return headings;
}

This function walks through the Markdown AST and returns all headings with their text, level (e.g., h2, h3), and a slug for anchor links.

Now, we should update the BlogPostPage component to use this function and render the TOC.

...

import rehypeSlug from "rehype-slug";

export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const { slug } = await params;
  const filePath = path.join(
    process.cwd(),
    "content",
    "blogs",
    slug,
    "page.mdx"
  );
  const fileContents = readFileSync(filePath, "utf8");

  const { content, data: frontmatter } = matter(fileContents);
  const headings = await extractHeadings(content);

  return (
    <div>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.date}</p>
      <p>{frontmatter.author}</p>
      <p>{frontmatter.description}</p>
      <p>{frontmatter.tags}</p>
      {/* Render TOC */}
      <ul>
        {headings?.map(({ text, slug, depth }) => (
          <li key={slug} style={{ marginLeft: `${depth - 1}rem` }}>
            <a href={`#${slug}`}>{text}</a>
          </li>
        ))}
      </ul>
      <MDXRemote
        source={content}
        options={{
          mdxOptions: { rehypePlugins: [rehypeSlug] },
          parseFrontmatter: true,
        }}
      />
    </div>
  );
}

...

rehypeSlug is added to the rehypePlugins array prop in MDXRemote to automatically generate id attributes for heading elements. These ids are derived from the heading text and make it possible to create anchor links.

In case you’re not familiar with rehype, it’s part of the Unified ecosystem, a powerful plugin system that transforms HTML content into an abstract syntax tree (AST). This makes it easy to manipulate, enhance, or even sanitize content during compilation.

With rehypeSlug in place and our extractHeadings function doing its job, we now render a clean Table of Contents where each item links to its respective section. We also use the depth value in HTML to adjust indentation and reflect the heading hierarchy visually.

Let’s test it out and update my-first-blog-post with additional heading levels like this:

## Learning Next.js

### Why Next.js?

# Learning Material UI

## Why Material UI?

## Conclusion

Navigate to http://localhost:3000/blogs/my-first-blog-post and you’ll now see a clickable TOC that anchors to each section of the article.

Code Highlighting

Code highlighting is one of those small touches that makes a huge difference, both for your readers and your own readability when revisiting code-heavy posts.

After trying out several options over the years, I found Shiki to offer the perfect balance between performance, theming flexibility, and developer experience. It’s lightweight, fast, and customizable enough to fit nicely into your blog design.

Install Shiki and Rehype Plugin

We’ll use Shiki in combination with rehype-pretty-code, a rehype plugin that integrates Shiki for syntax highlighting.

npm install shiki rehype-pretty-code

Configure Code Highlighting in MDX Compiler

Let’s update app/blogs/[slug]/page.tsx file to apply syntax highlighting via rehypePrettyCode:

...

import rehypePrettyCode from "rehype-pretty-code";

...

// Inside MDXRemote component
<MDXRemote
  source={content}
  options={{
    mdxOptions: {
      rehypePlugins: [
        rehypeSlug,
        [
          rehypePrettyCode,
          {
            theme: "github-dark", // or 'nord', 'dracula', etc.
            keepBackground: true,
          },
        ],
      ],
    },
    parseFrontmatter: true,
  }}
/>;

This tells the compiler to:

Style code blocks using the github-dark theme (you can customize it)
Preserve any background color defined by the theme with keepBackground: true

Let’s add a code snippet to the MDX blog post and see it in action:

# Code Highlighting

Here’s an example of a simple MUI-powered header component:

```jsx
import React from "react";
import { AppBar, Toolbar, Typography, Button } from "@mui/material";

export default function Header() {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" mr={5}>
          My Blog
        </Typography>
        <Button color="inherit">Home</Button>
        <Button color="inherit">Blog</Button>
        <Button color="inherit">About</Button>
      </Toolbar>
    </AppBar>
  );
}
```

Now when visiting http://localhost:3000/blogs/my-first-blog-post, you should see the syntax-highlighted block rendered with smooth, github-theme like styling, no manual styling needed. Hooray!

Using React Components in MDX

One of MDX’s best features is the ability to embed React components directly inside Markdown content.

This means we’re no longer limited to static code examples. We can actually render live components within posts, perfect for interactive demos, UI previews, or teaching by example.

Imagine writing a React tutorial and showing a simple counter. Instead of only pasting the code, your readers can see it in action and interact with it.

Create a React Component

Let’s create a basic Counter component inside the components folder:

// components/Counter.tsx
"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

"use client" in the first line is required to make this a client component, since it uses state and interactivity. The default behavior in Next.js is to render components on the server.

This is a simple component, but we can get creative and build more advanced widgets like tabbed examples, theme toggles, or custom UI cards.

Use Component in MDX

To use a component inside any .mdx blog post, we need to expose it to the MDX compiler by passing it via the components prop in MDXRemote.

import Counter from "@/components/Counter";

...

 <MDXRemote
        source={content}
        components={{ Counter }} // or add more components here. E.g. { Counter, Alert, Tabs }
        options={{
          mdxOptions: {
            rehypePlugins: [
              rehypeSlug,
              [
                rehypePrettyCode,
                {
                  theme: "github-dark", // or 'nord', 'dracula', etc.
                  keepBackground: true,
                },
              ],
            ],
          },
          parseFrontmatter: true,
        }}
      />
...

Now in any blog post, we can just write:

# Interactive Counter Example

Here’s a simple counter component you can interact with:

```tsx
import { useState } from "react";
export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}
```

<Counter />

In the demo video below, you can see how the counter component renders live inside the MDX content, allowing readers to interact with it directly.

Creating a List of Blog Posts

Now that we’ve got multiple posts up and running, let’s build a clean /blogs listing page to show them off, complete with tag-based filtering for a better browsing experience.

Create the blogs Page

Thanks to the power of the Next.js App Router, we can simply create a page.tsx file inside the blogs folder and it’ll automatically be available at /blogs.

Your project structure should look like this:

nextjs-mui-blog-starter
├── src
│   ├── app
│   │   ├── blogs
│   │   │   ├── [slug]
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx   ← our new blogs listing page
├── content
│   └── blogs
│       └── my-first-blog-post
│       └── my-second-blog-post

The app/blogs/[slug]/page.tsx file defines a dynamic route in the App Router. It acts as a template that loads and renders each blog post based on its unique slug (e.g., /blogs/my-first-post).
content/blogs/ holds the blog post MDX files with frontmatter
app/blogs/page.tsx is the blog listing page

Let’s add the following code in app/blogs/page.tsx to display a list of all blog posts by extracting their frontmatter:

import fs from "fs";
import path from "path";
import matter from "gray-matter";
import Link from "next/link";

const blogsDirectory = path.join(process.cwd(), "content", "blogs");

export default function BlogsPage() {
  const blogFolders = fs.readdirSync(blogsDirectory);

  const allBlogs = blogFolders.map(folder => {
    const filePath = path.join(blogsDirectory, folder, "page.mdx");
    const fileContent = fs.readFileSync(filePath, "utf-8");
    const { data: frontmatter } = matter(fileContent);

    return {
      slug: folder,
      ...frontmatter,
    };
  });

  return (
    <div>
      <h1>All Blog Posts</h1>
      <ul>
        {allBlogs.map((blog: any) => (
          <li key={blog.slug}>
            <Link href={`/blogs/${blog.slug}`}>
              <h2>{blog.title}</h2>
              <p>{blog.description}</p>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Similar to the app/blogs/[slug]/page.tsx file, which handles dynamic routing and displays a single blog post based on the URL slug, this page will iterate through the entire content directory, extract the metadata (frontmatter) from each post, and render them as a list.

Now, when you navigate to http://localhost:3000/blogs, you should see a clean list of all the blog posts with titles and descriptions.

SEO Tip: Use meaningful <h1>, <h2> elements and meta descriptions per blog for better indexing.

Filtering Blog Posts

Given that you’re on your way to becoming a blogging superstar, it makes sense to give your readers a way to easily filter and explore your posts based on topics they care about.

Since we already added tags to the frontmatter of each blog post, let’s build a simple but powerful filter system based on those tags.

We’ll start by adding searchParams to the BlogsPage component. This allows us to capture the selected tag from the URL and use it to filter posts:

export default function BlogsPage({
  searchParams,
}: {
  searchParams: { tag?: string };
}) {
  const selectedTag = searchParams?.tag;

  ...
}

Thanks to the awesome App Router in Next.js 13+, searchParams is available directly in server components. No need for extra hooks or client-side tricks.

Now let’s filter the blog posts using the selected tag:

const filteredBlogs = selectedTag
  ? allBlogs.filter((blog: any) => blog.tags?.includes(selectedTag))
  : allBlogs;

This ensures that only posts matching the selected tag are shown. Pretty handy when your content library starts to overflow with posts.

And here’s how it all comes together in BlogsPage component:

import fs from "fs";
import path from "path";
import matter from "gray-matter";
import Link from "next/link";

const blogsDirectory = path.join(process.cwd(), "content", "blogs");

export default function BlogsPage({
  searchParams,
}: {
  searchParams: { tag?: string };
}) {
  const selectedTag = searchParams?.tag;

  const blogFolders = fs.readdirSync(blogsDirectory);

  const allBlogs = blogFolders
    .filter(folder => folder !== "page.tsx")
    .map(folder => {
      const filePath = path.join(blogsDirectory, folder, "page.mdx");
      const fileContent = fs.readFileSync(filePath, "utf-8");
      const { data: frontmatter } = matter(fileContent);

      return {
        slug: folder,
        ...frontmatter,
      };
    });

  const allTags = ["react", "material-ui", "mdx", "nextjs"]; // You can dynamically generate this too

  const filteredBlogs = selectedTag
    ? allBlogs.filter((blog: any) => blog.tags?.includes(selectedTag))
    : allBlogs;

  return (
    <div>
      <div>
        <h2>Tags</h2>
        <ul>
          {allTags.map(tag => (
            <li key={tag}>
              <Link
                href={`/blogs?tag=${tag}`}
                style={{
                  fontWeight: tag === selectedTag ? "bold" : "normal",
                }}
              >
                {tag}
              </Link>
            </li>
          ))}
        </ul>
      </div>
      <h1>All Blogs</h1>
      <ul>
        {filteredBlogs.map((blog: any) => (
          <li key={blog.slug}>
            <Link href={`/blogs/${blog.slug}`}>
              <h2>{blog.title}</h2>
              <p>{blog.description}</p>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

We’re listing a static set of tags for now, just to keep things simple, but feel free to level up and dynamically extract tags from your blog content later.

In the template, each tag is rendered as a link. When a reader clicks on one, it updates the tag query param in the URL, triggering a filter that only shows blog posts matching that tag.

Now, if you head over to http://localhost:3000/blogs?tag=nextjs, you’ll see only the posts tagged with “nextjs”.

Design Tokens & Theme Configuration

From this section onward, we’ll shift focus to the design and theming side of things. We’ll explore how to create a consistent visual language using design tokens and custom theming. Code examples are all samples from the starter project. Anytime you need access to the full source, you can find it here on GitHub.

When it comes to styling large applications, or even moderately sized ones, consistency is key. And let’s be honest, guessing paddings and hex codes on the fly is a productivity killer. That’s where design tokens come in. Think of them as a visual grammar in your nextjs theme: reusable values for spacing, typography, colors, shadows, and more.

In this starter, we’ve structured tokens in a single source of truth: styles/tokens.ts.

Design Tokens in Action

Here’s a snippet from the tokens.ts file:

export const {
  font,
  spacing,
  shadows,
  colors,
  borderRadius,
  letterSpacing,
  lineHeight,
} = {
  colors: {
    primary: {
      100: "#f6fffa",
      200: "#e0fff4",
      300: "#b3ffe1",
      ...
    },
    secondary: {
      100: "#dbdce8",
      200: "#b7b9c8",
      300: "#8f92a6",
      ...
    },
    grey: {
      100: "#f8f9fb",
      200: "#f1f3f5",
      300: "#e9ecef",
      ...
    },
  },
  font: {
    size: {
      1: "1rem",
      2: "1.2rem",
      3: "1.6rem",
      ...
    },
  },
  spacing: {
    1: "0.4rem",
    2: "0.8rem",
    3: "1.2rem",
    ...
  },
  shadows: [
    "none",
    "0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24)",
    "0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23)",
    ...
  ],
  borderRadius: {
    small: "4px",
    medium: "7px",
    pill: "50px",
  },
  letterSpacing: {
    small: "0.5px",
    large: "1px",
  },
  lineHeight: {
    small: "1.3em",
    ...
  },
};

These token values are simple, semantic, and most importantly, predictable. No need to wonder “Was that padding 1.2rem or 1.6rem?” You just reach for spacing[3] or font.size[4], and you’re done.

In my setup, tokens cover:

Spacing (in steps of 4px)
Font sizes
Color palettes (primary, secondary, grey, etc.)
Shadows (scalable elevation system)
Border radius, line height, letter spacing

This makes everything from Button to Banner look and feel like it came from the same brand playbook.

Creating the Theme

Now that we have our tokens, it’s time to wire them into the actual MUI theme using createTheme. Here’s a simplified look at how it comes together in theme.ts:

"use client";

import { createTheme } from "@mui/material";
import {
  borderRadius,
  colors,
  font,
  letterSpacing,
  lineHeight,
} from "./tokens";

const theme = createTheme({
  palette: {
    primary: {
      main: colors.primary[500],
    },
    secondary: {
      main: colors.secondary[500],
    },
  },
  typography: {
    letterSpacing: letterSpacing,
    lineHeight: lineHeight,
    ...font.size,
  },
  shape: {
    radius: borderRadius,
  },
});

export default theme;

As you can see, we’re not just dropping values randomly, we’re referencing our tokens throughout the theme. That means every sx prop or styled component across the app now has direct access to a design language that scales.

Why This Matters

You might be thinking: “Cool, but why not just use MUI’s defaults and tweak what I need?”

Totally fair. But using your own tokens gives you a few massive wins:

Consistency across components and pages
Easy theme switching (light/dark or even brand variants)
Reusability across projects (yep, this token setup is portable)

In short: when your design decisions are abstracted as tokens, you write less custom CSS and spend more time building features that matter.

To get the theme showing up in the app, we need to wrap the root layout with MUI’s ThemeProvider:

import { ThemeProvider } from "@mui/material";
import theme from "./theme";

export default function RootLayout({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

For an in-depth look at custom theming with MUI, check out my guide: Customizing Theme, Palette, and Colors with Material UI (MUI)

Section-Specific Palettes

One thing I like about this theme setup is that it doesn’t just define generic MUI palette keys, it also creates palette areas for specific sections of the site:

blog → custom header background, h1 color, and code block styles.
about → custom section borders, title colors, and icon colors.
postCard → tag backgrounds.
subscribe → header text colors.

This keeps the styling logic organized and makes it very easy to change the look of an entire section without touching multiple components.

Example:

const theme = createTheme({
  palette: {
    primary: {
      main: colors.primary[500],
    },
    secondary: {
      main: colors.secondary[500],
    },
    blog: {
      headerBgColor: colors.secondary[100],
      h1Color: colors.secondary[500],
      preBorderColor: colors.secondary[300],
      codeBgColor: colors.grey[100],
      codeTextColor: colors.secondary[700],
    },
    about: {
      sectionBorderColor: colors.grey[300],
      titleColor: colors.primary[700],
      iconColor: colors.primary[500],
    },
    postCard: {
      tagBgColor: colors.grey[200],
    },
    subscribe: {
      headerTextColor: colors.primary[700],
    },
  },
});

Now when we want to style the blog header component, we can simply do:

const BlogHeader = () => {
  const theme = useTheme();
  return (
    <Box
      sx={{
        backgroundColor: "blog.headerBgColor",
        color: "blog.h1Color",
        ...
      }}
    >
      ...
    </Box>
  );
};

Extending the MUI Theme with Custom Types

Design tokens and theme configuration give us the structure. But if we’re serious about DX (Developer Experience), TypeScript is our best friend. Why guess what properties are available in the theme when we can get full IntelliSense and type safety?

This is where the magic of theme-types.d.ts comes in.

Extending MUI Theme Types

Let’s assume we want to add a custom blog section to the theme palette for blog-specific properties like header background color, h1 color, and code block styles.

// theme.ts
"use client";
import { createTheme } from "@mui/material";
import { colors } from "./tokens";

const theme = createTheme({
  palette: {
    primary: {
      main: colors.primary[500],
    },
    secondary: {
      main: colors.secondary[500],
    },
    blog: {
      headerBgColor: colors.secondary[100],
      h1Color: colors.secondary[500],
      preBorderColor: colors.secondary[300],
    },
  },
});

export default theme;

By default, MUI provides types for its palette, typography, and shape. But if we want to add custom theme sections like above, we need to tell TypeScript they exist. Otherwise, theme.palette.blog?.h1Color will just display red squiggles and sad vibes.

Let’s create a new file: theme-types.d.ts:

import "@mui/material/styles";

declare module "@mui/material/styles" {
  interface Palette {
    blog?: {
      headerBgColor: string;
      h1Color: string;
      preBorderColor: string;
    };
  }

  interface PaletteOptions {
    blog?: {
      headerBgColor: string;
      h1Color: string;
      preBorderColor: string;
    };
  }
}

We’re telling MUI:

“Hey, we’ve got some extra sections in our theme. Don’t worry, we’ll define what keys they have and what values they expect.”

We can also do the same for:

shape.radius (like small, medium, pill, circle)
typography.letterSpacing
typography.lineHeight

declare module "@mui/material/styles/createTypography" {
  interface Typography {
    letterSpacing: LetterSpacing;
    lineHeight: LineHeight;
  }
  interface TypographyOptions {
    letterSpacing?: LetterSpacing;
    lineHeight?: LineHeight;
  }
}

declare module "@mui/system/createTheme/shape" {
  interface Shape {
    radius: BorderRadius;
  }
  interface ShapeOptions {
    radius: BorderRadius;
  }
}

Now when you’re inside a component and want to do:

const theme = useTheme();
console.log(theme.palette.blog?.h1Color); // ✅ No more red squiggles

You’ll get autocompletion and type checking. It’s like having a mini design system IDE right inside your editor.

Global Styles & Typography Setup

Before a single component hits the screen, we want to make sure we have a strong basis: standard spacing, font sizing, scrollbars, and responsive scaling across different browsers.

That’s exactly what we’ll do in global.tsx.

Setting Global Styles with MUI

MUI offers a GlobalStyles component that lets us apply baseline styles to the html, body, or any tag. In my setup, I’m using it to enforce:

fontSize (root rem base)
fontFamily (from theme)
Custom scrollbar styles
Full height for the html element

Here’s what it looks like:

import { GlobalStyles } from "@mui/material";

const globalStyles = (
  <GlobalStyles
    styles={theme => ({
      html: {
        height: "100%",
        fontSize: "62.5%",
        fontFamily: theme.typography.fontFamily,
        "&::-webkit-scrollbar": {
          width: 10,
        },
        "&::-webkit-scrollbar-track": {
          borderRadius: theme.shape.radius.small,
        },
        "&::-webkit-scrollbar-thumb": {
          background: theme.palette.grey[500],
          borderRadius: theme.shape.radius.medium,
        },
      },
    })}
  />
);

export default globalStyles;

Why fontSize: 62.5%?

This classic trick that sets the base 1rem = 10px. It’s a small touch that makes spacing and sizing math-friendly:

1.6rem → 16px
2.4rem → 24px

This lines up beautifully with the font.size and spacing tokens from our design system.

To apply these styles globally, all we need to do is import and inject globalStyles inside layout.tsx or the root layout:

import globalStyles from "./styles/global";
...
  return (
    <ThemeProvider theme={theme}>
      {globalStyles}
      {children}
    </ThemeProvider>
  );
};

And voilà! Your app now has consistent scrollbars, base font sizes, and typography that flows from the theme. For more details regarding MUI global styling, I suggest reading this small tutorial I wrote: How to Create Global Styles in Material UI (MUI)

Typography Setup with Google Fonts

In theme.ts we’re importing Poppins from next/font/google, and setting it as the base theme font:

import { Poppins } from "next/font/google";
...

const poppins = Poppins({
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  subsets: ["latin"],
  display: "swap",
});

...

const theme = createTheme({
  ...

  typography: {
    htmlFontSize: 10,
    fontFamily: poppins.style.fontFamily,
  },
});

This gives you:

Smooth loading fonts (with display: swap)
Strong visual identity from the get-go
htmlFontSize sets the base font to 10px to match our 62.5% global style
And since this font setup is defined in the theme, every single component inherits it without needing to touch CSS.

Component-Level Styling Using Tokens

With a solid theme and design tokens in place, styling individual components becomes a breeze. You can leverage MUI’s sx prop and direct style props to apply consistent, theme-aware styles without writing custom CSS.

`sx` vs. Direct Props

The sx prop gives us access to the full range of CSS styles, plus theme-aware values. It’s the most flexible option:

<Toolbar
  sx={{
    py: 7,
    bgcolor: "primary.500",
    color: "white",
    borderBottom: 1,
    borderColor: "grey.200",
  }}
>
  Flexible styling with full theme access
</Toolbar>

Direct props can be faster to write and in some cases apply multiple styles at once. For example, color="primary" in the AppBar component affects text, icons, and certain background states in one go:

<AppBar position="static" color="primary" elevation={0}>
  <Toolbar>Direct props for quick styling</Toolbar>
  <Typography
    fontSize="7"
    fontWeight="600"
    whiteSpace="nowrap"
    color="primary.500"
  >
    Mareli Ramos
  </Typography>
</AppBar>

Theme-Aware Shorthand

MUI maps certain style props to theme keys automatically. For colors, we can use primary.500, grey.100, etc., without manually resolving them from theme.palette.

<Box sx={{ bgcolor: "grey.100", color: "primary.500" }}>
  This box uses theme palette shorthand
</Box>

This corresponds to the tokens defined in tokens.ts:

palette: {
  primary: {
    500: '#0D47A1',
    ...
  },
  grey: {
    100: '#F5F5F5',
    ...
  }
}

Spacing works similarly. We can pass numbers to props like gap, p, or m and MUI will look up the value from the spacing scale.

<Stack gap={4} p={2}>
  Spaced using theme.spacing
</Stack>

This corresponds to the spacing array in tokens.ts:

spacing: [0, 4, 8, 12, 16, 20, 24, ...]

Custom Font Size Hack

By default, MUI’s fontSize expects numbers tied to a fixed scale. But since we have our own font size tokens, we can spread them directly into the typography section of the theme. This way, we can use our custom sizes as strings in the fontSize prop.

tokens.ts:

font: {
  size: {
    1: '1rem',
    2: '1.2rem',
    3: '1.4rem',
    4: '1.6rem',
    5: '1.8rem',
    6: '2rem',
    7: '2.4rem',
    ...
  }
}

theme.ts:

typography: {
  htmlFontSize: 10,
  ...fontFamily,
  ...letterSpacing,
  ...lineHeight,
  ...font.size, // <– Spread font sizes directly here
}

Usage:

<Typography fontSize="2">
  This is 1.2rem because fontSize comes from tokens
</Typography>

Use "2" as a string. If you pass {2}, MUI will treat it as an index in its internal scale, bypassing our tokens.

With these patterns, your component styles become predictable, theme-driven, and easy to refactor. No guesswork, no color-picking, just consistent design language baked into every element.

Using Theme Variables Responsively

Our theme tokens aren’t just for static styles—they work beautifully with MUI’s responsive styling system. This allows us to adapt spacing, typography, and layout across different screen sizes while still staying consistent with our design language.

Responsive Values in `sx`

MUI lets you pass an object keyed by breakpoints directly inside the sx prop. The keys correspond to breakpoints defined in the theme (xs, sm, md, lg, xl).

<Box
  sx={{
    p: { xs: 2, md: 4 },
    fontSize: { xs: "3", md: "5" },
    bgcolor: { xs: "grey.100", md: "primary.500" },
    color: { xs: "primary.500", md: "white" },
  }}
>
  Responsive box using theme values
</Box>

Here, p, fontSize, bgcolor, and color all reference values from our tokens, they just change depending on the viewport size. For example, p: 2 on small screens becomes p: 4 on medium and up.

Example from Main Codebase

Here’s a real example adapted from the repo, showing how the Banner component adapts typography and padding:

<Grid
  container
  mt={{ xs: 2, lg: 6 }}
  gap={7}
  direction={{ xs: "column-reverse", lg: "row" }}
  flexWrap="nowrap"
  alignItems="center"
  width="auto"
>
  ...
</Grid>

In this component:

mt (margin-top) uses spacing tokens, changing from 2 (8px) on small screens to 6 (24px) on large.
direction switches from column on small screens to row on large, adapting layout responsively.

This tutorial has a more detailed walkthrough for creating responsive layouts: Breakpoints and Responsive Design with Material UI (MUI)

Dark Mode Support & Theme Switching

One of the best parts of our theming setup is how light and dark modes are handled in a completely token-driven way—with no manual color overrides scattered across components.

Defining Light & Dark Color Schemes

In theme.ts, we use MUI’s colorSchemes property to define two separate palettes: one for light and one for dark. Each using the same token names but with different values.

const theme = createTheme({
  cssVariables: { colorSchemeSelector: "class" },
  colorSchemes: {
    light: {
      palette: {
        primary: {
          main: colors.primary[500],
          contrastText: colors.grey[50],
          ...colors.primary,
        },
       blog: {
          headerBgColor: lighten(colors.secondary[100], 0.4),
          h1Color: colors.secondary[500],
          preBorderColor: colors.secondary[300],
          ...
        },
      },
    },
    dark: {
      palette: {
         primary: {
          main: colors.primary[600],
          contrastText: colors.grey[50],
          ...colors.primary,
        },
        blog: {
          headerBgColor: "black",
          h1Color: colors.secondary[300],
          preBorderColor: colors.secondary[700],
          ...
      },
    },
  },
});

Here’s the beauty: both modes share the same palette keys (primary.main, blog.h1Color, etc.). Which means when we switch modes, every component using theme-aware colors automatically updates without touching the component code.

Switching Modes with `useColorScheme()`

In Header.tsx, we’ll use MUI’s useColorScheme() hook to toggle between modes.

"use client";

import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { Box, IconButton, useColorScheme } from "@mui/material";
export default function Header() {
  const { mode, setMode, systemMode } = useColorScheme();
  const isDark =
    mode === "dark" || (mode === "system" && systemMode === "dark");
  return (
    <>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" mr={5}>
            My Blog
          </Typography>
          <Button color="inherit">Home</Button>
          <Button color="inherit">Blog</Button>
          <Button color="inherit">About</Button>
          <IconButton onClick={() => setMode(isDark ? "light" : "dark")}>
            {isDark ? "🌞" : "🌜"}
          </IconButton>
        </Toolbar>
      </AppBar>

      <Box
        sx={{
          backgroundColor: "blog.headerBgColor",
          color: "blog.h1Color",
        }}
      >
        Title
      </Box>
    </>
  );
}

The hook handles:

mode: current mode (light, dark, or system)
setMode(): instantly switches modes
systemMode: respects OS-level settings if mode is "system"

Automatic Theme Updates

Since components pull styles from theme.palette and other tokens, toggling the mode instantly changes values like:

Text colors (text.primary, text.secondary)
Backgrounds (background.default, banner.background)
Section-specific palettes (blog.h1Color, about.headerTitle)

Example: If your blog header uses color="blog.h1Color", switching to dark mode swaps the color without touching the component:

<Typography color="blog.h1Color">Hello Dark Mode ✨</Typography>

Now, when going to any of the blog pages and toggling the theme, you’ll see the entire page update, including all elements.

Summary

Whew, that was a lot to cover! I hope this deep dive into building a Next.js blog starter with MUI has given you a solid foundation to create your own content-rich, beautifully themed applications. You now have a reusable nextjs template to build on 🚀

A quick recap of what we covered:

Setting up a Next.js project with MUI and MDX (App Router SSR + MDX component mapping)
Creating dynamic blog posts with frontmatter
Implementing a dynamic Table of Contents (TOC)
Adding syntax highlighting with Shiki and rehype plugins
Embedding React components directly in MDX content
Building a blog listing page with tag-based filtering
Establishing a design system with tokens, custom theming, and section-specific palettes
Extending MUI theme types for better DX
Applying global styles and typography setup
Styling components using theme-aware values
Using theme variables responsively
Implementing dark mode support with seamless theme switching

Feel free to explore the complete source code on GitHub, and if you found this guide helpful, please star the repo on GitHub here.

Creating React Fieldset Component with MUI

The <fieldset> element is a commonly used HTML element that serves a specific purpose in forms: grouping related information. For example, within a form, you might have sections like “Basic Info,” “Address,” or “Payment Info.”

When working with frameworks like React and UI libraries like MUI, using standard HTML elements directly can sometimes feel limiting. That’s where creating a custom component comes in handy. In this tutorial, we’ll walk through how to create a custom and enhanced Fieldset component using React and MUI.

Let’s dive in and start building this component step by step!

Basic React Fieldset

Let’s start by creating a basic React component named Fieldset. This component will encapsulate the HTML <fieldset> element along with its associated <legend> (the section’s title or label):

const Fieldset = ({ children }) => {
  return (
    <fieldset>
      <legend>title</legend>
      {children}
    </fieldset>
  );
};

The children prop allows you to pass in any content that should be placed inside the <fieldset>.

This is a good starting point, but it’s quite limited because the title is fixed and can’t be customized. There’s no way to pass additional properties or customize the component’s behavior.

We can enhance the Fieldset component by introducing props to make it more flexible and reusable:

Customizing the Legend: We’ll introduce a title prop that allows us to dynamically modify the content of the <legend> element.
Optional Legend: If no title is provided, we can disable the rendering of the <legend> element altogether.
Prop Forwarding: To make our component more flexible, we’ll forward any additional props to the <fieldset> element.

const Fieldset = ({ title, children, ...props }) => {
  return (
    <fieldset {...props}>
      {title && <legend>{title}</legend>}
      {children}
    </fieldset>
  );
};

The ...props syntax (known as the rest operator) captures all additional props passed to the Fieldset component. These props are then spread onto the <fieldset> element using {...props}. This allows you to directly pass any other attributes (such as className, style, id, etc.) to the <fieldset> element from the Fieldset component.

Now that we’ve created the React component, using it is fun and straightforward! Below is an example of how it can be used within a form:

<form>
  <Fieldset title="User Information">
    <label>
      Username: <input type="text" name="username" />
    </label>
    <label>
      Password: <input type="password" name="password" />
    </label>
  </Fieldset>
</form>

Advanced MUI Fieldset

When working with MUI, you gain powerful tools for customizing styles. Thanks to the underlying theme system and the sx approaches for adding styles. Before we dive into styling, let’s first convert our previously created Fieldset React component into its equivalent MUI-based version:

import React from "react";
import { Box, Typography } from "@mui/material";

const Fieldset = ({ title, children, ...props }) => {
  return (
    <Box component="fieldset" {...props}>
      {title && <Typography component="legend">{title}</Typography>}
      {children}
    </Box>
  );
};

The Box component is a versatile wrapper that can take on the role of any HTML element via the component prop. In this case, we set component="fieldset" to ensure it renders as a <fieldset> in the DOM.
The Typography component is used to render the <legend> element. MUI’s Typography component is highly flexible and allows consistent text styling across the application.

Customizing the Component with Styling Props

To make the component more flexible, we can introduce several props that allow for easy customization of common styling properties. These include properties for controlling the border and text styling. Since the legend title and the fieldset borders often share similar colors, we can group them for convenience.

Here’s the enhanced version of our component:

import { Box, Typography } from "@mui/material";

const Fieldset = ({
  title,
  color = "inherit",
  titleSize = "1rem",
  borderWidth = 1,
  borderRadius = 2,
  children,
  sx = {},
  ...props
}) => {
  return (
    <Box
      component="fieldset"
      sx={{
        borderColor: color,
        borderWidth: borderWidth,
        borderRadius: borderRadius,
        ...sx,
      }}
      {...props}
    >
      {title && (
        <Typography
          component="legend"
          sx={{
            color: color,
            fontSize: titleSize,
          }}
        >
          {title}
        </Typography>
      )}
      {children}
    </Box>
  );
};

The sx prop allows you to use MUI’s design tokens and theme system directly within your components. In this example, we use sx to apply styles based on the props passed to the Fieldset component.
Extending sx with the spread operator (...sx) ensures that any additional styles passed to the component do not override the existing styles.
Using the color prop, we simplify the styling process, ensuring that the fieldset border and the legend text share the same color, which is a common requirement.

Let’s look at how to use this enhanced Fieldset component in a React application:

<Fieldset
  title="Basic Information"
  color="secondary.main"
  titleSize="1.1rem"
  borderWidth={2}
  borderRadius={1}
>
  <label>
    Username: <input type="text" name="username" />
  </label>
  <label>
    Password: <input type="password" name="password" />
  </label>
</Fieldset>

Advanced Styling with `sx`

While the exposed props provide a convenient way to style the component, we can further customize using the sx prop directly. This allows for more advanced and detailed styling:

<Fieldset
  title="Basic Information"
  titleSize="1.2rem"
  borderWidth={2}
  borderRadius={3}
  color="grey.400"
  sx={{
    borderStyle: "dashed",
    padding: 3,
    "& legend": {
      backgroundColor: "secondary.main",
      color: "grey.200",
      padding: "0 8px",
      borderRadius: "4px",
    },
    backgroundColor: "grey.100",
  }}
>
  {/* Form fields go here */}
</Fieldset>

Adding Icons to the Title

The title is not limited to only text. We can pass any React element to the title prop. In the example below, we are adding an icon right before the title:

import { Typography, Stack } from "@mui/material";
import InfoIcon from "@mui/icons-material/Info";

<Fieldset
  title={
    <Stack direction="row" alignItems="center" gap={1}>
      <InfoIcon />
      Basic Information
    </Stack>
  }
  color="primary.main"
  titleSize="1.2rem"
  borderWidth={2}
  borderRadius={3}
>
  {/* Form fields go here */}
</Fieldset>;

Using TypeScript

Making the Fieldset component TypeScript-friendly brings several benefits, including reducing runtime errors, providing better autocompletion and IntelliSense in editors, and acting as self-documentation for the component.

To convert the previous Fieldset component to TypeScript, we need to create an interface that defines the types of the props and ensure that the component adheres to that interface:

import React, { ReactNode } from "react";
import { Box, Typography } from "@mui/material";
import { SxProps, Theme } from "@mui/system";

interface FieldsetProps {
  title?: ReactNode;
  color?: string;
  titleSize?: string;
  borderWidth?: number;
  borderRadius?: number;
  children: ReactNode;
  sx?: SxProps<Theme>;
}

const Fieldset = ({
  title,
  color = "grey.800",
  titleSize = "1rem",
  borderWidth = 1,
  borderRadius = 2,
  children,
  sx = {},
  ...props
}: FieldsetProps) => {
  return (
    <Box
      component="fieldset"
      sx={{
        borderColor: color,
        borderWidth: borderWidth,
        borderRadius: borderRadius,
        ...sx,
      }}
      {...props}
    >
      {title && (
        <Typography
          component="legend"
          sx={{
            color: color,
            fontSize: titleSize,
          }}
        >
          {title}
        </Typography>
      )}
      {children}
    </Box>
  );
};

export default Fieldset;

Each prop is defined in the FieldsetProps interface, and the component uses these types to ensure that the correct type of value is passed. For example, if a developer tries to pass a number to the title prop, TypeScript will throw an error.

Summary & Complete Code

In this tutorial, we created a customizable Fieldset component in React using Material-UI (MUI). Here’s a quick recap:

Basic Component: Started with a simple React component that encapsulates the <fieldset> and <legend> elements.
MUI Integration: Enhanced the component by using MUI’s Box and Typography components for better styling control.
Styling Flexibility: Introduced props like borderColor, borderWidth, borderRadius, and color to allow easy customization.
Advanced Styling: Demonstrated the use of the sx prop for more advanced, theme-based styling.
TypeScript Conversion: Converted the component to TypeScript, adding type safety and improving development with better autocompletion and documentation.

Here is the complete live code:

Bye for now 👋

React Responsive Navbar with MUI

Creating a responsive header for mobile and other devices is essential to accessing a wider audience. Users increasingly access websites from various devices with different screen sizes, so a responsive navbar ensures a seamless and user-friendly experience.

In this tutorial, we will learn how to create vertical tabs in React and Material UI. MUI provides a robust set of components and styling options that make the implementation of vertical tabs straightforward and highly customizable.

To get started, we need to install MUI dependencies in our React project:

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

Let’s create a simple header with a logo on the left and navigation links on the right. The links will be defined in an array that we can loop through to populate the navbar, making it easy to add or remove items:

import React from "react";
import {
  Stack,
  Link,
  Toolbar,
  Typography,
  Container,
  AppBar,
} from "@mui/material";

const pages = [
  { name: "Products", id: "products" },
  { name: "Services", id: "services" },
  { name: "About", id: "about" },
  { name: "Testimonials", id: "testimonials" },
  { name: "Contact", id: "contact" },
];

const Header = () => {
  return (
    <AppBar>
      <Container>
        <Toolbar>
          <Stack
            direction="row"
            justifyContent="space-between"
            alignItems="center"
            width="100%"
          >
            <Typography variant="h6">My App</Typography>
            <Stack direction="row" gap={3}>
              {pages.map(page => (
                <Link
                  key={page.id}
                  sx={{
                    color: { xs: "primary", sm: "white" },
                  }}
                >
                  {page.name}
                </Link>
              ))}
            </Stack>
          </Stack>
        </Toolbar>
      </Container>
    </AppBar>
  );
};

export default Header;

In the code above, we created a Header component that renders the following components from MUI:

AppBar: Creates an application bar that holds the navigation elements.
Container: Centers the content horizontally with padding on the sides.
Toolbar: Aligns its children horizontally, providing a flexible container within the AppBar.
Stack: Arranges the logo and navigation links in a row, with the logo on the left and links on the right.

There are multiple ways to create responsive layouts in MUI, but in this tutorial, we’ll use the sx prop to handle the changes. For a more detailed understanding, you can refer to the tutorial on Breakpoints and Responsive Design.

Let’s walk through how to make a responsive navbar using a drawer for mobile devices.

Simple Example to Show/Hide on Mobile

First, we’ll demonstrate how to show and hide elements based on the screen size using the sx prop:

import { Box, Typography } from "@mui/material";

const ResponsiveExample = () => {
  return (
    <Box>
      <Typography sx={{ display: { xs: "none", sm: "block" } }}>
        Other Devices
      </Typography>
      <Typography sx={{ display: { xs: "block", sm: "none" } }}>
        Mobile Device
      </Typography>
    </Box>
  );
};

export default ResponsiveExample;

The breakpoint xs applies to extra-small screens (mobile) up to sm screens (small devices). Meanwhile, sm applies to small devices and above because there is no breakpoint after sm, so it will be applied to all other screens.

We can try to resize the window using the handle at the bottom right corner to see the text changing based on the screen size.

NavList Component

We’ll start by creating a NavList component that will host the links and be responsible for updating the links’ direction, spacing, and other styling based on the breakpoint/device size:

const NavList = ({ ...props }) => {
  return (
    <Stack
      overflow="auto"
      direction={{ xs: "column", sm: "row" }}
      gap={3}
      ml={{ xs: 3, sm: 0 }}
      mt={{ xs: 3, sm: 0 }}
      width={{ xs: "150px", sm: "initial" }}
      {...props}
    >
      {pages.map(page => (
        <Link
          key={page.id}
          sx={{
            color: { xs: "primary", sm: "white" },
          }}
        >
          {page.name}
        </Link>
      ))}
    </Stack>
  );
};

The Stack component arranges the links in a column on mobile devices and a row on larger screens. We also set the margin and width based on the screen size to ensure proper spacing and alignment of the links.

Nav Component

The Nav component will contain the menu button icon and Drawer for mobile devices. The NavList will be used within the Drawer component for mobile and displayed directly for larger screens:

const Nav = () => {
  const [open, setOpen] = useState(false);
  const toggleDrawer = newOpen => () => {
    setOpen(newOpen);
  };

  return (
    <>
      <Button
        variant="text"
        onClick={toggleDrawer(true)}
        sx={{ color: "white", display: { xs: "flex", sm: "none" } }}
      >
        <MenuIcon />
      </Button>
      <Drawer
        open={open}
        onClose={toggleDrawer(false)}
        anchor="right"
        sx={{
          display: { xs: "inherit", sm: "none" },
        }}
      >
        <NavList />
      </Drawer>
      <NavList
        sx={{
          display: { xs: "none", sm: "inherit" },
        }}
      />
    </>
  );
};

The Drawer component creates a sliding menu that opens from the right side of the screen on mobile devices. The open state and toggleDrawer function are used to control the drawer’s visibility.

Complete Header Component

Now, we’ll put everything together by replacing the initial links we had in the header with the new Nav component:

import React, { useState } from "react";
import {
  Stack,
  Link,
  Toolbar,
  Typography,
  Container,
  AppBar,
  Button,
  Drawer,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";

const pages = [
  { name: "Products", id: "products" },
  { name: "Services", id: "services" },
  { name: "About", id: "about" },
  { name: "Testimonials", id: "testimonials" },
  { name: "Contact", id: "contact" },
];

const NavList = ({ ...props }) => {
  return (
    <Stack
      overflow="auto"
      direction={{ xs: "column", sm: "row" }}
      gap={3}
      ml={{ xs: 3, sm: 0 }}
      mt={{ xs: 3, sm: 0 }}
      width={{ xs: "150px", sm: "initial" }}
      {...props}
    >
      {pages.map(page => (
        <Link
          key={page.id}
          sx={{
            color: { xs: "primary", sm: "white" },
          }}
        >
          {page.name}
        </Link>
      ))}
    </Stack>
  );
};

const Nav = () => {
  const [open, setOpen] = useState(false);
  const toggleDrawer = newOpen => () => {
    setOpen(newOpen);
  };

  return (
    <>
      <Button
        variant="text"
        onClick={toggleDrawer(true)}
        sx={{ color: "white", display: { xs: "flex", sm: "none" } }}
      >
        <MenuIcon />
      </Button>
      <Drawer
        open={open}
        onClose={toggleDrawer(false)}
        anchor="right"
        sx={{
          display: { xs: "inherit", sm: "none" },
        }}
      >
        <NavList />
      </Drawer>
      <NavList
        sx={{
          display: { xs: "none", sm: "inherit" },
        }}
      />
    </>
  );
};

const Header = () => {
  return (
    <AppBar>
      <Container>
        <Toolbar>
          <Stack
            direction="row"
            justifyContent="space-between"
            alignItems="center"
            width="100%"
          >
            <Typography variant="h6">My App</Typography>
            <Nav />
          </Stack>
        </Toolbar>
      </Container>
    </AppBar>
  );
};

export default Header;

When resizing the window in the above code example, the navbar changes its layout based on the screen size, and the navigation links are displayed in a drawer on mobile devices.

MUI drawers allow us to change the position of the sliding menu using the anchor prop. Here’s an example of making the menu slide from the top:

<Drawer open={open} onClose={toggleDrawer(false)} anchor="top">
  <NavList />
</Drawer>

The options for the anchor prop are top, bottom, left, and right. For more details on the Drawer component API, you can refer to the MUI Drawer documentation.

To make the menu appear friendlier on mobile devices, we can make it slide in as a full screen and tweak the drawer’s style. We’ll also add a handy “X” icon at the top right corner for users to easily close the menu, especially since clicking outside won’t work when the whole screen is covered.

import React, { useState } from "react";

import {
  Stack,
  Link,
  Toolbar,
  Typography,
  Container,
  AppBar,
  Button,
  Drawer,
  Box,
} from "@mui/material";

import MenuIcon from "@mui/icons-material/Menu";
import CloseIcon from "@mui/icons-material/Close";

const pages = [
  { name: "Products", id: "products" },
  { name: "Services", id: "services" },
  { name: "About", id: "about" },
  { name: "Testimonials", id: "testimonials" },
  { name: "Contact", id: "contact" },
];

const Nav = () => {
  const [open, setOpen] = useState(false);
  const toggleDrawer = newOpen => () => {
    setOpen(newOpen);
  };

  return (
    <>
      <Button
        variant="text"
        onClick={toggleDrawer(true)}
        sx={{ color: "white", display: { xs: "flex", sm: "none" } }}
      >
        <MenuIcon />
      </Button>
      <Drawer
        open={open}
        onClose={toggleDrawer(false)}
        anchor="right"
        sx={{
          display: { xs: "inherit", sm: "none" },
          "& .MuiDrawer-paper": {
            height: "100%",
            width: "100%",
          },
        }}
      >
        <Box
          sx={{
            display: "flex",
            justifyContent: "flex-end",
            p: 2,
          }}
        >
          <Button onClick={toggleDrawer(false)}>
            <CloseIcon />
          </Button>
        </Box>
        <NavList />
      </Drawer>
      <NavList
        sx={{
          display: { xs: "none", sm: "inherit" },
        }}
      />
    </>
  );
};

const NavList = ({ ...props }) => {
  return (
    <Stack
      overflow="auto"
      direction={{ xs: "column", sm: "row" }}
      gap={3}
      width={{ xs: "100%", sm: "initial" }}
      textAlign={{ xs: "center", sm: "initial" }}
      fontSize={{ xs: "22px", sm: "initial" }}
      {...props}
    >
      {pages.map(page => (
        <Link
          key={page.id}
          sx={{
            color: { xs: "primary", sm: "white" },
            textDecoration: "none",
          }}
        >
          {page.name}
        </Link>
      ))}
    </Stack>
  );
};

const Header = () => {
  return (
    <AppBar>
      <Container>
        <Toolbar>
          <Stack
            direction="row"
            justifyContent="space-between"
            alignItems="center"
            width="100%"
          >
            <Typography variant="h6">My App</Typography>
            <Nav />
          </Stack>
        </Toolbar>
      </Container>
    </AppBar>
  );
};
export default Header;

In the code above, we added a CloseIcon to the drawer and customized its styling to cover the entire screen using the .MuiDrawer-paper class. The NavList component was also updated to adjust the text alignment, font size, and width based on the screen size.

Summary

In this tutorial, we created a responsive navbar using React and Material UI (MUI). Initially, we designed a basic navbar with a logo and navigation links. Then, we made the navbar responsive and added a drawer for better mobile experience. The result is a dynamic and user-friendly navbar for desktop and mobile devices.

React Vertical Tabs: Complete Customization with MUI

Tabs are a commonly used layout approach to display different pieces of information on the same screen. Users can quickly switch between different content sections without leaving the current page.

Vertical tabs offer a powerful design approach for creating side menus. They are practical in layouts where you want to keep the primary navigation on the side, efficiently using horizontal space.

Here’s a preview of what the final implementation will look like:

Creating Basic Vertical Tabs

Let’s start with importing and using the necessary components from MUI:

Setting Up MUI Tabs

import React from "react";
import { Box, Tabs, Tab } from "@mui/material";

export default function VerticalTabs() {
  return (
    <Box>
      <Tabs>
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>
      <Box>Item One</Box>
      <Box>Item Two</Box>
      <Box>Item Three</Box>
    </Box>
  );
}

The Tabs component wraps each Tab component, and each Tab content is placed inside a Box component.

To make the tabs functional, we need to handle the change event and update the selected tab index:

import React from "react";
import { Box, Tabs, Tab } from "@mui/material";

export default function VerticalTabs() {
  const [value, setValue] = React.useState(0);

  return (
    <Box>
      <Tabs value={value} onChange={(_event, newValue) => setValue(newValue)}>
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </Box>
  );
}

const TabPanel = ({ children, value, index }) => {
  return value === index && <Box>{children}</Box>;
};

In the above code, we have added the value state to keep track of the selected tab index. The onChange event handler updates this state when a tab is clicked. We also created a TabPanel component to render the content conditionally based on the selected index.

Enable Vertical Tabs

To make the tabs vertical, we can pass the orientation prop to the Tabs component:

...
<Tabs
  value={value}
  onChange={(_event, newValue) => setValue(newValue)}
  orientation="vertical"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>
 ...

The current code will only change the orientation of the tabs, but the content will still be displayed below the tabs. To align the content properly, we can use the Stack component from MUI:

import React from "react";
import { Box, Stack, Tabs, Tab } from "@mui/material";

export default function VerticalTabs() {
  const [value, setValue] = React.useState(0);

  return (
    <Stack direction="row" gap={2}>
      <Tabs
        orientation="vertical"
        value={value}
        onChange={(_event, newValue) => setValue(newValue)}
      >
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </Stack>
  );
}

const TabPanel = ({ children, value, index }) => {
  return value === index && <Box>{children}</Box>;
};

Finally, to simplify creating new tabs, we can define a JSON object containing all the tabs and their contents, then loop through this object to populate the elements:

import React from "react";
import { Box, Stack, Tabs, Tab } from "@mui/material";

const tabData = [
  { label: "Item One", content: "Content for Item One" },
  { label: "Item Two", content: "Content for Item Two" },
  { label: "Item Three", content: "Content for Item Three" },
];

export default function VerticalTabs() {
  const [value, setValue] = React.useState(0);

  return (
    <Stack direction="row" gap={2}>
      <Tabs
        orientation="vertical"
        value={value}
        onChange={(_event, newValue) => setValue(newValue)}
      >
        {tabData.map((tab, index) => (
          <Tab key={index} label={tab.label} />
        ))}
      </Tabs>
      {tabData.map((tab, index) => (
        <TabPanel key={index} value={value} index={index}>
          {tab.content}
        </TabPanel>
      ))}
    </Stack>
  );
}

const TabPanel = ({ children, value, index }) => {
  return value === index && <Box>{children}</Box>;
};

Advanced Customization

In this section, we’ll transform the basic vertical tabs into a practical example showcasing their true capabilities. We aim to make the tabs look and behave like menu elements with icons and additional customizations.

Enhancing Tab Labels with Icons

First, let’s replace the tab label content with a Stack component to host the label text and an icon. Since we generate the tabs dynamically, we can include the required icons in the tabData array:

...

const tabData = [
  {
    label: 'My Projects',
    content: 'My Projects',
    icon: <ListAltOutlinedIcon />,
  },
  {
    label: 'Account Settings',
    content: 'Account Settings',
    icon: <BuildCircleOutlinedIcon />,
  },
  {
    label: 'Payment Information',
    content: 'Payment Information',
    icon: <PaymentOutlinedIcon />,
  },
];

...
// Inside the Tabs component
<Tab
  key={index}
  label={
    <Stack direction="row" alignItems="center" gap={1}>
      {tab.icon}
      <Box>
        <Typography whiteSpace="nowrap">{tab.label}</Typography>
      </Box>
    </Stack>
  }
/>

...

Styling the Tabs

Next, we can create a StyledTab component to add some aesthetic look and feel to the tabs:

import { styled } from "@mui/material/styles";
import { grey, blue } from "@mui/material/colors";
import Tab from "@mui/material/Tab";

const StyledTab = styled(Tab)(({ theme }) => ({
  alignItems: "flex-start",
  border: "1px solid",
  borderColor: grey[300],
  textTransform: "none",
  backgroundColor: grey[50],
  borderRadius: "12px",
  padding: "24px",
  transition: "all 0.2s ease-in-out",
  "& p": {
    color: grey[600],
  },
  "& svg": {
    fontSize: 30,
    color: grey[500],
  },
  "&.Mui-selected, &:hover": {
    backgroundColor: "#fff",
    boxShadow: theme.shadows[3],
    "& p": {
      color: blue[500],
    },
    "& svg": {
      color: blue[400],
    },
  },
}));

In this code:

We use the styled function from MUI to create a custom StyledTab component.
Include styles for the tab’s background, border, padding, and transitions.
The & p and & svg selectors target the text and icon inside the tab, respectively.
The &.Mui-selected, &:hover selector styles the tab when it’s selected or hovered over.

Customizing the TabPanel

Finally, we can make the TabPanel a Paper component to give it a proper section look:

import Paper from "@mui/material/Paper";

const TabPanel = ({ children, value, index }) => {
  return (
    value === index && (
      <Paper elevation={3} sx={{ p: 3, width: "60%", borderRadius: "12px" }}>
        {children}
      </Paper>
    )
  );
};

Putting It All Together

Let’s combine all the pieces and look at the final result:

import React from "react";
import {
  Box,
  Stack,
  Tabs,
  Tab,
  Typography,
  Paper,
  styled,
} from "@mui/material";
import { blue, grey } from "@mui/material/colors";
import BuildCircleOutlinedIcon from "@mui/icons-material/BuildCircleOutlined";
import ListAltOutlinedIcon from "@mui/icons-material/ListAltOutlined";
import PaymentOutlinedIcon from "@mui/icons-material/PaymentOutlined";

const tabData = [
  {
    label: "My Projects",
    content: "My Projects",
    icon: <ListAltOutlinedIcon />,
  },
  {
    label: "Account Settings",
    content: "Account Settings",
    icon: <BuildCircleOutlinedIcon />,
  },
  {
    label: "Payment Information",
    content: "Payment Information",
    icon: <PaymentOutlinedIcon />,
  },
];

export default function CustomThemeTextField() {
  const [value, setValue] = React.useState(0);

  return (
    <Stack direction="row" gap={2} height="265px">
      <Tabs
        orientation="vertical"
        indicatorColor="white"
        value={value}
        onChange={(_event, newValue) => setValue(newValue)}
        sx={{
          "& .MuiTabs-flexContainer": {
            gap: 1,
          },
        }}
      >
        {tabData.map((tab, index) => (
          <StyledTab
            key={index}
            label={
              <Stack direction="row" alignItems="center" gap={1}>
                {tab.icon}
                <Box>
                  <Typography whiteSpace="nowrap">{tab.label}</Typography>
                </Box>
              </Stack>
            }
          />
        ))}
      </Tabs>
      {tabData.map((tab, index) => (
        <TabPanel key={index} value={value} index={index}>
          {tab.content}
        </TabPanel>
      ))}
    </Stack>
  );
}

const StyledTab = styled(Tab)(({ theme }) => ({
  alignItems: "flex-start",
  border: "1px solid",
  borderColor: grey[300],
  textTransform: "none",
  backgroundColor: grey[50],
  borderRadius: "12px",
  padding: "24px",
  transition: "all 0.2s ease-in-out",
  "& p": {
    color: grey[600],
  },
  "& svg": {
    fontSize: 30,
    color: grey[500],
  },
  "&.Mui-selected, &:hover": {
    backgroundColor: "#fff",
    boxShadow: theme.shadows[3],
    "& p": {
      color: blue[500],
    },
    "& svg": {
      color: blue[400],
    },
  },
}));

const TabPanel = ({ children, value, index }) => {
  return (
    value === index && (
      <Paper elevation={3} sx={{ p: 3, width: "60%", borderRadius: "12px" }}>
        {children}
      </Paper>
    )
  );
};

Summary

In this tutorial, we learned how to create vertical tabs in React using MUI. We started with the basic implementation of vertical tabs and then enhanced them with icons, custom styles, and additional features. By leveraging MUI’s powerful components and styling options, we created a practical and visually appealing vertical tabs layout.

Bye for now 👋

How to Create a Sticky Header & Column in React

In the modern digital era, where data is growing faster than ever, efficiently handling and displaying complex tabular data becomes crucial for the UI. Whether it’s financial reports, inventory management, or extensive datasets for machine learning, the ability to scroll through large amounts of data without losing context is essential. This is where the concept of sticky headers and columns comes into play, providing a fixed point of reference that enhances readability and user experience.

In this tutorial, we will build a React component that features a table with sticky headers and columns. This means that the header row and specific columns will remain visible on the screen even as we scroll vertically or horizontally through our dataset.

Creating a Scrollable Table in React

To start, we’ll build a basic scrollable table in React that displays student information. This table will dynamically populate rows based on a dataset and be styled to support both vertical and horizontal scrolling. Let’s break down the steps and write the necessary code.

Step 1: Creating a Basic Table Component

import "./App.css";

const students = [
 {
  id: 1,
  name: "John Doe",
  age: 20,
  course: "Business",
  grade: "A",
  attendance: "Present",
  status: "Active",
  remarks: "Good",
 },
 {
  id: 2,
  name: "Jane Smith",
  age: 22,
  course: "Engineering",
  grade: "B",
  attendance: "Absent",
  status: "Inactive",
  remarks: "Average",
 },
 {
  id: 3,
  name: "Alice Johnson",
  age: 21,
  course: "Medicine",
  grade: "A+",
  attendance: "Present",
  status: "Active",
  remarks: "Excellent",
 },
 {
  id: 4,
  name: "Bob Brown",
  age: 23,
  course: "Computer Science",
  grade: "C",
  attendance: "Present",
  status: "Active",
  remarks: "Fair",
 },
 {
  id: 5,
  name: "Eve Wilson",
  age: 24,
  course: "Arts",
  grade: "B+",
  attendance: "Absent",
  status: "Inactive",
  remarks: "Good",
 },
 {
  id: 6,
  name: "David Lee",
  age: 25,
  course: "Law",
  grade: "A-",
  attendance: "Present",
  status: "Active",
  remarks: "Very Good",
 },
 {
  id: 7,
  name: "Grace Clark",
  age: 26,
  course: "Science",
  grade: "D",
  attendance: "Absent",
  status: "Inactive",
  remarks: "Poor",
 },
];

const TableComponent = () => {
 return (
  <table>
   <thead>
    <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Age</th>
     <th>Course</th>
     <th>Grade</th>
     <th>Attendance</th>
     <th>Status</th>
     <th>Remarks</th>
    </tr>
   </thead>
   <tbody>
    {students.map(student => (
     <tr key={student.id}>
      <td>{student.id}</td>
      <td>{student.name}</td>
      <td>{student.age}</td>
      <td>{student.course}</td>
      <td>{student.grade}</td>
      <td>{student.attendance}</td>
      <td>{student.status}</td>
      <td>{student.remarks}</td>
     </tr>
    ))}
   </tbody>
  </table>
 );
};

export default TableComponent;

In this code:

We define a simple array of objects containing student data.
TableComponent outputs a table where we use .map() to create a row for each student.

Let’s add some styling to make the table visually appealing:

table {
 width: 100%;
 border-collapse: collapse;
}

th,
td {
 padding: 8px;
 text-align: left;
 border-bottom: 1px solid #ddd;
}

thead th {
 background-color: #f2f2f2;
}

tr:nth-child(even) {
 background-color: #f2f2f2;
}

Step 2: Enabling Scrolling

Since the <table> element itself does not support scrolling, we need to wrap the table in a div container that handles overflow.

<div className="table-container">
 <table>{/* Table content */}</table>
</div>

.table-container {
 max-height: 200px;
 max-width: 500px;
 overflow: auto;
 border: 1px solid #ddd;
}

th,
td {
 ...
 white-space: nowrap;
}

In this code:

We wrap TableComponent inside a <div> with a style that sets a maximum height and width and enables scrolling (overflow: auto), allowing the table to scroll vertically and horizontally when the content exceeds the specified dimensions.
We set white-space: nowrap on th and td elements to prevent text wrapping on smaller screens.
We are adding a border around the scrolling div instead of the table to make the scrollbar appear as part of the table.

Here is the basic scrollable table in action:

With the basic scrollable table set up, we can work on the sticky headers by keeping them visible at the top of a table even when the user scrolls down through a long list.

Using CSS position: sticky

The CSS position: sticky is a powerful feature that toggles between relative and fixed positioning based on the scroll position. It sticks to the top of the scrollable area when content scrolls under it, and it is supported in most modern browsers.

To make the table header sticky, we need to add specific styles to the <thead> element’s cells.

thead th {
 background-color: #f2f2f2;
 position: sticky;
 top: 0;
 z-index: 1;
}

In this code:

We set the position of the <th> elements inside the <thead> to sticky.
The top: 0 property ensures that the header sticks to the top of the scrollable area.
The z-index: 1 property ensures the header remains above the table content.

Implementing a Sticky Column

As sticky headers provide a constant visual reference for the data rows, sticky columns are equally beneficial when navigating through wide tables requiring horizontal scrolling.

Implementing sticky columns involves a similar approach to sticky headers but targets horizontal positioning.

Let’s modify the existing styles to include sticky columns. We’ll start with making the first column sticky:

th:first-child,
td:first-child {
 position: sticky;
 left: 0;
 z-index: 2;
 background-color: #f2f2f2;
}

th:first-child {
 z-index: 3;
}

In this code:

We target the first <th> and <td> elements in the table.
We set the position of the first column to sticky.
The left: 0 property ensures that the first column sticks to the left side of the scrollable area.
The z-index property ensures that the first column remains above the header row.

To make multiple columns sticky, we can adjust the left value of each subsequent column, accounting for the width of the preceding columns. This requires calculating or setting fixed widths for these columns:

th:first-child,
td:first-child {
 position: sticky;
 left: 0;
 z-index: 2;
 background-color: #f2f2f2;
}

th:nth-child(2),
td:nth-child(2) {
 position: sticky;
 left: 32px; /* Adjust based on the width of the first column */
 z-index: 2;
 background-color: #f2f2f2;
}

th:first-child,
th:nth-child(2) {
 z-index: 3;
}

/* Repeat for additional columns */

Below is the complete code with a live demo:

import "./App.css";

const students = [
 {
  id: 1,
  name: "John Doe",
  age: 20,
  course: "Business",
  grade: "A",
  attendance: "Present",
  status: "Active",
  remarks: "Good",
 },
 {
  id: 2,
  name: "Jane Smith",
  age: 22,
  course: "Engineering",
  grade: "B",
  attendance: "Absent",
  status: "Inactive",
  remarks: "Average",
 },
 {
  id: 3,
  name: "Alice Johnson",
  age: 21,
  course: "Medicine",
  grade: "A+",
  attendance: "Present",
  status: "Active",
  remarks: "Excellent",
 },
 {
  id: 4,
  name: "Bob Brown",
  age: 23,
  course: "Computer Science",
  grade: "C",
  attendance: "Present",
  status: "Active",
  remarks: "Fair",
 },
 {
  id: 5,
  name: "Eve Wilson",
  age: 24,
  course: "Arts",
  grade: "B+",
  attendance: "Absent",
  status: "Inactive",
  remarks: "Good",
 },
 {
  id: 6,
  name: "David Lee",
  age: 25,
  course: "Law",
  grade: "A-",
  attendance: "Present",
  status: "Active",
  remarks: "Very Good",
 },
 {
  id: 7,
  name: "Grace Clark",
  age: 26,
  course: "Science",
  grade: "D",
  attendance: "Absent",
  status: "Inactive",
  remarks: "Poor",
 },
];

const TableComponent = () => {
 return (
  <div className="table-container">
   <table>
    <thead>
     <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Course</th>
      <th>Grade</th>
      <th>Attendance</th>
      <th>Status</th>
      <th>Remarks</th>
     </tr>
    </thead>
    <tbody>
     {students.map(student => (
      <tr key={student.id}>
       <td>{student.id}</td>
       <td>{student.name}</td>
       <td>{student.age}</td>
       <td>{student.course}</td>
       <td>{student.grade}</td>
       <td>{student.attendance}</td>
       <td>{student.status}</td>
       <td>{student.remarks}</td>
      </tr>
     ))}
    </tbody>
   </table>
  </div>
 );
};

export default TableComponent;

.table-container {
 max-height: 200px;
 max-width: 500px;
 overflow: auto;
 border: 1px solid #ddd;
}

table {
 width: 100%;
 border-collapse: collapse;
 font-family: Arial, sans-serif;
}

th,
td {
 padding: 8px;
 text-align: left;
 border-bottom: 1px solid #ddd;
 white-space: nowrap;
}

thead th {
 background-color: #f2f2f2;
 position: sticky;
 top: 0;
 z-index: 1;
}

tr:nth-child(even) {
 background-color: #f2f2f2;
}

th:first-child,
td:first-child {
 position: sticky;
 left: 0;
 z-index: 2;
 background-color: #f2f2f2;
}

th:nth-child(2),
td:nth-child(2) {
 position: sticky;
 left: 32px; /* Adjust based on the width of the first column */
 z-index: 2;
 background-color: #f2f2f2;
}

th:first-child,
th:nth-child(2) {
 z-index: 3;
}

/* Repeat for additional columns */

Conclusion

In this tutorial, we learned how to create a scrollable table with sticky headers and columns in React. By combining CSS position: sticky with specific z-index values, we achieved a fixed header and column effect that enhances the user experience when navigating through large datasets.

Bye for now, and happy coding!

MUI Grid: Building Web Layouts Responsively

MUI Grid is an essential component for creating flexible and responsive layouts. The core mechanism of the Grid component is based on the 12-column grid system, which allows developers to create complex layouts that adapt to different screen sizes.

Throughout this tutorial, we’ll explore the fundamentals of the MUI Grid component and learn how to construct a simple and more complex responsive page layout.

Understanding the 12-Grid System

The choice of 12 as the base number for this grid system isn’t arbitrary. It’s selected for its high divisibility, allowing for a wide range of layout patterns that can quickly adapt to different screen sizes.

It’s important to clarify that when we refer to the 12-grid system, we’re not talking about a literal measurement in units of 12, 11, 10, etc. Instead, it’s a method of dividing the screen into column blocks, facilitating the arrangement and sizing of layout elements.

12 Grids Equal 100%: The entire screen width is considered as 100%, represented by 12 grids, allowing for a straightforward calculation of percentage widths.

Dividing the Grid: Divisions of the 12 grids provide flexibility in responsive layout design. For instance:

6 grids represent 50% of the screen width.
4 grids are equivalent to one-third (approximately 33.33%).
3 grids equate to one-quarter (25%).

Basic Usage of MUI Grid

The Grid component leverages CSS Flexbox to create layouts at its core, automatically treating its children as flex items. It simplifies the process of creating responsive designs, abstracting much of the complexity behind intuitive props.

Here’s a basic example of creating a layout with a sidenav that takes up 3 out of 12 columns and a body content section that occupies the remaining 9 columns. This setup uses the xs breakpoint to apply the same layout across all screen sizes.

import React from "react";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";

const SimpleLayout = () => {
  return (
    <Grid container spacing={2}>
      <Grid item xs={3}>
        <Paper sx={{ p: 2 }}>
          {/* Left nav content goes here */}
          Side Nav
        </Paper>
      </Grid>
      <Grid item xs={9}>
        <Paper sx={{ p: 2 }}>
          {/* Body content goes here */}
          Body Content
        </Paper>
      </Grid>
    </Grid>
  );
};

export default SimpleLayout;

In this example, the container prop on the first <Grid> element sets it up as a flex container, spanning the entire width of its parent by default (100%, or 12 grids). Each child <Grid item> specifies how many of those 12 columns it should span using the xs prop. Additionally, the spacing prop adds space between the grid items.

Below is an example to understand how to achieve the equivalent outcome using CSS flex properties.

import React from "react";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";

const SimpleLayoutWithBox = () => {
  return (
    <Box display="flex" width="100%" gap={2}>
      <Box width="25%" flexShrink={0}>
        <Paper sx={{ p: 2 }}>Side Nav</Paper>
      </Box>
      <Box width="75%">
        <Paper sx={{ p: 2 }}>Body Content</Paper>
      </Box>
    </Box>
  );
};

export default SimpleLayoutWithBox;

In this Box-based layout, we manually set the display to flex for the container and define the width of each child. This requires additional props such as flexShrink to prevent the left nav from shrinking on smaller screens, mimicking the behavior of Grid’s xs prop.

Basic Responsive Layout

The Grid component is equipped with a built-in responsive breakpoint system, allowing us to define layouts that easily adapt to different viewport sizes.

xs: Extra-small devices (portrait phones)
sm: Small devices (landscape phones)
md: Medium devices (tablets)
lg: Large devices (desktops)
xl: Extra-large devices (large desktops)

Specifying a breakpoint on a Grid item means the layout will apply for that breakpoint and all larger screens unless overridden by a larger breakpoint.

Let’s enhance our previous example by adjusting the size of the side nav and main content based on the screen size.

import React from "react";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";

const ResponsiveLayout = () => {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={4} md={3} lg={2}>
        <Paper sx={{ p: 2 }}>Side Nav</Paper>
      </Grid>

      <Grid item xs={12} sm={8} md={9} lg={10}>
        <Paper sx={{ p: 2 }}>Main Content</Paper>
      </Grid>
    </Grid>
  );
};

export default ResponsiveLayout;

In this code example:

The side nav starts as a full-width block on extra-small devices (xs={12}) and gradually decreases in width relative to the screen size, moving to 4/12 on small screens (sm={4}), 3/12 on medium screens (md={3}), and 2/12 on large screens (lg={2}).
Conversely, the main content area increases its share of the available screen width as the device size increases.

This responsive design ensures that on smaller screens, the left nav and main content stack on top of each other for optimal space and readability.

In the live example above, we can use the resize handle in the bottom right corner to see how the layout changes based on the screen size.

Creating Responsive Cards

Displaying content within cards is a widely used design pattern, ideal for showcasing posts, images, products, and more.

We’ll begin by creating a Container with a maxWidth of “lg” to constrain the width on larger screens, ensuring our card layout remains aesthetically pleasing without stretching too wide on larger monitors. For a deeper understanding of the Container component, refer to this detailed tutorial.

<Container maxWidth="lg">{/* Cards go here */}</Container>

Next, we’ll populate this container with a responsive grid of cards. Each card will be wrapped in a Grid item component that specifies the number of columns it should span on different screen sizes.

<Grid item key={index} xs={12} sm={6} md={4} lg={3}>
  <Card>{/* Card content goes here */}</Card>
</Grid>

Large screens (lg): 3 columns (12/3 = 4 cards per row)
Medium screens (md): 4 columns (12/4 = 3 cards per row)
Small screens (sm): 6 columns (12/6 = 2 cards per row)
Extra-small screens (xs): Full width (1 card per row)

Finally, we’ll create a list of cards by mapping over an array of card data. Each card will contain a CardMedia component for images, a CardContent component for text content, and Typography components for titles and descriptions.

import React from "react";
import {
  Container,
  Grid,
  Card,
  CardMedia,
  CardContent,
  Typography,
} from "@mui/material";

const CardList = () => {
  return (
    <Container maxWidth="lg">
      <Grid container spacing={2}>
        {[1, 2, 3, 4, 5, 6].map((card, index) => (
          <Grid item key={index} xs={12} sm={6} md={4} lg={3}>
            <Card>
              <CardMedia
                component="img"
                height="140"
                image="https://via.placeholder.com/200"
                alt={`Card ${index + 1}`}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  Card Title {index + 1}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  This is a media card. You can use this section to describe the
                  content.
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Container>
  );
};

export default CardList;

In this example, if we resize the preview window, we can see how the number of cards per row changes based on the screen size.

Creating a Page Layout

Creating a comprehensive page layout involves integrating various components and responsive design techniques we discussed earlier. Let’s break it down and highlight the new additions.

Main Structure

The page component is divided into four main sections: header, sidenav, main content, and footer. Each section is wrapped in a Grid item component that specifies the number of columns it should span on different screen sizes.

import React from "react";
import { Container, Grid, Typography, Paper } from "@mui/material";

const PageLayout = () => {
  return (
    <Container maxWidth="lg">
      <Grid container spacing={3}>
        {/* Header */}
        <Grid item xs={12}>
          <Paper sx={{ p: 2, textAlign: "center" }}>
            <Typography variant="h4">Page Header</Typography>
          </Paper>
        </Grid>
        {/* sidenav */}
        <Grid item xs={12} sm={4} md={3} lg={2}>
          <Paper sx={{ p: 2 }}>Side Nav</Paper>
        </Grid>
        {/* Main Content */}
        <Grid item xs={12} sm={8} md={9} lg={10}>
          <Paper sx={{ p: 2 }}>Main Content</Paper>
        </Grid>
        {/* Footer */}
        <Grid item xs={12}>
          <Paper sx={{ p: 2, textAlign: "center" }}>
            <Typography variant="body1">Page Footer</Typography>
          </Paper>
        </Grid>
      </Grid>
    </Container>
  );
};

export default PageLayout;

The logic behind the layout is similar to the responsive layout example we discussed earlier. The header and footer sections span the full width of the screen, while the sidenav and main content sections adjust their width based on the screen size.

Sidenav

The sidenav will mock a list of filters users can select to filter the cards in the main content. We will populate the sidenav with a List component containing ListItem for each filter. To save space, the layout will switch to a Select dropdown on smaller screens.

const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
const filters = ["Filter 1", "Filter 2", "Filter 3"];

return (
  <Grid item xs={12} sm={4} md={3} lg={2}>
    <Paper sx={{ p: 2 }}>
      {isSmallScreen ? (
        <FormControl fullWidth>
          <Select value={selectedFilter} onChange={handleFilterChange}>
            {filters.map((filter, index) => (
              <MenuItem key={index} value={filter}>
                {filter}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      ) : (
        <List>
          {filters.map((filter, index) => (
            <ListItem button key={index}>
              <ListItemText primary={filter} />
            </ListItem>
          ))}
        </List>
      )}
    </Paper>
  </Grid>
);

In this example, we use the useTheme and useMediaQuery hooks to determine the screen size. We render a Select dropdown if the screen is small (down to 600px). Otherwise, we display List.

Complete Page Layout

Finally, let’s create the PageLayout component, which integrates the header, sidenav, main content (the cards we created earlier part), and footer sections into a cohesive layout.

import React from "react";
import {
  Container,
  Grid,
  Paper,
  Typography,
  List,
  ListItem,
  ListItemText,
  FormControl,
  Select,
  MenuItem,
  Card,
  CardContent,
  CardMedia,
  useTheme,
  useMediaQuery,
} from "@mui/material";

function PageLayout() {
  const theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));

  const filters = ["Filter 1", "Filter 2", "Filter 3"];

  return (
    <Container maxWidth="lg">
      <Grid container spacing={3}>
        {/* Header */}
        <Grid item xs={12}>
          <Paper sx={{ p: 2, textAlign: "center" }}>
            <Typography variant="h4">Page Header</Typography>
          </Paper>
        </Grid>
        {/* Sidebar */}
        <Grid item xs={12} sm={4} md={3} lg={2}>
          <Paper sx={{ p: 2 }}>
            {isSmallScreen ? (
              <FormControl fullWidth>
                <Select>
                  {filters.map((filter, index) => (
                    <MenuItem key={index} value={filter}>
                      {filter}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            ) : (
              <List>
                {filters.map((filter, index) => (
                  <ListItem button key={index}>
                    <ListItemText primary={filter} />
                  </ListItem>
                ))}
              </List>
            )}
          </Paper>
        </Grid>
        {/* Main Content */}
        <Grid item xs={12} sm={8} md={9} lg={10} container spacing={2}>
          {[1, 2, 3, 4].map((card, index) => (
            <Grid item key={index} xs={12} sm={6} md={4} lg={3}>
              <Card>
                <CardMedia
                  component="img"
                  height="140"
                  image="https://via.placeholder.com/200"
                  alt="placeholder"
                />
                <CardContent>
                  <Typography gutterBottom variant="h5" component="div">
                    Card Title {index + 1}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    This is a media card. You can use this section to describe
                    the content.
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
        {/* Footer */}
        <Grid item xs={12}>
          <Paper sx={{ p: 2, textAlign: "center" }}>
            <Typography variant="body1">Page Footer</Typography>
          </Paper>
        </Grid>
      </Grid>
    </Container>
  );
}

export default PageLayout;

We can see how the layout adapts to different screen sizes when adjusting the screen size. The sidenav switches from a list to a dropdown on smaller screens, and the number of cards per row changes based on the screen size.

Summary

The MUI Grid component is a powerful way for creating responsive layouts in React applications. By leveraging the 12-column grid system and responsive breakpoints, we can easily design flexible, user-friendly interfaces that adapt to various screen sizes.

Bye for now and happy coding!

How to Create a Responsive Table with React

In web development, tables are a core element for displaying tabular data, integral to numerous projects and applications. However, traditional HTML tables don’t automatically adjust to different screen sizes, which could cause usability issues in mobile and tablet environments.

This tutorial will cover two practical approaches to creating a responsive table in React applications.

Table Scroll: This approach involves adding horizontal scrolling to tables on smaller screens.
Altering Table Layout: This method includes hiding the table header and rearranging the table cells so that headers and cells are displayed vertically in each row.

Creating a Basic Table

Before we dive into making our table responsive, let’s begin by constructing a bare table in React. We will create a table to display a list of student records. Each record will include the following information:

Student ID
Name
Date of Birth
Major

Step 1: Define the Data

First, we need to define our data. We’ll create an array of student records that we’ll use to populate the table. Each record will be an object with properties corresponding to the table’s columns.

const students = [
  {
    id: 1,
    name: "Alice Johnson",
    dob: "2001-04-15",
    major: "Computer Science",
  },
  { id: 2, name: "Bob Smith", dob: "2000-09-08", major: "Mathematics" },
  { id: 3, name: "Carol Williams", dob: "1999-02-23", major: "Physics" },
  // Add more student records as needed
];

Step 2: Build the Table Component

Next, let’s create a table component that loops through this data and displays each student’s details in a row.

const StudentTable = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Date of Birth</th>
          <th>Major</th>
        </tr>
      </thead>
      <tbody>
        {students.map(student => (
          <tr key={student.id}>
            <td>{student.id}</td>
            <td>{student.name}</td>
            <td>{student.dob}</td>
            <td>{student.major}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Step 3: Styling the Table

To ensure our table is functional and visually appealing, we’ll add some basic CSS styling. This will include setting a font family, adding borders to the table and rows, alternating the background color of rows for better readability, and ensuring proper padding for text.

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
}

tr {
  border-bottom: 1px solid #ccc;
}

th,
td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

In this basic example, if we try to resize the window using the resize handle in the bottom right corner, the table doesn’t adjust to the smaller screen size.

Creating a Responsive Scroll Table

When it comes to enhancing a responsive table on smaller screens, implementing a horizontal scroll is a straightforward and effective solution. This approach maintains the layout’s consistency and allows users to view all columns by scrolling horizontally. Let’s go through the steps to create a scrollable table container.

Step 1: Add a Scrollable Container

First, we need to wrap our table with a container because the table element itself cannot be made scrollable directly. We create a “ghost” container around the table to enable scrolling.

const ScrollableTableContainer = () => {
  return (
    <div className="table-container">
      <StudentTable />
    </div>
  );
};

Step 2: CSS for Horizontal Scrolling

Next, we’ll add CSS to trigger a horizontal scrollbar when the table exceeds the viewport’s width. We do this by setting the overflow-x property to auto.

... 

.table-container {
  overflow-x: auto;
}

Step 3: Prevent Text Wrapping

Finally, to prevent the text within each table cell from wrapping and ensure a consistent layout as the user scrolls horizontally, we’ll set white-space: nowrap on the table cells.

... 

th,
td {
  white-space: nowrap;
}

Here is the complete code for the scrollable table container:

.table-container {
  overflow-x: auto;
}

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
}
tr {
  border-bottom: 1px solid #ccc;
}
th,
td {
  text-align: left;
  padding: 8px;
  white-space: nowrap;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

import "./App.css";

const students = [
  {
    id: 1,
    name: "Alice Johnson",
    dob: "2001-04-15",
    major: "Computer Science",
  },
  { id: 2, name: "Bob Smith", dob: "2000-09-08", major: "Mathematics" },
  { id: 3, name: "Carol Williams", dob: "1999-02-23", major: "Physics" },
  // Add more student records as needed
];

const StudentTable = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Date of Birth</th>
          <th>Major</th>
        </tr>
      </thead>
      <tbody>
        {students.map(student => (
          <tr key={student.id}>
            <td>{student.id}</td>
            <td>{student.name}</td>
            <td>{student.dob}</td>
            <td>{student.major}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const ScrollableTableContainer = () => {
  return (
    <div className="table-container">
      <StudentTable />
    </div>
  );
};

export default function App() {
  return <ScrollableTableContainer />;
}

Altering Table Layout

We can alter the table’s layout for a more mobile-friendly design that eliminates the need for horizontal scrolling. This approach involves hiding the table headers and changing the data cells of each row to stack vertically instead of horizontally. Let’s go through the necessary steps to achieve this:

Step 1: Hide Table Headers on Small Screens

First, we’ll use a CSS media query to hide the table headers when the screen size is at or below a certain width, typically that of a small tablet or a mobile phone.

...

@media screen and (max-width: 600px) {
  th {
    display: none;
  }
}

Step 2: Change Data Cell Display on Small Screens

Next, we need to adjust the display of the table cells (td) in the table body. On smaller screens, we’ll change their display from table-cell to flex. This change allows the data to stack on top of each other within each row, making it more readable on mobile devices.

...

@media screen and (max-width: 600px) {
  ...

  td {
    display: flex;
  }
}

Step 3: Add Header Names to Each Cell

Since we removed the main table headers, we’ll add a label to each cell indicating what data it represents. These labels will only be visible on small screens and act as a substitute for the table headers. Also, the styling should be updated to make the labels and data more distinguishable.

const StudentTableResponsive = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Date of Birth</th>
          <th>Major</th>
        </tr>
      </thead>
      <tbody>
        {students.map(student => (
          <tr key={student.id}>
            <td>
              <span className="cell-header">Student ID:</span> {student.id}
            </td>
            <td>
              <span className="cell-header">Name:</span> {student.name}
            </td>
            <td>
              <span className="cell-header">Date of Birth:</span> {student.dob}
            </td>
            <td>
              <span className="cell-header">Major:</span> {student.major}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

... 

.cell-header {
  display: none;
}

@media screen and (max-width: 600px) {
  ... 
  
  .cell-header {
    display: block;
    font-weight: bold;
  }
  td {
    display: flex;
    justify-content: space-between;
  }
}

Here is the complete code for the responsive table layout:

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
}
tr {
  border-bottom: 1px solid #ccc;
}
th,
td {
  text-align: left;
  padding: 8px;
  white-space: nowrap;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

.cell-header {
  display: none;
}

@media screen and (max-width: 600px) {
  th {
    display: none;
  }
  .cell-header {
    display: block;
    font-weight: bold;
  }
  td {
    display: flex;
    justify-content: space-between;
  }
}

import './App.css';

const students = [
  {
    id: 1,
    name: 'Alice Johnson',
    dob: '2001-04-15',
    major: 'Computer Science',
  },
  { id: 2, name: 'Bob Smith', dob: '2000-09-08', major: 'Mathematics' },
  { id: 3, name: 'Carol Williams', dob: '1999-02-23', major: 'Physics' },
  // Add more student records as needed
];

const StudentTableResponsive = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Date of Birth</th>
          <th>Major</th>
        </tr>
      </thead>
      <tbody>
        {students.map((student) => (
          <tr key={student.id}>
            <td>
              <span className="cell-header">Student ID:</span> {student.id}
            </td>
            <td>
              <span className="cell-header">Name:</span> {student.name}
            </td>
            <td>
              <span className="cell-header">Date of Birth:</span> {student.dob}
            </td>
            <td>
              <span className="cell-header">Major:</span> {student.major}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default function App() {
  return <StudentTableResponsive />;
}

With these steps, we now have a responsive table layout that is significantly more user-friendly for mobile viewers. If we resize the window using the resize handle in the bottom right corner, we can see that the table layout changes to a more mobile-friendly format when the screen size is reduced.

Summary & Complete Code

In this tutorial, we reviewed some essential techniques for creating a responsive table in React. We explored two practical approaches: implementing a scrollable table for smaller screens and altering the table layout for enhanced mobile friendliness. These strategies not only maintain data accessibility but also improve user experience across various devices.

Here is the complete code example on StackBlitz:

Bye for now 👋

MUI Stack: A Comprehensive Guide to the Material UI Stack Layout Component

The MUI Stack component is a powerful tool for creating flexible layouts in a Material UI project. The Stack simplifies arranging items in a one-dimensional layout by leveraging the core CSS flexbox properties and integrating them as props.

MUI Stack differs from the Grid component, designed for two-dimensional layouts. The Stack component is ideal for creating one-dimensional layouts, such as lists, navigation menus, and forms.

This tutorial will guide us through using and customizing the MUI Stack component. We will learn how to create flexible and responsive layouts, arrange items, and apply styling to the Stack component.

Arranging Items

The MUI Stack component leverages several core CSS flexbox properties, making them accessible as props. This functionality simplifies the task of arranging items either horizontally or vertically. Let’s explore these properties:

Direction

The direction prop determines the orientation of the Stack. By default, the direction is set to column, which arranges items vertically. To arrange items horizontally, we can set the direction to row.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function RowStack() {
  return (
    <Stack direction="row">
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Justify Content

The justifyContent prop aligns items along the main-axis. When the direction is set to column, the main-axis is the y-axis, and when the direction is set to row, the main-axis is the x-axis. The justifyContent prop accepts the following values:

flex-start: Items are aligned to the start of the main-axis.
center: Items are centered along the main-axis.
flex-end: Items are aligned to the end of the main-axis.
space-between: Items are evenly distributed along the main-axis.
space-around: Items are evenly distributed along the main-axis, with equal space around them.
space-evenly: Items are evenly distributed along the main-axis, with equal space around them and at the start and end.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function JustifyContentStack() {
  return (
    <Stack direction="row" justifyContent="space-between">
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Align Items

The alignItems prop aligns items along the cross-axis. When the direction is set to column, the cross-axis is the x-axis, and when the direction is set to row, the cross-axis is the y-axis. The alignItems prop accepts the following values:

Flex-start: Items are aligned to the start of the cross-axis.
center: Items are centered along the cross-axis.
Flex-end: Items are aligned to the end of the cross-axis.
stretch: Items are stretched to fill the container along the cross-axis.
baseline: Items are aligned such that their baselines align.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function AlignItemsStack() {
  return (
    <Stack
      direction="row"
      alignItems="center"
      sx={{ height: "100px", border: "1px solid" }}
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Gap

The gap prop sets the space between items in the Stack. This prop accepts a numeric value multiplied by the theme’s spacing unit. For example, the value 1 corresponds to 8px.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function GapStack() {
  return (
    <Stack direction="row" gap={2}>
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Styling and Customization

The MUI Stack component supports all system properties and provides various styling and customization options to create visually appealing layouts.

Using Props for Styling

We can use different props provided by MUI to style the Stack component directly. These props offer a straightforward way to apply common styles.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function StyledStack() {
  return (
    <Stack
      direction="row"
      justifyContent="center"
      alignItems="center"
      p={2}
      gap={2}
      height="200px"
      bgcolor="primary.main"
      color="primary.contrastText"
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Using `sx` for Advanced Styling

The sx prop is a powerful feature in MUI that allows for more advanced customization. It’s a superset of CSS, providing more control over the styling.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function AdvancedStyledStack() {
  return (
    <Stack
      direction="row"
      justifyContent="center"
      alignItems="center"
      gap={2}
      sx={{
        bgcolor: "primary.main",
        color: "primary.contrastText",
        borderRadius: 4,
        p: 2,
        "& > *": {
          bgcolor: "secondary.main",
          color: "secondary.contrastText",
          p: 2,
          borderRadius: 4,
        },
      }}
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

In this example, we used the sx prop to define styles for the Stack and its children (using the & > * selector).

Responsive Layouts

The MUI Stack component is designed to create responsive layouts that adapt to different screen sizes. We can use the sx prop to define responsive styles based on breakpoints.

Let’s take the previous example and change the layout direction depending on the screen size:

...

function ResponsiveStack() {
  return (
    <Stack
      direction={{ xs: 'column', sm: 'row' }}
      ...
      }}
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

The above example is an interactive demo. When resizing the window from the bottom right corner, the Stack layout changes from vertical to horizontal based on the screen size. The direction prop is set to column for extra-small (xs) screens and row for small (sm) and larger screens.

Conclusion

Using the MUI Stack component is an effective way to create and arrange elements efficiently. It has a specific opinionated use case, so it’s an excellent tool for creating one-dimensional layouts. In this tutorial, we learned how to use the core properties of the Stack component, apply styling, and create responsive layouts.

Bye for now 👋

How to Use and Customize MUI Box

The MUI Box component is a fundamental building block in the Material UI library, designed to serve as a generic container element. Unlike the Container component, which is tailored for specific layout purposes with predefined styling options, the Box component offers a more flexible approach.

In this tutorial, we’ll explore the Box component in detail, covering its usage, customization, and best practices. We’ll also discuss how to leverage the component to create custom layout components and reusable design patterns.

Customization

The versatility of the MUI Box component allows it to be used in various contexts, mirroring the functionality of standard HTML elements like div, section, and article.

Changing the Element

By default, the Box component renders as a div element. However, we can easily change this using the component prop. This flexibility allows it to function as any HTML element we need, accommodating various semantic or accessibility requirements.

import Box from "@mui/material/Box";

function SemanticallyCorrectComponent() {
  return <Box component="article">This Box is now an article element.</Box>;
}

In this example, we’ve changed the component to render as an article element. This is particularly useful when working with HTML5 semantics or improving accessibility.

Using System Properties

The Box component leverages the MUI system properties, enabling direct styling through props. This approach simplifies the process of applying responsive styles and adheres to the Material UI theme for consistency across the application.

import Box from "@mui/material/Box";

function StyledBox() {
  return (
    <Box p={2} bgcolor="primary.dark" display="flex" color="white">
      System properties for padding, background color, and display.
    </Box>
  );
}

In this example, we’ve used the p, bgcolor, and display props to apply padding, set the background color, and define the display property, respectively. This demonstrates the power of system properties, allowing us to apply styles directly without needing additional CSS.

Using `sx` for Styling

The sx prop is a powerful feature that acts as a superset of CSS, offering full customization capabilities. It supports all CSS properties, including custom values from the theme, allowing for intricate styling directly on the component.

import Box from "@mui/material/Box";

function CustomStyledBox() {
  return (
    <Box
      sx={{
        width: 200,
        height: 200,
        bgcolor: "primary.dark",
        "&:hover": {
          bgcolor: "primary.main",
        },
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        color: "white",
      }}
    >
      Hover over me!
    </Box>
  );
}

This example showcases the sx prop’s ability to directly apply a custom width, height, background color, hover effect, and flexbox layout.

Using Theme within `sx`

We can access the theme’s color palette and styling tokens within the sx prop to ensure our custom styles are consistent with the overall design system.

import Box from "@mui/material/Box";
import { useTheme } from "@mui/material/styles";

function ThemeStyledBox() {
  const theme = useTheme();
  return (
    <Box
      sx={{
        bgcolor: theme.palette.success.main,
        color: theme.palette.success.contrastText,
        p: 2,
      }}
    >
      This box uses theme colors and spacing.
    </Box>
  );
}

In this example, we’ve used the primary.dark and primary.main values from the theme’s color palette to define the background color and hover effect, ensuring consistency with the application’s design system.

Using Class and CSS

While leveraging MUI’s system and sx prop offers a simple styling approach, traditional CSS classes and stylesheets remain viable, especially for complex or reusable styles.

/* CustomStyle.css */
.customBox {
  padding: 16px;
  background-color: #f0f0f0;
}

// CustomStyledBox.jsx
import React from "react";
import Box from "@mui/material/Box";
import "./CustomStyle.css";

function CustomStyledBox() {
  return <Box className="customBox">This Box uses custom CSS classes.</Box>;
}

This example highlights how to apply custom CSS styles by defining them in an external stylesheet and linking them to the Box component through the className prop.

Reusable Layout

The Box component’s flexibility and customization options make it an ideal candidate for creating reusable layout components and design patterns. By encapsulating common layout structures within a custom component, we can ensure consistent styling and behavior across the application.

Custom Card Component

A common design pattern in web applications is the card component, which typically consists of a container with a shadow, padding, and a border-radius. We can create a custom Card component using the Box component and customize it to fit our application’s design system.

import Box from "@mui/material/Box";

function Card({ children }) {
  return (
    <Box
      sx={{
        p: 2,
        borderRadius: 4,
        boxShadow: 1,
        bgcolor: "background.paper",
      }}
    >
      {children}
    </Box>
  );
}

We can consume the custom Card component anywhere in our application, providing a consistent and reusable card structure.

<Card>This is a custom card component.</Card>

Summary

The MUI Box component is a powerful and versatile building block that offers a wide range of customization options, making it suitable for various layout and design requirements. By leveraging system properties, the sx prop, and custom components, we can create reusable layout structures and design patterns that align with the Material UI design system.

Bye for now! 👋

MUI FormControl: Creating Dynamic and Customized Forms

MUI Form Control is a component that enhances form functionality within Material UI. It provides essential context for form inputs, such as their filled, focused, error, and required states, enabling more advanced use cases. By encompassing smaller components like Label, Input, and HelperText within FormControl, developers can create fully customized TextFields, offering precise control over the form’s behavior and appearance.

Here’s a simple code example to illustrate how to integrate smaller components within FormControl to craft a custom TextField:

import React from "react";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import Input from "@mui/material/Input";
import FormHelperText from "@mui/material/FormHelperText";

export default function CustomTextField() {
  return (
    <FormControl>
      <InputLabel>Email address</InputLabel>
      <Input />
      <FormHelperText>We'll never share your email.</FormHelperText>
    </FormControl>
  );
}

This example demonstrates how FormControl can encapsulate an InputLabel, Input, and FormHelperText to create a cohesive, customized input field with a label and helper text for enhanced user guidance.

In this tutorial, we’ll explore the various features and use cases of MUI FormControl, including its properties, customization options, and advanced form-handling techniques.

Form Control Context

Using the FormControl component as a wrapper provides a context for all child elements, enabling them to access various states such as error, focused, filled, and required. These states can be accessed using the useFormControl hook, offering a powerful way to dynamically adjust the behavior and styling of form elements based on user interaction.

Error State

When an input event triggers an error, the FormControl reflects this state, allowing all child elements to update accordingly. For example, both the helper text and the input field can change color to indicate the error. Additionally, a custom helper text component can access the error state from the useFormControl hook for more advanced usage.

The following example demonstrates how to access the error state using the useFormControl hook:

import React from "react";
import FormHelperText from "@mui/material/FormHelperText";
import Input from "@mui/material/Input";
import FormControl, { useFormControl } from "@mui/material/FormControl";

function CustomHelperText() {
  const { error } = useFormControl() || {};
  return (
    <FormHelperText error={error}>
      {error ? "Error text" : "Helper text"}
    </FormHelperText>
  );
}

export default function InputValidation() {
  const [error, setError] = React.useState(false);

  const handleChange = event => {
    // Custom validation logic here
    setError(event.target.value.length < 3);
  };

  return (
    <FormControl error={error}>
      <Input onChange={handleChange} />
      <CustomHelperText />
    </FormControl>
  );
}

In this example, the CustomHelperText component accesses the error state using the useFormControl hook. When the input value is less than three characters, the error state is set to true, and the helper text changes to an error message. This demonstrates how the FormControl context can create dynamic form elements that respond to user input.

Focused State

The focused state is another important context provided by the FormControl component. When an input field is focused, the FormControl reflects this state, allowing child elements to update their appearance accordingly.

In the following example, we’ll create a custom component that displays a message based on the focused state of the input field:

import React from "react";
import Input from "@mui/material/Input";
import FormControl, { useFormControl } from "@mui/material/FormControl";

function FocusIndicator() {
  const formControl = useFormControl();
  const focused = formControl?.focused || false;
  return <div>{focused ? "Input is focused" : "Input is not focused"}</div>;
}

export default function InputFocus() {
  return (
    <FormControl>
      <Input />
      <FocusIndicator />
    </FormControl>
  );
}

In this example, the FocusIndicator component accesses the focused state using the useFormControl hook. When the input field is focused, the message “Input is focused” is displayed; when it’s not, the message “Input is not focused” is displayed. This demonstrates how the FormControl context can be used to create dynamic form elements that respond to user interaction.

Filled State

The filled state indicates whether the input has a value, allowing for custom styling or behavior when an input field is not empty.

The following example demonstrates how to access the filled state using the useFormControl hook:

import React from "react";
import Input from "@mui/material/Input";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl, { useFormControl } from "@mui/material/FormControl";

function FilledIndicator() {
  const formControl = useFormControl();
  const filled = formControl?.filled || false;
  return (
    <FormHelperText>
      {filled ? "Input has value" : "Input is empty"}
    </FormHelperText>
  );
}

export default function InputFilled() {
  return (
    <FormControl>
      <Input defaultValue="" />
      <FilledIndicator />
    </FormControl>
  );
}

In this example, the FilledIndicator component accesses the filled state using the useFormControl hook. When the input field has a value, the message “Input has value” is displayed, and when it’s empty, the message “Input is empty” is displayed.

Required State

The required state can be used to indicate that an input is mandatory, providing visual cues or validations to ensure users fill out essential fields.

The following example demonstrates how to access the required state using the useFormControl hook:

import React from "react";
import Input from "@mui/material/Input";
import Stack from "@mui/material/Stack";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl, { useFormControl } from "@mui/material/FormControl";

function RequiredIndicator() {
  const formControl = useFormControl();
  const required = formControl?.required || false;
  return (
    <FormHelperText>
      {required ? "This field is required" : "This field is optional"}
    </FormHelperText>
  );
}

export default function InputRequired() {
  return (
    <Stack sx={{ width: "200px" }}>
      <FormControl>
        <Input />
        <RequiredIndicator />
      </FormControl>
      <FormControl required>
        <Input />
        <RequiredIndicator />
      </FormControl>
    </Stack>
  );
}

In this example, the RequiredIndicator component accesses the required state using the useFormControl hook. When the input field is marked as required, the message “This field is required” is displayed, and when it’s optional, the message “This field is optional” is displayed.

Customizing TextField Appearance

A TextField in Material UI comprises smaller components, allowing extensive customization and styling flexibility. When wrapped with a FormControl, these components can be individually styled and manipulated to fit any design requirement. The primary components involved are:

FormLabel: Provides a label for the input.
FormHelperText: Offers additional hints or error messages.
Input: The actual input field where the user types.
InputLabel: Acts as a label specifically for the Input component, offering more integration with Material UI’s style system.

By customizing these components, you can achieve high styling customization. Here’s an example showcasing how to use all these components together for complete styling flexibility:

import React from "react";
import FormControl from "@mui/material/FormControl";
import Input from "@mui/material/Input";
import InputLabel from "@mui/material/InputLabel";
import { styled } from "@mui/material/styles";

const CustomInput = styled(Input)({
  "&.MuiInput-root": {
    margin: 0,
  },
  "& .MuiInputBase-input": {
    borderRadius: 5,
    position: "relative",
    border: "1px solid #ced4da",
    padding: "10px 12px",
  },
});

const CustomInputLabel = styled(InputLabel)({
  position: "relative",
  transform: "none",
  marginBottom: "5px",
});

export default function CustomInputComponent() {
  return (
    <FormControl variant="standard">
      <CustomInputLabel htmlFor="custom-input">Email</CustomInputLabel>
      <CustomInput id="custom-input" disableUnderline />
    </FormControl>
  );
}

In this example, we’ve used the styled function from Material UI to create custom styles for the Input and InputLabel components. By applying these styles, we’ve achieved a custom appearance for the input field and label, including a border radius, border color, and spacing between the label and input.

Conclusion

Throughout this tutorial, we’ve explored the versatile nature of Material UI’s FormControl and its ability to provide context and enhance the functionality of form inputs. By understanding and utilizing the FormControl component, you can create more responsive, accessible, and styled forms.

With a detailed explanation of its context management, through states like error, focused, filled, and required, and the ability to fully customize each part of the TextField, we’re now equipped to build complex forms that are both user-friendly and adhere to modern design standards.

The complete Material UI documentation is an excellent resource for further exploration of FormControl’s props and capabilities, ensuring that our forms will be functional and seamlessly integrated into our projects.

MUI TextField: How to Customize Variants, Colors & Styles

Customizing TextField colors is an essential part of building a beautiful UI. MUI TextField component is not just an input field, but it’s a wrapper that contains multiple elements like the label, input, text helper, error and more. That’s why styling it is a bit different than a regular input field. In this tutorial, we will learn how to customize the colors of the TextField component in Material UI (MUI) and React including the border, label, and text colors for different variants.

The classes that we will use to customize the TextField styles and colors are based on the variant prop. So to find the class we need, we will have to choose the variant first. Let’s go through the different variants and see how we can customize the colors and styles for each one.

Outlined Variant

The outlined variant is the default variant for the TextField component. It has a border around the input field and a label that floats above the input when the user starts typing. To customize the colors of the TextField with the outlined variant, there are three main classes that we can use:

MuiOutlinedInput-root: The root class for the input field.
MuiInputLabel-outlined: The class for the label.
MuiOutlinedInput-notchedOutline: The class for the border.

In the following example, we’re going to override the default colors and styles using the sx prop.

Outlined Custom Styles

import React from "react";
import TextField from "@mui/material/TextField";

export default function OutlinedTextField() {
  return (
    <TextField
      label="Outlined"
      variant="outlined"
      sx={{
        // Root class for the input field
        "& .MuiOutlinedInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          // Class for the border around the input field
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
        },
        // Class for the label of the input field
        "& .MuiInputLabel-outlined": {
          color: "#2e2e2e",
          fontWeight: "bold",
        },
      }}
    />
  );
}

Outlined Focused State

Although we can see the styles reflected properly in the example above, when focusing on the input field, the changes are not applied. The focused state has it’s own colors and styles and they are directly related to the theme colors. Meaning, if we use the color prop and set it to secondary, we will see the colors of the focused state changes.

...

export default function OutlinedTextField() {
  return (
    <TextField
      label="Outlined"
      variant="outlined"
      color="secondary"
      sx={{
       ...
      }}
    />
  );
}

While it’s correct that the focused state should have different colors (like the primary or secondary color of the theme), we need to apply the other styles to the focused state as well. To do that, we can use the &.Mui-focused class to target the focused state and apply the styles we need.

...

export default function OutlinedTextField() {
  return (
    <TextField
      label="Outlined"
      variant="outlined"
      color="secondary"
      sx={{
        "& .MuiOutlinedInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
          "&.Mui-focused": {
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: "secondary.main",
              borderWidth: "3px",
            },
          },
          "& .MuiInputLabel-outlined": {
            color: "#2e2e2e",
            fontWeight: "bold",
            "&.Mui-focused": {
              color: "secondary.main",
              fontWeight: "bold",
            },
          },
        },
      }}
    />
  );
}

The Mui-focused class is at the root level and that’s why the MuiOutlinedInput-notchedOutline class is nested inside it. Now, when focused, the label, border color and width will change.

Outlined Hover State

After applying the new styles, the default hover state can be effected. We can use the &:hover class to apply the styles we need for the hover state.

...

export default function OutlinedTextField() {
  return (
    <TextField
      label="Outlined"
      variant="outlined"
      color="secondary"
      sx={{
        "& .MuiOutlinedInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
          "&.Mui-focused": {
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: "secondary.main",
              borderWidth: "3px",
            },
          },
          "&:hover:not(.Mui-focused)": {
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: "#ccc",
            },
          },
        },
        "& .MuiInputLabel-outlined": {
          color: "#2e2e2e",
          fontWeight: "bold",
          "&.Mui-focused": {
            color: "secondary.main",
            fontWeight: "bold",
          },
        },
      }}
    />
  );
}

We also added :not(.Mui-focused) to the hover state to make sure the hover state is not applied when the input is focused.

Filled Variant

The filled variant has a background color, a bottom border and a label that floats within the input when the user starts typing. To customize the colors and styles, there are two main classes that we can use:

MuiFilledInput-root: The root class for the input field.
MuiInputLabel-filled: The class for the label.

Filled Custom Styles

In the following example, we’re going to override the default colors and styles using the sx prop:

import React from "react";
import TextField from "@mui/material/TextField";

export default function FilledTextField() {
  return (
    <TextField
      label="Filled"
      variant="filled"
      sx={{
        // Root class for the input field
        "& .MuiFilledInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          backgroundColor: "#f4f4f4",
          borderTopLeftRadius: "7px",
          borderTopRightRadius: "7px",
        },
        // Class for the label of the filled input field
        "& .MuiInputLabel-filled": {
          color: "#2e2e2e",
          fontWeight: "bold",
        },
      }}
    />
  );
}

As seen in the code above, using the MuiFilledInput-root class, we can change the background color, border radius and other styles. The MuiInputLabel-filled class is used to change the label styles.

The bottom border is styled separatly as it’s created using the &:before pseudo-element which we can use to change the border color and width.

...

export default function FilledTextField() {
  return (
    <TextField
      label="Filled"
      variant="filled"
      color="secondary"
      sx={{
        "& .MuiFilledInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          backgroundColor: "#f4f4f4",
          borderTopLeftRadius: "7px",
          borderTopRightRadius: "7px",
          "&:before": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
        },
        "& .MuiInputLabel-filled": {
          color: "#2e2e2e",
          fontWeight: "bold",
        },
      }}
    />
  );
}

Filled Focused State

For the focused state, we can use the &.Mui-focused class to target the focused state of the label but the bottom border is also another pseudo-element created using the &:after class in the root class.

In the following example, we’re going to override the default colors and styles for the focused state:

...

export default function FilledTextField() {
  return (
    <TextField
      label="Filled"
      variant="filled"
      color="secondary"
      sx={{
        "& .MuiFilledInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          backgroundColor: "#f4f4f4",
          borderTopLeftRadius: "7px",
          borderTopRightRadius: "7px",
          "&:before": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
          "&:after": {
            borderColor: "secondary.main",
            borderWidth: "3px",
          },
        },
        "& .MuiInputLabel-filled": {
          color: "#2e2e2e",
          fontWeight: "bold",
          "&.Mui-focused": {
            color: "secondary.main",
            fontWeight: "bold",
          },
        },
      }}
    />
  );
}

Filled Hover State

Let’s chnage the background color and the bottom border when hovering over the input field using the &:hover class. Also, we need to make sure the hover state is not applied when the input is focused.

...

export default function FilledTextField() {
  return (
    <TextField
      label="Outlined"
      variant="outlined"
      color="secondary"
      sx={{
        "& .MuiOutlinedInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
          "&.Mui-focused": {
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: "secondary.main",
              borderWidth: "3px",
            },
          },
          "&:hover:not(.Mui-focused)": {
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: "#ccc",
            },
          },
        },
        "& .MuiInputLabel-outlined": {
          color: "#2e2e2e",
          fontWeight: "bold",
          "&.Mui-focused": {
            color: "secondary.main",
            fontWeight: "bold",
          },
        },
      }}
    />
  );
}

Standard Variant

The standard variant is the most basic variant of the TextField component. It has a bottom border and a label that floats above the input when the user starts typing. To customize the colors and styles, there are two main classes that we can use:

MuiInput-root: The root class for the input field.
MuiInputLabel-standard: The class for the label.

Standard Custom Styles

In the following example, we’re going to override the default colors and styles using the sx prop:

import React from "react";
import TextField from "@mui/material/TextField";

export default function StandardTextField() {
  return (
    <TextField
      label="Standard"
      variant="standard"
      sx={{
        "& .MuiInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          // Bottom border
          "&:before": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
        },
        // Label
        "& .MuiInputLabel-standard": {
          color: "#2e2e2e",
          fontWeight: "bold",
        },
      }}
    />
  );
}

For the focused and hover states, we will follow the same steps as the filled variant.

Standard Focused State

Use the &.Mui-focused class to target the focused state of the label
Use the :after pseudo-element to target the focused state of the bottom border

...

export default function StandardTextField() {
  return (
    <TextField
      label="Standard"
      variant="standard"
      color="secondary"
      sx={{
        "& .MuiInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          // Bottom border
          "&:before": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
          // Border on focus
          "&:after": {
            borderColor: "secondary.main",
            borderWidth: "3px",
          },
        },
        // Label
        "& .MuiInputLabel-standard": {
          color: "#2e2e2e",
          fontWeight: "bold",
          "&.Mui-focused": {
            color: "secondary.main",
          },
        },
      }}
    />
  );
}

Standard Hover State

Use the &:hover selector to target the hover state of the input field
Exclude the hover state when the input is focused using :not(.Mui-focused)

...

export default function StandardTextField() {
  return (
    <TextField
      label="Standard"
      variant="standard"
      color="secondary"
      sx={{
        "& .MuiInput-root": {
          color: "#000",
          fontFamily: "Arial",
          fontWeight: "bold",
          // Bottom border
          "&:before": {
            borderColor: "#2e2e2e",
            borderWidth: "2px",
          },
          // Border on focus
          "&:after": {
            borderColor: "secondary.main",
            borderWidth: "3px",
          },
          ":hover:not(.Mui-focused)": {
            "&:before": {
              borderColor: "#e7e7e7",
              borderWidth: "2px",
            },
          },
        },
        // Label
        "& .MuiInputLabel-standard": {
          color: "#2e2e2e",
          fontWeight: "bold",
          "&.Mui-focused": {
            color: "secondary.main",
          },
        },
      }}
    />
  );
}

Using the Theme

In the examples above, we used the sx prop to override the default colors and styles of the TextField component. Although this is convenient and easy to use, it won’t be the best appraoch as we want to reuse the same styles multiple times across the app. Instead, we can use the theme object to apply the styles globally.

To do that, we can use the createTheme function to create a new theme and then use the ThemeProvider to wrap the app and apply the new theme.

Let’s add styles of all the variants we did to the new theme:

import React from "react";
import TextField from "@mui/material/TextField";
import { ThemeProvider, createTheme } from "@mui/material";

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          // Outlined
          "& .MuiOutlinedInput-root": {
            color: "#000",
            fontFamily: "Arial",
            fontWeight: "bold",
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: "#2e2e2e",
              borderWidth: "2px",
            },
            "&.Mui-focused": {
              "& .MuiOutlinedInput-notchedOutline": {
                borderColor: "secondary.main",
                borderWidth: "3px",
              },
            },
            "&:hover:not(.Mui-focused)": {
              "& .MuiOutlinedInput-notchedOutline": {
                borderColor: "#ccc",
              },
            },
          },
          "& .MuiInputLabel-outlined": {
            color: "#2e2e2e",
            fontWeight: "bold",
            "&.Mui-focused": {
              color: "secondary.main",
            },
          },
          // Filled
          "& .MuiFilledInput-root": {
            color: "#000",
            fontFamily: "Arial",
            fontWeight: "bold",
            backgroundColor: "#e7e7e7",
            borderTopLeftRadius: "7px",
            borderTopRightRadius: "7px",
            "&:before": {
              borderColor: "#2e2e2e",
              borderWidth: "2px",
            },
            "&:after": {
              borderColor: "secondary.main",
              borderWidth: "3px",
            },
            ":hover:not(.Mui-focused)": {
              "&:before": {
                borderColor: "#e7e7e7",
                borderWidth: "2px",
              },
              backgroundColor: "#f4f4f4",
            },
          },
          "& .MuiInputLabel-filled": {
            color: "#2e2e2e",
            fontWeight: "bold",
            "&.Mui-focused": {
              color: "secondary.main",
            },
          },
          // Standard
          "& .MuiInput-root": {
            color: "#000",
            fontFamily: "Arial",
            fontWeight: "bold",
            "&:before": {
              borderColor: "#2e2e2e",
              borderWidth: "2px",
            },
            "&:after": {
              borderColor: "secondary.main",
              borderWidth: "3px",
            },
            ":hover:not(.Mui-focused)": {
              "&:before": {
                borderColor: "#e7e7e7",
                borderWidth: "2px",
              },
            },
          },
        },
      },
    },
  },
});

export default function CustomThemeTextField() {
  return (
    <ThemeProvider theme={theme}>
      <TextField label="Outlined" variant="outlined" color="secondary" />
      <TextField label="Filled" variant="filled" color="secondary" />
      <TextField label="Standard" variant="standard" color="secondary" />
    </ThemeProvider>
  );
}

Now, when consuming the TextField component anywhere in the application, the custom styles will be applied.

Conclusion

In this tutorial, we learned how to customize the colors and styles of the TextField component in Material UI (MUI) and React. We went through the different variants and saw how to change the border, label, and text colors for each one. We also learned how to apply the styles globally using the theme object.

Bye for now 👋

Complete Code

How to Create and Style a Readonly TextField in Material UI (MUI) React

Readonly is a native HTML attribute that can be used with the input element. Its primary purpose is to prevent the user from editing the input value while still incorporating it as part of the form submission. It’s important to understand that the readonly behavior differs from disabled as we can still interact with elements like focus into and tab in and out. Meanwhile, the disabled input is non-interactable and can’t be submitted with the form.

In this tutorial, we will learn how to create a Readonly TextField in Material UI (MUI) and React with customization and styling on different variants.

Create a Readonly TextField

MUI has no direct prop to create a Readonly TextField. However, we can use the inputProps and set the readOnly property to true. The reason behind it is that the TexField component is a wrapper containing the input element along with other elements, so the inputProps is used to pass down the attributes to the underlying input element.

import React from "react";
import TextField from "@mui/material/TextField";

export default function App() {
  return (
    <TextField
      label="Readonly"
      variant="outlined"
      defaultValue="You Can't Edit Me"
      inputProps={{ readOnly: true }}
    />
  );
}

In the example above, we can select the text and focus on the input field, but we can’t edit the value. Below is a screenshot of the TextField component in the browser dev tool.

We can see that the readonly attribute is added to the input element, which is nested inside the root div element.

Alternatively, we can create our own custom TextField component that extends MUI TextField and pass in a new prop called readOnly, which will be used to set the inputProps value. This approach is particularly useful when reusing it in multiple places.

import React from "react";
import MuiTextField from "@mui/material/TextField";

// Add to a separate file TextField.js
function TextField({ readOnly, ...props }) {
  return <MuiTextField {...props} inputProps={{ readOnly }} />;
}

export default function App() {
  return (
    <TextField
      label="Readonly"
      variant="outlined"
      defaultValue="You Can't Edit Me"
      readOnly
    />
  );
}

We renamed the MUI TextField component to MuiTextField to avoid naming conflict with our custom component. Now we have a custom TextField component that can quickly turn on a readonly mode. Of course, extending components can also help create other features such as validation, formatting, etc.

Style a Readonly TextField

Styling a Readonly TextField in MUI can be tricky. Since the component is a wrapper with different elements, changing styles will persist whether a readonly attribute is present or not. To get around this, we can use the CSS :has selector on the root element to check if it has the readonly prop.

In the example below, we can change the border and label color of the TextField to #cecece only when triggering readonly.

import React from "react";
import { TextField as MuiTextField } from "@mui/material";

function TextField({ readOnly, ...props }) {
  return (
    <MuiTextField
      inputProps={{ readOnly }}
      sx={{
        // change label and border color when readonly
        "&:has([readonly]) ": {
          "& .MuiInputLabel-outlined": {
            color: "#cecece",
          },
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#cecece",
          },
        },
      }}
      {...props}
    />
  );
}

export default function App() {
  return (
    <TextField
      label="Readonly"
      variant="outlined"
      defaultValue="You Can't Edit Me"
      readOnly
    />
  );
}

Note: thre is an active issue to add a Mui-readOnly class to the root element. When resolved, we won’t require the :has selector anymore since we can directly target the class.

Another approach is to change the styles dynamically based on the readOnly prop value. Each class object can be a function that returns the styles based on the condition.

import React from 'react';
import MuiTextField from '@mui/material/TextField';

function TextField({ readOnly, ...props }) {
  return (
    <MuiTextField
      inputProps={{ readOnly }}
      sx={{
        '& .MuiInputLabel-outlined': () =>
          readOnly
            ? {
                color: '#cecece',
              }
            : null,
        '& .MuiOutlinedInput-notchedOutline': () =>
          readOnly
            ? {
                borderColor: '#cecece',
              }
            : null,
      }}
      {...props}
    />
  );
}

export default function App() {
  return (
    <TextField
      label="Readonly"
      variant="outlined"
      defaultValue="You Can't Edit Me"
      readOnly
    />
  );
}

We are returning null because if readOnly is false, then we’re keeping the default style. Of course, we can change the default however we like.

Styling Different Variants

The TextField component has different variants such as standard, outlined, and filled. Previously, we only styled the outlined variant. To style the other variants, we must change the selector’s class name.

For example, we can use the following class selector to style the border and label colors of the filled variant.

import React from "react";
import MuiTextField from "@mui/material/TextField";

function TextField({ readOnly, ...props }) {
  return (
    <MuiTextField
      inputProps={{ readOnly }}
      sx={{
        "&:has([readonly]) ": {
          "& .MuiInputLabel-filled": {
            color: "#cecece",
          },
          "& .MuiFilledInput-root": {
            "&:before": {
              borderBottom: "1px solid #cecece",
            },
          },
        },
      }}
      {...props}
    />
  );
}

export default function App() {
  return (
    <TextField
      label="Readonly"
      variant="filled"
      defaultValue="You Can't Edit Me"
      readOnly
    />
  );
}

If we want to style the standard variant, we can do the following.

import React from "react";
import MuiTextField from "@mui/material/TextField";

function TextField({ readOnly, ...props }) {
  return (
    <MuiTextField
      inputProps={{ readOnly }}
      sx={{
        "&:has([readonly]) ": {
          "& .MuiInputLabel-standard": {
            color: "#cecece",
          },
          "& .MuiInput-root": {
            "&:before": {
              borderBottom: "1px solid #cecece",
            },
          },
        },
      }}
      {...props}
    />
  );
}

export default function App() {
  return (
    <TextField
      label="Readonly"
      variant="standard"
      defaultValue="You Can't Edit Me"
      readOnly
    />
  );
}

Using the Theme

MUI provides a createTheme function that can be used to create a new theme and override the default styles. This is useful when we want the readonly styles to be applied globally.

import React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import TextField from "@mui/material/TextField";

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          "&:has([readonly]) ": {
            "& .MuiInputLabel-outlined": {
              color: "#cecece",
            },
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: "#cecece",
            },
          },
        },
      },
    },
  },
});

export default function BasicTextFields() {
  return (
    <ThemeProvider theme={theme}>
      <TextField
        label="Readonly"
        variant="outlined"
        defaultValue="You Can't Edit Me"
        inputProps={{ readOnly: true }}
      />
    </ThemeProvider>
  );
}

Now, anywhere we use the MUI TextField component the readonly mode will be styled based on the custom theme.

For more details on creating and customizing themes and colors, refer to this in-depth guide.

Summary

In this tutorial, we learned how to create a Readonly TextField in Material UI (MUI) and React with customization and styling on different variants. Using the Theme, we also discovered how to style the readonly TextField globally.

Bye for now 👋

MUI TextField and Form Validation

Validating TextFields and Forms is an essential aspect of web application development. This tutorial navigates through various validation techniques, emphasizing the use of React and Material UI (MUI). We will explore both the HTML built-in ‘required’ validation and the creation of custom TextField error validations, providing a robust understanding of form validation strategies.

Here are the main topics that we will cover:

Implementing MUI TextField Validation: This section will guide you through using HTML’s native ‘required’ and ‘pattern’ attributes.
Creating Custom Error Validation for MUI TextFields: Add flexibility to your TextField validation by implementing custom error validation.
MUI Form Validation Strategies: Learn to integrate multiple input fields into a cohesive MUI form validation process, ensuring overall data integrity and user-friendly interactions.

TextField Validation

Since we’re using MUI, the TextField component comes with handy props for applying styles and displaying error messages out of the box.

<TextField
  error
  label="Error"
  defaultValue="Name 123"
  helperText="Incorrect entry."
/>

The error prop will apply default styling with a red border and label, and the helperText prop will display the error message below the TextField.

Now, let’s see how to apply validation using both built-in HTML and custom error validation.

TextField Required Validation

Required is a built-in HTML attribute that can be used to validate an empty field. We can simply add the required attribute to the TextField component to use it.

<TextField required label="Required" />

We must create an onChange event handler to validate the user input and display the error message when the input field is empty.

Since required is a built-in HTML validation, we can use the validity.valid property to check whether the input field is empty.

import React, { useState } from "react";
import { TextField } from "@mui/material";

export default function TextFieldValidation() {
  const [name, setName] = useState("");
  const [nameError, setNameError] = useState(false);

  const handleNameChange = e => {
    setName(e.target.value);
    if (e.target.validity.valid) {
      setNameError(false);
    } else {
      setNameError(true);
    }
  };

  return (
    <TextField
      required
      label="Required"
      value={name}
      onChange={handleNameChange}
      error={nameError}
      helperText={nameError ? "Please enter your name" : ""}
    />
  );
}

In the example above, when typing and deleting the input field, the error message will show up. We didn’t add any logic to check if the TextField is empty because the required attribute will take care of it! We only need to show the error message if it’s invalid using the helperText prop.

TextField Pattern Validation

Pattern is another built-in HTML attribute that can be used for more complex validation. For example, we can enhance the previous validation only to accept letters and spaces.

import React, { useState } from "react";
import { TextField } from "@mui/material";

export default function TextFieldValidation() {
  const [name, setName] = useState("");
  const [nameError, setNameError] = useState(false);

  const handleNameChange = e => {
    setName(e.target.value);
    if (e.target.validity.valid) {
      setNameError(false);
    } else {
      setNameError(true);
    }
  };

  return (
    <TextField
      required
      label="Required"
      value={name}
      onChange={handleNameChange}
      error={nameError}
      helperText={
        nameError ? "Please enter your name (letters and spaces only)" : ""
      }
      inputProps={{
        pattern: "[A-Za-z ]+",
      }}
    />
  );
}

We should see the error message if we try to type in numbers in the example above.

Note that we added the pattern attribute to the inputProps because the TexField component is a wrapper that has the input element along with other elements. inputProps will pass the pattern attribute to the input element directly.

Custom Error Validation

The previous approach works great but doesn’t necessarily cover all the use cases, and regex can sometimes be tricky to read and maintain. Alternatively, we can add a validation logic in the event handle and display the appropriate error message. Let’s take an “Age” input field as an example. We want to validate that the user is at least 18 years old.

import React, { useState } from "react";
import { TextField } from "@mui/material";

export default function TextFieldValidation() {
  const [age, setAge] = useState("");
  const [ageError, setAgeError] = useState(false);

  const handleAgeChange = e => {
    setAge(e.target.value);
    if (e.target.value >= 18) {
      setAgeError(false);
    } else {
      setAgeError(true);
    }
  };

  return (
    <TextField
      label="Age"
      value={age}
      onChange={handleAgeChange}
      error={ageError}
      helperText={ageError ? "You must be at least 18 years old" : ""}
    />
  );
}

If we try to type in a number less than 18, we should see the error message “You must be at least 18 years old”.

Additionally, we can add different error messages if the age is invalid or negative.

import React, { useState } from "react";
import { TextField } from "@mui/material";

export default function TextFieldValidation() {
  const [age, setAge] = useState("");
  const [ageError, setAgeError] = useState(false);

  const handleAgeChange = e => {
    setAge(e.target.value);
    if (e.target.value >= 18) {
      setAgeError(false);
    } else if (e.target.value < 0) {
      setAgeError("Age must be a positive number");
    } else {
      setAgeError("You must be at least 18 years old");
    }
  };

  return (
    <TextField
      label="Age"
      value={age}
      onChange={handleAgeChange}
      error={ageError}
      helperText={ageError}
    />
  );
}

The new code should display the error message “Age must be a positive number” if the age is negative.

Form Validation

Now that we know how to validate a single TextField, let’s move on to validating multiple input fields in a form.

Similar to the previous section, we will cover built-in HTML and custom error validation for the entire form.

Form with Built-in HTML Validation

We can leverage the form onSubmit event handler for validation when using a form. It has a built-in function called checkValidity() that returns whether or not the input fields are valid.

Let’s create an example with the following requirements:

Create a form element with two input fields (Name and Email)
“Name” will only accept letters and spaces, and “Email” will only accept a valid email address
Validate the form on submit
Trigger alert with an error or success message
Add noValidate attribute to the Form to turn off the default HTML validation. Otherwise, the HTML tooltip validation will show up.

import React, { useState } from "react";
import { TextField, Box, Button } from "@mui/material";

export default function FormValidation() {
  const handleSubmit = e => {
    e.preventDefault();
    if (e.target.checkValidity()) {
      alert("Form is valid! Submitting the form...");
    } else {
      alert("Form is invalid! Please check the fields...");
    }
  };

  return (
    <Box component="form" onSubmit={handleSubmit} noValidate>
      <TextField
        required
        label="Name"
        inputProps={{
          pattern: "[A-Za-z ]+",
        }}
      />
      <TextField
        required
        label="Email"
        inputProps={{
          type: "email",
        }}
      />
      <Button variant="contained" color="primary" type="submit">
        Submit
      </Button>
    </Box>
  );
}

We can see how the handleSubmit function has the event object as an argument that allows us to use the checkValidity() method to check if the form is valid.

When trying the example above, we should see a valid or invalid alert message if we try to submit the form.

Note that we didn’t add a pattern attribute to the “Email” TextField because an input with type “email” already has a built-in validation specifically for email addresses!

Let’s update the example to include the onChange TextField validation.

import React, { useState } from "react";
import { TextField, Box, Button } from "@mui/material";

export default function FormValidation() {
  const [name, setName] = useState("");
  const [nameError, setNameError] = useState(false);
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState(false);

  const handleNameChange = e => {
    setName(e.target.value);
    if (e.target.validity.valid) {
      setNameError(false);
    } else {
      setNameError(true);
    }
  };

  const handleEmailChange = e => {
    setEmail(e.target.value);
    if (e.target.validity.valid) {
      setEmailError(false);
    } else {
      setEmailError(true);
    }
  };

  const handleSubmit = e => {
    e.preventDefault();
    if (e.target.checkValidity()) {
      alert("Form is valid! Submitting the form...");
    } else {
      alert("Form is invalid! Please check the fields...");
    }
  };
  return (
    <Box component="form" onSubmit={handleSubmit} noValidate>
      <TextField
        required
        label="Name"
        value={name}
        onChange={handleNameChange}
        error={nameError}
        inputProps={{
          pattern: "[A-Za-z ]+",
        }}
        helperText={
          nameError ? "Please enter your name (letters and spaces only)" : ""
        }
      />
      <TextField
        required
        label="Email"
        value={email}
        onChange={handleEmailChange}
        error={emailError}
        helperText={emailError ? "Please enter a valid email" : ""}
        inputProps={{
          type: "email",
        }}
      />
      <Button variant="contained" color="primary" type="submit">
        Submit
      </Button>
    </Box>
  );
}

Now we have both validation, onChange and onSubmit. One is for input field change, and the other is for form validation on submit.

Form with Custom Error Validation

As mentioned earlier, using the custom error validation approach gives us more flexibility and control over the validation logic but also requires more work.

Let’s take the previous example and add a custom error validation for the input change handlers.

Here are the requirements for the example:

“Name” will only accept letters and spaces with a length between 3 and 20 characters
“Email” will only accept a valid email address that contains a domain name and ’@’ symbol

const [name, setName] = useState("");
const [nameError, setNameError] = useState("");
const [email, setEmail] = useState("");
const [emailError, setEmailError] = useState(false);

const handleNameChange = e => {
  setName(e.target.value);
  if (e.target.value.length < 3) {
    setNameError("Name must be at least 3 characters long");
  } else if (e.target.value.length > 20) {
    setNameError("Name must be less than 20 characters long");
  } else if (!/^[a-zA-Z ]+$/.test(e.target.value)) {
    setNameError("Name must contain only letters and spaces");
  } else {
    setNameError(false);
  }
};

const handleEmailChange = e => {
  setEmail(e.target.value);
  if (!/^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$/.test(e.target.value)) {
    setEmailError("Invalid email address");
  } else {
    setEmailError(false);
  }
};

We can remove the pattern and required attributes for the elements because now we’re handling the validation logic in the event handler.

<Box component="form" onSubmit={handleSubmit} noValidate>
  <TextField
    label="Name"
    value={name}
    onChange={handleNameChange}
    error={nameError}
    helperText={nameError}
  />
  <TextField
    label="Email"
    value={email}
    onChange={handleEmailChange}
    error={emailError}
    helperText={emailError}
  />
  <Button variant="contained" color="primary" type="submit">
    Submit
  </Button>
</Box>

Finally, we need to update the handleSubmit event handler to check if the form is valid or not:

const handleSubmit = e => {
  e.preventDefault();
  if (nameError || emailError) {
    alert("Form is invalid! Please check the fields...");
  } else {
    alert("Form is valid! Submitting the form...");
  }
};

Here are all the pieces put together.

import React, { useState } from "react";
import { TextField, Box, Button } from "@mui/material";

export default function FormValidation() {
  const [name, setName] = useState("");
  const [nameError, setNameError] = useState("");
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState(false);

  const handleNameChange = e => {
    setName(e.target.value);
    if (e.target.value.length < 3) {
      setNameError("Name must be at least 3 characters long");
    } else if (e.target.value.length > 20) {
      setNameError("Name must be less than 20 characters long");
    } else if (!/^[a-zA-Z ]+$/.test(e.target.value)) {
      setNameError("Name must contain only letters and spaces");
    } else {
      setNameError(false);
    }
  };

  const handleEmailChange = e => {
    setEmail(e.target.value);
    if (!/^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$/.test(e.target.value)) {
      setEmailError("Invalid email address");
    } else {
      setEmailError(false);
    }
  };

  const handleSubmit = e => {
    e.preventDefault();
    if (nameError || emailError) {
      alert("Form is invalid! Please check the fields...");
    } else {
      alert("Form is valid! Submitting the form...");
    }
  };

  return (
    <Box component="form" onSubmit={handleSubmit} noValidate>
      <TextField
        label="Name"
        value={name}
        onChange={handleNameChange}
        error={nameError}
        helperText={nameError}
      />
      <TextField
        label="Email"
        value={email}
        onChange={handleEmailChange}
        error={emailError}
        helperText={emailError}
      />
      <Button variant="contained" color="primary" type="submit">
        Submit
      </Button>
    </Box>
  );
}

The code example should validate both text field change and form submission.

Code Refactoring and Optimization

The code we’ve written so far works great but could cause some maintainability and performance issues as we scale, especially when having a lot of input fields in the form. Let’s break down the code and see how to refactor and optimize it.

First of all, every time we trigger onChange, everything is re-rendered. That means if we have ten input fields, every time we type in one of them, all ten input fields will be re-rendered. To avoid that, we can create an isolated component for the TextField and only re-render that component when the value changes.

const ValidatedTextField = ({ label, validator, onChange }) => {
  const [value, setValue] = useState("");
  const [error, setError] = useState(false);

  const handleChange = e => {
    const newValue = e.target.value;
    const errorMessage = validator(newValue);
    setValue(newValue);
    setError(errorMessage);
    onChange(!errorMessage);
  };

  return (
    <TextField
      label={label}
      value={value}
      onChange={handleChange}
      error={!!error}
      helperText={error}
    />
  );
};

The component returns a MUI TextField, but since it’s generic, we must pass a few props to make it work.

label: The label of the TextField (in our example, it’s “Email” or “Name”)
validator: A function that takes the value of the input field and returns an error message if the value is invalid or false if the value is valid
onChange: A function that takes a boolean value to indicate whether the input field is valid. This is required for the Form validation later on.

Let’s create the two validators for the “Name” and “Email” input fields:

const nameValidator = value => {
  if (value.length < 3) return "Name must be at least 3 characters long";
  if (value.length > 20) return "Name must be less than 20 characters long";
  if (!/^[a-zA-Z ]+$/.test(value))
    return "Name must contain only letters and spaces";
  return false;
};

const emailValidator = value => {
  if (!/^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]+$/.test(value))
    return "Invalid email address";
  return false;
};

The function’s logic is the same as the previous example, but instead of setting the error message to the state, we’re returning it. Also, the two functions don’t necessarily need to be in a specific component and can be moved to a separate file if required.

Lastly, in the main FormValidation component, we can now use the new ValidatedTextField component instead of the TextField. Here are the changes we need to make to get it working with the new arrangement:

Remove all the state variables and event handlers as they are now handled in the ValidatedTextField component
Pass in the validators to the ValidatedTextField component
Create a new ref object to store the validation status of each input field. The object will act as a map where the key is the input field name, and the value is a boolean indicating whether the input field is valid. The reason we use ref instead of the state is that we don’t want to re-render the component every time the validation status changes
Use the onChange from the new ValidatedTextField component as a callback to update the validation status in the ref object
Update the handleSubmit event handler to check the validation status in the ref object by using Object.values and every methods

export default function FormValidation() {
  const formValid = useRef({ name: false, email: false });

  const handleSubmit = e => {
    e.preventDefault();
    if (Object.values(formValid.current).every(isValid => isValid)) {
      alert("Form is valid! Submitting the form...");
    } else {
      alert("Form is invalid! Please check the fields...");
    }
  };

  return (
    <Box component="form" onSubmit={handleSubmit} noValidate>
      <ValidatedTextField
        label="Name"
        validator={nameValidator}
        onChange={isValid => (formValid.current.name = isValid)}
      />
      <ValidatedTextField
        label="Email"
        validator={emailValidator}
        onChange={isValid => (formValid.current.email = isValid)}
      />
      <Button type="submit" variant="contained">
        Submit
      </Button>
    </Box>
  );
}

Now, let’s put everything together and see what the final code looks like.

import React, { useState, useRef } from "react";
import { TextField, Box, Button } from "@mui/material";

// ValidatedTextField.js
const ValidatedTextField = ({ label, validator, onChange }) => {
  const [value, setValue] = useState("");
  const [error, setError] = useState(false);

  const handleChange = e => {
    const newValue = e.target.value;
    const errorMessage = validator(newValue);
    setValue(newValue);
    setError(errorMessage);
    onChange(!errorMessage);
  };

  return (
    <TextField
      label={label}
      value={value}
      onChange={handleChange}
      error={!!error}
      helperText={error}
    />
  );
};

// validators.js
const nameValidator = value => {
  if (value.length < 3) return "Name must be at least 3 characters long";
  if (value.length > 20) return "Name must be less than 20 characters long";
  if (!/^[a-zA-Z ]+$/.test(value))
    return "Name must contain only letters and spaces";
  return false;
};

const emailValidator = value => {
  if (!/^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]+$/.test(value))
    return "Invalid email address";
  return false;
};

// FormValidation.js
export default function FormValidation() {
  const formValid = useRef({ name: false, email: false });

  const handleSubmit = e => {
    e.preventDefault();
    if (Object.values(formValid.current).every(isValid => isValid)) {
      alert("Form is valid! Submitting the form...");
    } else {
      alert("Form is invalid! Please check the fields...");
    }
  };

  return (
    <Box component="form" onSubmit={handleSubmit} noValidate>
      <ValidatedTextField
        label="Name"
        validator={nameValidator}
        onChange={isValid => (formValid.current.name = isValid)}
      />
      <ValidatedTextField
        label="Email"
        validator={emailValidator}
        onChange={isValid => (formValid.current.email = isValid)}
      />
      <Button type="submit" variant="contained">
        Submit
      </Button>
    </Box>
  );
}

The outcome is the same as the previous example. Still, now we have a more generic and reusable input field component that can be used without repeatedly writing the same component. As indicated in the comments, we can split the code into separate files for better organization.

Styling and Colors

To customize the colors and other styles of the TextField error state, we can use the Mui-error class that is added to the TextField when the error prop is true.

In the following example, we can use the error class to style the helperText and the input field border and label colors.

...
<TextField
  ...
  sx={{
    "& .MuiInputLabel-root.Mui-error": {
      color: "#ff8804",
    },
    "& .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline": {
      border: "3px solid #ff8804",
    },
    "& .MuiFormHelperText-root.Mui-error": {
      color: "#ff8804",
    },
  }}
/>

Conclusion

In this tutorial, we learned how to validate MUI TextField and Form using built-in HTML and custom error validation with code refactoring and optimization. Although plenty of useful libraries can help us with the validation, it’s always good to understand the underlying principles and build our own validation logic.

Bye for now 👋

MUI Typography - Complete Styling & Customization Guide

MUI Typography is a CSS utility component that is used to display text. It is a wrapper that renders a limited set of HTML elements like p, h1, h2, h3…etc. It follows the Material Design typography principles, including a range of highly customizable styles.

Having a typography system helps create a consistent visual experience across platforms and devices. This tutorial will cover how to use and customize MUI Typography, including variant, color, font weight, text alignment, and other styling customizations.

MUI Typography Variants

The Typography component depends on the variant prop to render the correct HTML element. By default, using the Typography component without a variant prop will render a p element.

<Typography>Default Text</Typography>

If we inspect the element in the browser, we can see that the <p> element has a predefined set of styles applied to it.

font-family: ...;
font-weight: ...;
font-size: ...;
line-height: ...;
letter-spacing: ...;

The available variants are based on the Material Design typographic scale. The variant prop accepts a string value that can be one of the following:

Variant	Element	Description
`h1`	`h1`	Heading 1
`h2`	`h2`	Heading 2
`h3`	`h3`	Heading 3
`h4`	`h4`	Heading 4
`h5`	`h5`	Heading 5
`h6`	`h6`	Heading 6
`body1`	`p`	Body 1
`body2`	`p`	Body 2
`subtitle1`	`p`	Subtitle 1
`subtitle2`	`p`	Subtitle 2
`caption`	`p`	Caption
`button`	`span`	Button
`overline`	`span`	Overline

Here is how we can use the variant prop to render each variant:

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="h3">Heading 3</Typography>
<Typography variant="h4">Heading 3</Typography>
<Typography variant="h5">Heading 3</Typography>
<Typography variant="h6">Heading 3</Typography>
<Typography variant="body1">Body 1</Typography>
<Typography variant="body2">Body 2</Typography>
<Typography variant="subtitle1">Subtitle 1</Typography>
<Typography variant="subtitle2">Subtitle 2</Typography>
<Typography variant="caption">Caption</Typography>
<Typography variant="button">Button</Typography>
<Typography variant="overline">Overline</Typography>

Customize a variant

We can customize any variant from the theme in the typography object. In the following example, we will change the h1 variant to have a font size of 6rem and a font-weight of 700.

import React from "react";
import { createTheme, ThemeProvider, Typography } from "@mui/material";

const theme = createTheme({
  typography: {
    h1: {
      fontSize: "4rem",
      fontWeight: 700,
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h1">Heading 1</Typography>
    </ThemeProvider>
  );
}

Using MUI theme for styling and other customizations is always helpful if we want the changes to persist throughout the app.

Add new variant

Variants are not limited to the ones provided by MUI. We can add custom variants by adding a new key to the typography object.

Let’s create a new variant called h7 with some custom styles.

import React from "react";
import { createTheme, ThemeProvider, Typography } from "@mui/material";

const theme = createTheme({
  typography: {
    h7: {
      fontSize: "3rem",
      fontWeight: 500,
      fontFamily: "sans-serif",
      fontStyle: "italic",
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h7">H7 Title</Typography>
    </ThemeProvider>
  );
}

Now, we have a new variant called h7 that we can use anywhere in our app.

The default rendered element for any new variant we add will be span. If we want to change the element, we can use variantMapping in the typography object. For example, if we’re going to render the h7 variant as a h1 element, we can do the following:

...

const theme = createTheme({
  typography: {
   ...
  },
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          // Map the new variant to render a <h1> by default
          h7: 'h1',
        },
      },
    },
  },
});

...

Disable variant

If there are specific variants we don’t want to use, we can disable them by simply applying an undefined value to the variant in the typography object. In the following example, we will disable the caption variant.

import React from "react";
import { createTheme, ThemeProvider, Typography } from "@mui/material";

const theme = createTheme({
  typography: {
    caption: undefined,
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="caption">Caption</Typography>
    </ThemeProvider>
  );
}

As we can see above, the caption variant no longer has styles applied to it. And we can double-check that by inspecting the element in the browser and looking at the element’s styles.

Typography Styling

Since the Typography component is CSS utility component, it supports all system properties. You can use them as props directly on the component with either string values or shorthand access to the theme object.

Let’s explore some of the most common ones.

Color

The color prop is used to change the color of the text. It accepts a string value that can be a color name, hex code, RGB, RGBA, or HSL value.

<Typography color="#cccccc">Light Grey Text</Typography>

The color prop supports the theme colors, which allows us to use colors from the theme palette.

<Typography color="primary">Primary Text</Typography>
<Typography color="secondary">Secondary Text</Typography>

Using the theme colors is very helpful because we can create and change the color palette only once and use it in multiple places. For example, if we have a specific text color that we want to use throughout the app, we can add it to the theme under the palette object.

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    textBlue: "#1e88e5",
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography color="textBlue">Text Blue</Typography>
    </ThemeProvider>
  );
}

Now, anywhere we need to use the textBlue color, we can apply it to the color prop.

import React from "react";
import { createTheme, ThemeProvider, Typography } from "@mui/material";

const theme = createTheme({
  typography: {
    fontSizeSmall: "1rem",
    fontSizeMedium: "2rem",
    fontSizeLarge: "3rem",
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography fontSize="fontSizeSmall">Small</Typography>
      <Typography fontSize="fontSizeMedium">Medium</Typography>
      <Typography fontSize="fontSizeLarge">Large</Typography>
    </ThemeProvider>
  );
}

Additionally, we can choose to change the size of the text to an existing variant size.

<Typography fontSize="h4.fontSize">
  Some text that is the same size as the h4 variant
</Typography>

Font Weight

The fontWeight prop is used to change the weight of the text. It accepts a string value that can be a number or keyword. For example, the value can be 100 to 900 or normal, bold, bolder or lighter.

<Typography fontWeight="700">Bold</Typography>
<Typography fontWeight="bold">Bold</Typography>

We can use the theme to create custom font weights using the typography object.

import React from "react";
import { Typography, createTheme, ThemeProvider } from "@mui/material";

const theme = createTheme({
  typography: {
    fontWeightRegular: 400,
    fontWeightMedium: 700,
    fontWeightBold: 900,
  },
});

export default function MuiTypographyFontWeightCustom() {
  return (
    <ThemeProvider theme={theme}>
      <Typography fontWeight="fontWeightRegular">Regular</Typography>
      <Typography fontWeight="fontWeightMedium">Medium</Typography>
      <Typography fontWeight="fontWeightBold">Bold</Typography>
    </ThemeProvider>
  );
}

Additionally, we can choose to change the font weight of the text to an existing variant weight.

<Typography fontWeight="h1.fontWeight">
  Some text that is the same weight as the h1 variant
</Typography>

Font Family

The fontFamily prop is used to change the text’s font family. It accepts a string value that can be a font family name, generic family name, or a comma-separated list of font family names.

<Typography fontFamily="monospace">Monospace Font</Typography>

We can use the theme to create custom font families using the typography object.

import React from "react";
import { Typography, createTheme, ThemeProvider } from "@mui/material";

const theme = createTheme({
  typography: {
    fontFamilyPrimary: "monospace",
    fontFamilySecondary: "Arial",
  },
});

export default function MuiTypographyFontFamilyCustom() {
  return (
    <ThemeProvider theme={theme}>
      <Typography fontFamily="fontFamilyPrimary">Primary Font</Typography>
      <Typography fontFamily="fontFamilySecondary">Secondary Font</Typography>
    </ThemeProvider>
  );
}

Additionally, we can change the text’s font family to an existing variant font family.

<Typography fontFamily="h1.fontFamily">
  Some text that is the same family as the h1 variant
</Typography>

Text Align

The textAlign prop is used to change the alignment of the text. It accepts a string value and can be one of the following: left, center, right, initial, inherit, or unset.

<Typography textAlign="left">Left</Typography>
<Typography textAlign="center">Center</Typography>
<Typography textAlign="right">Right</Typography>

Letter Spacing

The letterSpacing prop is used to change the spacing between letters. It accepts a string value that can be a pixel value, percentage, em, rem, or any other valid CSS unit.

<Typography letterSpacing="2px">Letter Spacing</Typography>

We can use the theme to create custom letter spacing using the typography object.

import React from "react";
import { createTheme, ThemeProvider, Typography } from "@mui/material";

const theme = createTheme({
  typography: {
    letterSpacingSmall: "1px",
    letterSpacingMedium: "2px",
    letterSpacingLarge: "3px",
  },
});

export default function MuiTypographyLetterSpacingCustom() {
  return (
    <ThemeProvider theme={theme}>
      <Typography letterSpacing={theme.typography.letterSpacingSmall}>
        Small
      </Typography>
      <Typography letterSpacing={theme.typography.letterSpacingMedium}>
        Medium
      </Typography>
      <Typography letterSpacing={theme.typography.letterSpacingLarge}>
        Large
      </Typography>
    </ThemeProvider>
  );
}

Additionally, we can choose to change the spacing between letters to an existing variant spacing.

<Typography letterSpacing={theme => theme.typography.h1.letterSpacing}>
  Some text that has the same letter spacing as the h1 variant
</Typography>

Note, unlike the other style props, the letterSpacing does not support shorthand access to the theme object. We must pass a function to the prop and use the full path to get the value.

Line Height

The lineHeight prop is used to change the height of each line of text. It accepts a string value that can be a pixel value, percentage, em, rem, or any other valid CSS unit.

<Typography lineHeight="2rem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula congue
  convallis. Cras mollis imperdiet quam, vitae euismod nisi fringilla sed.
</Typography>

We can use the theme to create custom line heights using the typography object.

import React from "react";
import { Typography, createTheme, ThemeProvider } from "@mui/material";

const theme = createTheme({
  typography: {
    lineHeightSmall: "1rem",
    lineHeightMedium: "2rem",
    lineHeightLarge: "3rem",
  },
});

export default function MuiTypographyLineHeightCustom() {
  return (
    <ThemeProvider theme={theme}>
      <Typography lineHeight={theme.typography.lineHeightSmall}>
        Small
      </Typography>
      <Typography lineHeight={theme.typography.lineHeightMedium}>
        Medium
      </Typography>
      <Typography lineHeight={theme.typography.lineHeightLarge}>
        Large
      </Typography>
    </ThemeProvider>
  );
}

Additionally, we can choose to change the line height of the text to an existing variant line height.

<Typography lineHeight={theme => theme.typography.h1.lineHeight}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula congue
  convallis. Cras mollis imperdiet quam, vitae euismod nisi fringilla sed.
</Typography>

Note, unlike the other style props, the lineHeight does not support shorthand access to the theme object. We must pass a function to the prop and use the full path to get the value.

Additional Styling

The Typography component props don’t support all CSS properties, so alternatively, we can use the sx prop to apply any CSS styles. Let’s take an example that combines all the styles we covered earlier with some additions, including the text-shadow property.

<Typography
  sx={{
    color: "#cccccc",
    fontSize: "20px",
    fontWeight: 700,
    fontFamily: "Roboto",
    textAlign: "center",
    letterSpacing: "2px",
    lineHeight: "2rem",
    textTransform: "uppercase",
    textShadow: "1px 1px 2px black, 0 0 1em blue, 0 0 0.2em",
    width: "fit-content",
    backgroundColor: "#ccc",
    padding: "5px",
  }}
>
  Custom Text Styling
</Typography>

We can also apply the styles above as a new variant. Let’s create a new variant called fancy with the latest styles.

import React from "react";
import { Typography, createTheme, ThemeProvider } from "@mui/material";

const theme = createTheme({
  typography: {
    fancy: {
      color: "#cccccc",
      fontSize: "20px",
      fontWeight: 700,
      fontFamily: "Roboto",
      textAlign: "center",
      letterSpacing: "2px",
      lineHeight: "2rem",
      textTransform: "uppercase",
      textShadow: "1px 1px 2px black, 0 0 1em blue, 0 0 0.2em",
      width: "fit-content",
      backgroundColor: "#ccc",
      padding: "5px",
    },
  },
});

export default function MuiTypographySxVariant() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="fancy">Custom Text Styling</Typography>
    </ThemeProvider>
  );
}

Finally, MUI Typography can be used as a utility to other components. For example, we can create a Box component and apply a typography style using any defined variants.

<Box
  component="span"
  sx={{
    typography: "h4",
    color: "primary.main",
  }}
>
  Box Typography
</Box>

This will render a span element with the h4 variant styles. So, if we inspect the element in the browser, we can see that the span element has a predefined set of styles.

font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 2.125rem;
line-height: 1.235;
letter-spacing: 0.00735em;

Summary

Working with MUI Typography is easy and offers a lot of flexibility. Here are some of the key takeaways from this tutorial:

We can use the variant prop to render a predefined set of HTML elements.
We can customize the predefined variants using the theme in the typography object.
We can directly modify the color, font size, font weight, font family, text align, letter spacing, and line height styles from the component props.
We can use the sx prop to apply any CSS styles to the text.
We can apply the typography styles on other components.

Bye for now 👋

Spacing, Padding, and Margin with Material UI (MUI)

Applying spacing between components is an essential part of building a UI. One common way is to use CSS padding and margin. MUI spacing provides an efficient way to apply inline padding and margin in components and a theme helper function that allows us to systemize spacing throughout the application.

This tutorial will explore the MUI’s approach to creating spacing and customizing it to fit our design system.

Inline Padding and Margin

MUI sx prop allows us to apply padding and margin to our components with shorthand properties.

For example, when using the normal padding syntax, we would write:

<Box sx={{ paddingRight: "16px" }} />

But with the shorthand syntax, we can write:

<Box sx={{ pr: "16px" }} />

This has the benefit of being shorter and allows us to use the spacing scale defined in the theme. Later in this tutorial, we will explore how to customize the spacing scale.

Here is a list of the available margin and padding properties with the actions they perform:

Padding Properties

Property	Description	Action
`p`	Padding	Applies padding to all sides
`px`	Padding X	Applies padding to the left and right sides
`py`	Padding Y	Applies padding to the top and bottom sides
`pt`	Padding Top	Applies padding to the top side
`pr`	Padding Right	Applies padding to the right side
`pb`	Padding Bottom	Applies padding to the bottom side
`pl`	Padding Left	Applies padding to the left side

Margin Properties

Property	Description	Action
`m`	Margin	Applies margin to all sides
`mx`	Margin X	Applies margin to the left and right sides
`my`	Margin Y	Applies margin to the top and bottom sides
`mt`	Margin Top	Applies margin to the top side
`mr`	Margin Right	Applies margin to the right side
`mb`	Margin Bottom	Applies margin to the bottom side
`ml`	Margin Left	Applies margin to the left side

In the following example, we will add padding to the Box component using the p property and margin to the Typography component using the mx property to center the text content.

import React from "react"
import { Box, Typography } from "@mui/material"
export default function App() {
  return (
    <Box
      sx={{
        p: "16px",
        backgroundColor: "#c9e4d5",
        color: "#fff",
      }}
    >
      <Typography
        sx={{
          backgroundColor: "#6669ad",
          width: "fit-content",
          p: "16px",
          mx: "auto",
        }}
      >
        Hello World
      </Typography>
    </Box>
  )
}

The results above demonstrate how p applies padding to all sides and mx applies margin to the left and right sides of the Typography component.

Theme Spacing

MUI provides a theme helper function to systemize spacing and create consistency all throughout the application. The theme.spacing function returns a value from the spacing scale based on the argument passed to it.

Default Spacing Scale

By default, MUI uses the 8px scaling factor. So, when we pass 1 to the theme.spacing function, it will return 8px. Similarly, when we pass 2, it will return 16px and so on.

Let’s try a simple example to understand how it works. We will create a Box component and apply padding to it using the theme.spacing function.

<Box
  sx={{
    p: theme => theme.spacing(2),
  }}
>
  Hello World
</Box>

The padding value is now 16px, which is the value returned by the theme.spacing function when we pass 2 to it.

To simplify this, we can pass only the number to the p property, and MUI will automatically call the theme.spacing function for us!

<Box
  sx={{
    p: 2, // equivalent to (theme) => theme.spacing(2)
  }}
>
  Hello World
</Box>

Custom Spacing Scale

We can use the spacing property in the theme object to customize the spacing scale and pass it a new value.

import React from "react"
import { createTheme, ThemeProvider, Box } from "@mui/material"

const theme = createTheme({
  spacing: 4,
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          p: 2, // 8px
        }}
      >
        ...
      </Box>
    </ThemeProvider>
  )
}

Now, the padding value is 8px because we have changed the spacing scale to a multiple of 4.

Alternatively, we can pass an array of values to the spacing property to create a custom spacing scale.

import React from "react"
import { createTheme, ThemeProvider, Box } from "@mui/material"

const theme = createTheme({
  spacing: ["0", "4px", "8px", "16px", "32px", "64px"],
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          p: 2, // 8px
        }}
      >
        ...
      </Box>
    </ThemeProvider>
  )
}

When using a custom array, the value passed to the theme.spacing function will be used as an index to return the value from the array. So, when we pass 2, it will return 8px because it is the value at index 2 in the array.

Grid and Flex Gap

Creating spacing is not limited to padding and margin. CSS grid and flex have a gap property for creating spacing between components in a grid or flex layout. Additionally, the value of the gap property is used by the theme.spacing function to utilize the spacing scale.

In the following example, we will create a grid layout with 3 columns using the Grid component. We will use the gap property to create spacing between the grid items.

import React from "react"
import { createTheme, ThemeProvider, Grid, Box } from "@mui/material"

const theme = createTheme({
  spacing: 4,
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container gap={2} wrap="nowrap">
        <Grid item xs={4}>
          <Box
            sx={{
              backgroundColor: "#c9e4d5",
              height: "100px",
            }}
          />
        </Grid>
        <Grid item xs={4}>
          <Box
            sx={{
              backgroundColor: "#c9e4d5",
              height: "100px",
            }}
          />
        </Grid>
        <Grid item xs={4}>
          <Box
            sx={{
              backgroundColor: "#c9e4d5",
              height: "100px",
            }}
          />
        </Grid>
      </Grid>
    </ThemeProvider>
  )
}

Similar to the margin and padding, gap={2} is equivalent to gap={theme => theme.spacing(2)} and will return 8px because we have set the spacing scale to a multiple of 4.

gap can also be used in sx prop to create spacing between flex or grid items without using the Grid component.

<Box
  sx={{
    display: "flex",
    gap: 2,
  }}
>
  ...
</Box>

<Box
  sx={{
    display: "grid",
    gap: 2,
  }}
>
  ...
</Box>

Summary

In this tutorial, we learned how spacing works in MUI using sx inline styles and a custom spacing scale in the theme. It is important to follow and create a spacing system in our application; it makes the UI look more consistent and the code easier to maintain and scale.

Bye for now 👋

Breakpoints and Responsive Design with Material UI (MUI)

Breakpoints are a crucial concept in responsive design. They allow us to define the application’s appearance on different screen sizes. In this tutorial, we will learn how to use and customize Material UI (MUI) breakpoints to create responsive designs.

Using theme breakpoints

We can use the theme object to access the MUI breakpoints when styling components. It’s an object available in the props of all styled-components.

We can access them using the theme.breakpoints object. It has the following keys:

xs: Extra small devices (less than 600px)
sm: Small devices (600px and up)
md: Medium devices (900px and up)
lg: Large devices (1200px and up)
xl: Extra large devices (1536px and up)

Here’s a simple example of how to add the breakpoint styles to a component:

<Box
  sx={(theme) => ({
    textAlign: 'center',
    [theme.breakpoints.up('md')]: { textAlign: 'left' },
  })}
>
  TEXT
</Box>

theme.breakpoints.up('md') is a function that returns a CSS media query string. It’s equivalent to @media (min-width: 900px). So, the above code will set the textAlign to left for screen sizes greater than 900px.

Let’s see another example with a more practical use case. We will create a header component that will align the logo to the left for screen sizes greater than 600px and center it for smaller screen sizes.

import * as React from 'react';
import Typography from '@mui/material/Typography';
import { Stack, Toolbar, AppBar } from '@mui/material';
import LogoDev from '@mui/icons-material/LogoDev';

function ResponsiveHeader() {
  return (
    <AppBar position="static">
      <Toolbar
        sx={(theme) => ({
          [theme.breakpoints.up('xs')]: { justifyContent: 'center' },
          [theme.breakpoints.up('sm')]: { justifyContent: 'left' },
        })}
      >
        <Stack direction="row" alignItems="center">
          <LogoDev fontSize="large" />
          <Typography
            variant="h6"
            sx={{
              ml: 0.5,
            }}
          >
            LOGO
          </Typography>
        </Stack>
      </Toolbar>
    </AppBar>
  );
}
export default ResponsiveHeader;

The example above has a resize handle at the bottom right corner. If we resize the window, we can see the logo move to the center when the screen size is less than 600px.

theme.breakpoints object also provides different options to create media queries. Here’s a list of all the options:

up: min-width
down: max-width
between: between min-width and max-width
only: only the given breakpoint
not: not between min-width and max-width

Using SX shortcut syntax

sx provides a shortcut syntax to access the theme and add component styles. It provides a more straightforward way to add breakpoints. Here’s an example:

<Box
  sx={{
    textAlign: { xs: 'center', md: 'left' },
  }}
>
  TEXT
</Box>

Using md or sm is equivalent to theme.breakpoints.up('md') or theme.breakpoints.up('sm'), and they’re used as a key of the CSS property value. So the above code will set the textAlign to left for screen sizes greater than 900px.

This syntax is cleaner and easier to read, but it has a limitation. We can only use the up option and can’t use down, between or only options.

Let’s create the header example again using the sx shortcut syntax.

import * as React from 'react';
import Typography from '@mui/material/Typography';
import { Stack, Toolbar, AppBar, Box } from '@mui/material';
import LogoDev from '@mui/icons-material/LogoDev';

function ResponsiveHeader() {
  return (
    <AppBar position="static">
      <Toolbar
        sx={{
          justifyContent: { xs: 'center', sm: 'left' },
        }}
      >
        <Stack direction="row" alignItems="center">
          <LogoDev fontSize="large" />
          <Typography
            variant="h6"
            sx={{
              ml: 0.5,
            }}
          >
            LOGO
          </Typography>
        </Stack>
      </Toolbar>
    </AppBar>
  );
}
export default ResponsiveHeader;

Using media query hook

useMediaQuery is a hook that returns a boolean value based on the current screen size. It’s helpful if we want to use JavaScript to access the breakpoints and do more complex logic.

Here’s an example of how to use useMediaQuery hook:

import React from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';

const MyComponent = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <div>
      {isMobile ? (
        <div>Mobile View: More simplified layout or content</div>
      ) : (
        <div>Desktop View: More complex layout or additional content</div>
      )}
    </div>
  );
};

export default MyComponent;

In the above example, we’re using useMediaQuery to check if the screen size is less than 600px. If it’s true, we’re rendering a simplified layout. Otherwise, we’re rendering a more complex layout.

Customizing breakpoints

The breakpoints we used in the previous examples are the default breakpoints provided by MUI. Sometimes, we need to modify the breakpoints to match the design requirements or create new ones.

We can customize the values using the createTheme object.

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
      xxl: 2000,
    },
  },
});

In the above example, we customized the default breakpoints and added a new one called xxl xxl with a value of 2000px. We can now use this breakpoint in our components.

<Box
  sx={(theme) => ({
    textAlign: 'center',
    [theme.breakpoints.up('xxl')]: { textAlign: 'left' },
  })}
>
  TEXT
</Box>

For more details about customizing the theme in MUI, this tutorial delves deeper into the topic: Customizing Theme, Palette, and Colors

Complete example

Let’s create a responsive header component with more features:

The header will have a logo, a navigation menu, and an email contact icon.
The logo will be aligned to the left for screen sizes greater than 600px and centered for smaller screen sizes.
The navigation menu will be aligned next to the logo for screen sizes greater than 600px and hidden for smaller screen sizes.
A menu icon will appear and be aligned to the left for screen sizes smaller than 600px and hidden for larger screen sizes.
The menu icon is just a placeholder for this example and has no functionality, but in a real application, it will open a navigation drawer.

import * as React from 'react';
import Typography from '@mui/material/Typography';
import { Stack, Toolbar, AppBar, Container, Box } from '@mui/material';

import EmailIcon from '@mui/icons-material/Email';
import LogoDev from '@mui/icons-material/LogoDev ';
import MenuIcon from '@mui/icons-material/Menu';

function ResponsiveHeader() {
  return (
    <AppBar position="static">
      <Container>
        <Toolbar
          disableGutters
          sx={{
            justifyContent: 'space-between',
          }}
        >
          <MenuIcon sx={{ display: { xs: 'block', sm: 'none' } }} />
          <Stack direction="row" alignItems="center">
            <LogoDev sx={{ mr: 1, fontSize: { xs: '2rem', sm: '2.6rem' } }} />
            <Typography
              variant="h6"
              sx={{
                mr: 2,
                fontWeight: 700,
                letterSpacing: { xs: '0.1rem', sm: '0.2rem' },
                fontSize: { xs: '1rem', sm: '1.2rem' },
              }}
            >
              LOGO
            </Typography>
            <Stack
              direction="row"
              alignItems="center"
              gap={2}
              sx={{ display: { xs: 'none', sm: 'flex' } }}
            >
              <Typography>Home</Typography>
              <Typography>About</Typography>
              <Typography>Blog</Typography>
            </Stack>
          </Stack>
          <EmailIcon />
        </Toolbar>
      </Container>
    </AppBar>
  );
}

export default ResponsiveHeader;

Summary

In this tutorial, we learned how to use and customize MUI breakpoints to create responsive designs. While MUI provides a simple way to add breakpoints using the theme.breakpoints object, we can also use the sx shortcut syntax or useMediaQuery hook to access the breakpoints. Additionally, we can customize the breakpoints values by using a createTheme object for other screen sizes.

Bye for now 👋

How to Create Global Styles in Material UI (MUI)

In every application, specifically modern front-end apps, we tend to encapsulate styles to a specific component. This great practice helps us avoid style collisions and keep the codebase clean and maintainable. But in certain scenarios, we need to create global styles that can be applied to elements across the entire application. For example, we might need to reset the default styles of the <body> tag or create a global theme that all components can use, and so on.

In this tutorial, we will explore different techniques for creating and applying MUI global styles.

Customizing the theme

The first and most common way to create global styles in MUI is by customizing the theme. The theme is a global object containing all the application styles and configurations. All components use it and can be accessed from anywhere in the application. We’ve covered the theme in more detail in this tutorial.

Let’s create a simple app with a few unstyled components and see the initial result.

import React from "react";
import { Typography, Button, Box } from "@mui/material";

function App() {
  return (
    <Box>
      <Typography variant="h1">Hello, World!</Typography>
      <Typography variant="p">
        This is a paragraph of text that should be affected by the global
        styles.
      </Typography>
      <Button variant="contained" color="primary">
        A Styled Button Contained
      </Button>
      <Button variant="outlined" color="secondary">
        A Styled Button Outlined
      </Button>
      {/* Other components go here */}
    </Box>
  );
}

export default App

In the following example, we’ll demonstrate how to use createTheme and ThemeProvider to set global styles that affect all instances of Typography and Button components.

import React from "react";
import { createTheme, ThemeProvider, Typography, Button, Box } from "@mui/material";

// Create a theme instance with global overrides.
const theme = createTheme({
  components: {
    MuiTypography: {
      styleOverrides: {
        root: {
          fontFamily: "Comic Sans MS, sans-serif"
        },
        h1: {
          fontSize: "2.5rem",
          color: "green"
        },
        p: {
          fontSize: "1.4rem"
        }
      }
    },
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: "8px",
          textTransform: "none",
          fontSize: "1.4rem"
        }
      }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box>
        <Typography variant="h1">Hello, World!</Typography>
        <Typography variant="p">
          This is a paragraph of text that should be affected by the global
          styles.
        </Typography>
        <Button variant="contained" color="primary">
          A Styled Button Contained
        </Button>
        <Button variant="outlined" color="secondary">
          A Styled Button Outlined
        </Button>
        {/* Other components go here */}
      </Box>
    </ThemeProvider>
  );
}

export default App;

What we just did only works for MUI components that are rendered inside ThemeProvider. If we want to apply styles to other HTML elements such as <body> and <html>, we need to use CssBaseline component. This component is used to apply a baseline or reset styles to the document for cross-browser consistency, and it will allow us to style the <body> and <html> elements.

import React from "react";
import {
  createTheme,
  ThemeProvider,
  Typography,
  Button,
  CssBaseline,
  Box
} from "@mui/material";

// Create a theme instance with global overrides.
const theme = createTheme({
  components: {
    MuiTypography: {
      styleOverrides: {
        root: {
          fontFamily: "Comic Sans MS, sans-serif"
        },
        h1: {
          fontSize: "2.5rem",
          color: "green"
        },
        p: {
          fontSize: "1.4rem"
        }
      }
    },
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: "8px",
          textTransform: "none",
          fontSize: "1.4rem"
        }
      }
    },
    MuiCssBaseline: {
      styleOverrides: {
        html: {
          fontSize: "62.5%"
        }
      }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box>
        <Typography variant="h1">Hello, World!</Typography>
        <Typography variant="p">
          This is a paragraph of text that should be affected by the global
          styles.
        </Typography>
        <Button variant="contained" color="primary">
          A Styled Button Contained
        </Button>
        <Button variant="outlined" color="secondary">
          A Styled Button Outlined
        </Button>
        {/* Other components go here */}
      </Box>
    </ThemeProvider>
  );
}

export default App;

In the above example, we reduced the default font size of the <html> element to 62.5%, equivalent to 10px. It’s a common technique used to make the entire document’s font size relative to the browser’s default font size.

Using GlobalStyles Component

The GlobalStyles component is used for injecting global CSS into the document. This is particularly helpful when we want to style HTML elements that are not directly handled by MUI components or for creating our own custom CSS reset.

In the following example, we’ll create a new global object called globalStyles and use it to style the <body> and <html> elements.

import React from "react";
import {
  createTheme,
  ThemeProvider,
  Typography,
  Button,
  CssBaseline,
  GlobalStyles,
  Box
} from "@mui/material";

// Create a theme instance with global overrides.
const theme = createTheme({
  ...
});

const globalStyles = (
  <GlobalStyles
    styles={(theme) => ({
      html: {
        height: "100%",
        fontSize: "62.5%"
      },
      body: {
        margin: 0,
        padding: theme.spacing(2),
        backgroundColor: theme.palette.background.default,
        color: theme.palette.text.primary,
        fontFamily: theme.typography.fontFamily
      }
      // ... You can add more global styles here
    })}
  />
);

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {globalStyles}
      <Box>
        <Typography variant="h1">Hello, World!</Typography>
        <Typography variant="p">
          This is a paragraph of text that should be affected by the global
          styles.
        </Typography>
        <Button variant="contained" color="primary">
          A Styled Button Contained
        </Button>
        <Button variant="outlined" color="secondary">
          A Styled Button Outlined
        </Button>
        {/* Other components go here */}
      </Box>
    </ThemeProvider>
  );
}

export default App;

If we want to style MUI components, we can use CSS selectors to target them. For example, we can use the following selector to style all MUI Button components.

const globalStyles = (
  <GlobalStyles
    styles={(theme) => ({
      ...
      ".MuiButton-root": {
        margin: theme.spacing(1)
      }
    })}
  />
);

But in general, createTheme is a better approach for styling MUI components as it provides a more intuitive API to override styles.

However, GlobalStyles would be a better option for styling elements outside the MUI components tree, especially if we create a custom CSS reset.

Styling Parent/Root Component

Another way to create global styles is through the parent or root component, which is an excellent approach if we want to style a subset of components or apply a common layout to all pages in the application.

In the following example, we’ll create a boxed layout component with a maximum width of 1200px centered horizontally along with other global styles.

import React from "react";
import {
  createTheme,
  ThemeProvider,
  Typography,
  Button,
  CssBaseline,
  Box
} from "@mui/material";

// Create a theme instance with global overrides.
const theme = createTheme({
  ...
});

const globalStyles = (
  ...
);

const Layout = ({ children }) => {
  return (
    <Box
      sx={{
        padding: (theme) => theme.spacing(2),
        maxWidth: "1200px",
        margin: "0 auto",
        border: "1px solid #ccc",
      }}
    >
      {children}
    </Box>
  );
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {globalStyles}
      <Layout>
        <Typography variant="h1">Hello, World!</Typography>
        <Typography variant="p">
          This is a paragraph of text that should be affected by the global
          styles.
        </Typography>
        <Button variant="contained" color="primary">
          A Styled Button Contained
        </Button>
        <Button variant="outlined" color="secondary">
          A Styled Button Outlined
        </Button>
        {/* Other components go here */}
      </Layout>
    </ThemeProvider>
  );
}

export default App;

We can still use CSS selectors to target MUI components globally, as in the previous section.

const Layout = ({ children }) => {
  return (
    <Box
      sx={{
        ...
        ".MuiButton-root": {
          margin: theme.spacing(1)
        }
      }}
    >
      {children}
    </Box>
  );
};

Conclusion & Complete Code

Looking at the different techniques we explored in this tutorial, we can see that there is no single way to create global styles in MUI, but the best approach is to use them all!

Each has its use cases and benefits. For example, we can use the createTheme to create and override styles that all MUI components can use. Then, we can use the GlobalStyles component to style elements outside the MUI components tree. Finally, we can use the parent/root component to create a common layout for all pages.

Here is the complete code for all the examples in this tutorial.

Bye for now 👋

[Part 4] Read and Write Table Data with API Requests using React Tanstack

In the previous parts of this series, we learned how to create an editable dynamic table, add and remove rows dynamically, and validate input fields and rows. So far, we have been working with the table data in an object array. In this part, we will learn how to read and write table data with API requests using JSON Server and SWR.

JSON Server is a fake REST API that we can use to test our API requests.
SWR is a React hook for data fetching that makes it easy to fetch and revalidate data.

Setup and install dependencies

Before we get started, let’s install the dependencies we need for this part.

# Install JSON Server
npm install -g json-server

# Install SWR
npm install swr

For JSON Server to work, we need to create a db.json file. This file will contain the data we want to fetch and update. In our case, it will be the list of students.

Let’s create a new db.json file in the src/Table folder and add the following data

{
  "students": [
    {
      "id": 1,
      "studentNumber": 1111,
      "name": "Bahar Constantia",
      "dateOfBirth": "1984-01-04",
      "major": "Computer Science"
    },
    {
      "id": 2,
      "studentNumber": 2222,
      "name": "Harold Nona",
      "dateOfBirth": "1961-05-10",
      "major": "Communications"
    },
    {
      "id": 3,
      "studentNumber": 3333,
      "name": "Raginolf Arnulf",
      "dateOfBirth": "1991-10-12",
      "major": "Business"
    },
    {
      "id": 4,
      "studentNumber": 4444,
      "name": "Marvyn Wendi",
      "dateOfBirth": "1978-09-24",
      "major": "Psychology"
    }
  ]
}

Notice that we added a new id field to each student object. This field will be used as a unique identifier for JSON Server to update and delete data. We also changed the studentId field to studentNumber to distinguish it from the id field.

To get the JSON Server up and running, we need to run the following command in the terminal.

json-server --watch ./src/Table/db.json --port 5000

This will run a server on port 5000 and serve the data in the db.json file. We can access the data by visiting http://localhost:5000/students.

An alternative way to running two servers (React and JSON Server) separately in two terminals is to use Concurrently. It’s a package that allows us to run multiple commands concurrently.

First, let’s install the package.

npm install concurrently

Then, we need to add a new script to the package.json file to enable us to run both servers concurrently.

"scripts": {
  "vite": "vite",
  "jsonserver": "json-server ./src/Table/db.json --watch --port 5000",
  "dev": "concurrently \"npm run jsonserver\" \"npm run vite\"",
  ...
}

Now, when running the project normally using npm run dev, both servers will run simultaneously.

Fetch data using SWR

Now that we have the JSON Server running let’s start working with the API requests.

Before we start, we need to make a few changes to accommodate the new data structure.

The Student type interface in data.ts must be updated to match the data in the db.json file.

export type Student = {
  id: number
  studentNumber: number
  name: string
  dateOfBirth: string
  major: string
}

Since the data is now stored in a JSON file, we don’t require the data object array in data.ts anymore. We only need the Student type interface. To make the code cleaner, let’s move the Student type to a new types.ts file in the “Table” folder. So now the /data reference in the Table component will be changed to /types.

import { Student } from './types';

The columns array in columns.ts needs to be updated to match the new Student type interface

...
import { Student } from './types';
...
export const columns = [
  columnHelper.accessor('studentNumber', {
    header: 'Student Id',
    cell: TableCell,
    meta: {
      type: 'number',
    },
  }),
  ...
]

We’re all set with the changes. Let’s start fetching the data.

First, we will create a new useStudents hook. This hook will be responsible for fetching the data and other operations related to the students using the useSWR. Here are few things to note:

When using useSWR hook, it accepts two parameters. The first parameter is the URL that will be used to fetch the data. In our case, it will be http://localhost:5000/students. The second parameter is the getRequest function that will be used to fetch the data.
The useStudents hook will expose the student’s data array, isValidating variable to the component that uses it. isValidating will be used to know if the data is being fetched. It’s similar to isLoading, but it’s triggered on mutations as well.

import useSWR from 'swr';

const url = 'http://localhost:5000/students';

async function getRequest() {
  const response = await fetch(url);
  return response.json();
}

export default function useStudents() {
  const { data, isValidating } = useSWR(url, getRequest);

  return {
    data: data ?? [],
    isValidating,
  };
}

Then, we will use the useStudents hook in the Table component to fetch the data, replacing the originalData array we had in the previous parts.

A quick recap, the originalData array is the array that contains the original data and is used to initialize the data array. The reason we had to do this is because we need to keep the previous data in case the user cancels the changes. Now, since the originalData is coming from the server, we can remove the one we had before.

import { useEffect, useState } from "react";
...
import useStudents from "./useStudents";

export const Table = () => {
 const { data: originalData, isValidating } = useStudents();
 const [data, setData] = useState<Student[]>([]);
 const [editedRows, setEditedRows] = useState({});
 const [validRows, setValidRows] = useState({});
 
 useEffect(() => {
   if (isValidating) return;
   setData([...originalData]);
 }, [isValidating]);

 ...
};

And since we don’t know when the data will be ready, we had to add a useEffect hook to update the data array when the originalData changes. That’s when the isValidating variable comes in handy. It will be true when the data is being fetched and false when it is ready.

Of course, we can always add a loading indicator to improve the user experience, but this is out of the scope of this tutorial.

Now, if we run the project and open the browser network tab, we will see that the data is being fetched from the server.

Note: Other parts of the code might be borken at this point, this is expected and will be fixed in the next steps. We can always comment out the errors if it’s stopping us from running the project.

Update data

Updating a table row requires a new PUT request to the server with few additional steps:

The update function requires two parameters. The first parameter is the id of the row that will be updated. The second parameter is row data that needs to be updated.
We need to expose the update function from the useStudents hook so the Table component can use it.
After updating the data, we need to trigger a mutate function to update the originalData array. The mutate is a built-in function in SWR that allows us to sync and revalidate the data.

import useSWR, { mutate } from 'swr';
import { Student } from './types';

const url = 'http://localhost:5000/students';

async function updateRequest(id: number, data: Student) {
  const response = await fetch(`${url}/${id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

async function getRequest() {
  const response = await fetch(url);
  return response.json();
}

export default function useStudents() {
  const { data, isValidating } = useSWR(url, getRequest);

  const updateRow = async (id: number, postData: Student) => {
    await updateRequest(id, postData);
    mutate(url);
  };

  return {
    data: data ?? [],
    isValidating,
    updateRow
  };
}

In the Table compoennt, we have two functions that updates the data. The first one is the updateData that is triggered on cell input change, and it updates the data array at the specified row index. The second is the revertData, which is triggered when the user clicks the cancel/save button, and it either reverts the changes or keeps them and updates the originalData. Here is the current code we have from the previous parts.

const table = useReactTable({
  ...
  revertData: (rowIndex: number, revert: boolean) => {
        if (revert) {
          setData((old) =>
            old.map((row, index) =>
              index === rowIndex ? originalData[rowIndex] : row
            )
          );
        } else {
          setOriginalData((old) =>
            old.map((row, index) => (index === rowIndex ? data[rowIndex] : row))
          );
        }
      },
    ...
  }
)

Now, since we need to update the data on the server, we will change the code above and create a separate function called updateRow that will trigger the updateRow function from the useStudents hook.

...
export const Table = () => {
  const { data: originalData, isValidating, updateRow } = useStudents();
  ...
  const table = useReactTable({
    ...
    revertData: (rowIndex: number) => {
      setData((old) =>
        old.map((row, index) =>
          index === rowIndex ? originalData[rowIndex] : row
        )
      );
    },
    updateRow: (rowIndex: number) => {
      updateRow(data[rowIndex].id, data[rowIndex]);
    },
    ...
  })
}

Notice that the setOriginalData function is no longer needed since we are updating the data on the server, which in return will automatically update the originalData array.

Lastly, in the EditCell component, we need to update the setEditedRows to include the updateRow function for the save button.

...
export const EditCell = ({ row, table }) => {
  ...
  const setEditedRows = (e: MouseEvent<HTMLButtonElement>) => {
    const elName = e.currentTarget.name;
    meta?.setEditedRows((old: []) => ({
      ...old,
      [row.id]: !old[row.id],
    }));
    if (elName !== "edit") {
      e.currentTarget.name === "cancel" ? meta?.revertData(row.index) : meta?.updateRow(row.index);
    }
  };
 ...
};

Below is a video of the update process with the network tab open to demonstrate the API request.

Create data

Adding a new row is similar to the updating approach except that the API request will be a POST method.

Let’s create two functions, one for the API request and the other for the hook that will be used in the Table component.

import useSWR, { mutate } from 'swr';
import { Student } from './types';

const url = 'http://localhost:5000/students';

async function updateRequest(id: number, data: Student) {
  const response = await fetch(`${url}/${id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

async function addRequest(data: Student) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

async function getRequest() {
  const response = await fetch(url);
  return response.json();
}

export default function useStudents() {
  const { data, isValidating } = useSWR(url, getRequest);

  const updateRow = async (id: number, postData: Student) => {
    await updateRequest(id, postData);
    mutate(url);
  };

  const addRow = async (postData: Student) => {
    await addRequest(postData);
    mutate(url);
  };

  return {
    data: data ?? [],
    isValidating,
    addRow,
    updateRow
  };
}

Previously, in the Table component, we used to update both data and originalData with newly added rows.

const table = useReactTable({
  ...
  addRow: () => {
  const newRow: Student = {
    studentId: Math.floor(Math.random() * 10000),
    name: "",
    dateOfBirth: "",
    major: "",
  };
  const setFunc = (old: Student[]) => [...old, newRow];
    setData(setFunc);
    setOriginalData(setFunc);
  },
 ...
})

Now, since we are adding the data to the server, we only need to trigger the addRow function from the useStudents hook. We don’t need any of the set functions anymore because after the adding request, the mutate function will update the originalData array and consequently, the useEffect hook will update the data array.

...
export const Table = () => {
  const { data: originalData, isValidating, addRow, updateRow } = useStudents();
  ...
  const table = useReactTable({
    ...
    addRow: () => {
      const id = Math.floor(Math.random() * 10000);
      const newRow: Student = {
        id,
        studentNumber: id,
        name: "",
        dateOfBirth: "",
        major: ""
      };
      addRow(newRow);
    },
    ...
  })
  ...
}

Additionally, we added an id field to the newRow object. Below is a video of the add process with the network tab open to demonstrate the API request.

Delete data

At this point, we have the useStudents hook responsible for fetching, updating, and adding data. The last thing we need to do is to add the delete functionality.

Let’s create a new function called deleteRequest that will be responsible for the API request and then add it to the useStudents hook.

import useSWR, { mutate } from 'swr';
import { Student } from './types';

const url = 'http://localhost:5000/students';

async function updateRequest(id: number, data: Student) {
  const response = await fetch(`${url}/${id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

async function addRequest(data: Student) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

async function deleteRequest(id: number) {
  const response = await fetch(`${url}/${id}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
    }
  });
  return response.json();
}

async function getRequest() {
  const response = await fetch(url);
  return response.json();
}

export default function useStudents() {
  const { data, isValidating } = useSWR(url, getRequest);

  const updateRow = async (id: number, postData: Student) => {
    await updateRequest(id, postData);
    mutate(url);
  };

  const deleteRow = async (id: number) => {
    await deleteRequest(id);
    mutate(url);
  };

  const addRow = async (postData: Student) => {
    await addRequest(postData);
    mutate(url);
  };

  return {
    data: data ?? [],
    isValidating,
    addRow,
    updateRow,
    deleteRow
  };
}

Then, in the Table component, similar to the previous step, we’re removing the set functions and triggering the deleteRow function from the useStudents hook.

...
export const Table = () => {
  const { data: originalData, isValidating, addRow, updateRow, deleteRow } = useStudents();
  ...
  const table = useReactTable({
    ...
    removeRow: (rowIndex: number) => {
      deleteRow(data[rowIndex].id);
    },
    ...
  })
  ...
}

Lastly, since we enabled removing multiple rows in the previous part, we need to update the removeSelectedRows function to loop through each row and trigger the deleteRow function.

...
export const Table = () => {
  const { data: originalData, isValidating, addRow, updateRow, deleteRow } = useStudents();
  ...
  const table = useReactTable({
    ...
    removeRow: (rowIndex: number) => {
      deleteRow(data[rowIndex].id);
    },
    removeSelectedRows: (selectedRows: number[]) => {
      selectedRows.forEach((rowIndex) => {
        deleteRow(data[rowIndex].id);
      });
    },
    ...
  })
  ...
}

Below is a video of the delete process with the network tab open to demonstrate the API request.

Complete code

The complete code is available in this repository. If you liked the tutorial, please star the repository, and feel free to request new features!

Summary

In this part, we learned how to read and write table data with API requests using React Tanstack. We used JSON Server to create a fake REST API and SWR to fetch and revalidate data. We also learned how to update, add, and delete data from the server.

Bye for now 👋

[Part 3] Validate Table Rows and Fields Using React Tanstack

In the previous part, we learned how to add and remove table rows using React Tanstack. In this part, we will learn how to validate table rows and fields such as required input, date, select, and other custom validations.

Below is a short video of how we want the table to look and behave at the end of this tutorial:

As we continue building upon the same code from the previous part, it’s recommended that you go through previous parts to understand how the code structure works as we will not be explaining it here. You can navigate to any part using the table of contents.

Input Validation

In this section, we will utilize the native HTML5 input validation. We will use the required attribute to validate the required fields. We will also use the pattern attribute to validate more complex scenarios.

Required Fields

Adding required attribute is a straightforward way to validate the required fields. The attribute is a boolean, meaning it does not require a value. It only needs to be present in the element to validate the field.

We can add it directly to the input element in the TableCell component.

<input
  value={value}
  onChange={e => setValue(e.target.value)}
  onBlur={onBlur}
  type={columnMeta?.type || "text"}
  required
/>

Also, when the validation is triggered, an :invalid pseudo-class will be added to the input element. We can use this pseudo-class to style the input element.

input:invalid {
  border: 2px solid red;
}

Now, if we try the demo below, we will see that an empty field will be highlighted with a red border.

The approach we used above is simple. However, it has a limitation. All fields will be validated, even the ones that are not required. To solve this problem, we will add a required property to the column definition in the column.ts file.

...

export const columns = [
  ...

  columnHelper.accessor('name', {
    header: 'Full Name',
    cell: TableCell,
    meta: {
      type: 'text',
      required: true,
    },
  })

...
]

Then, in the TableCell component, we will check if the required property is present in the columnMeta object. This way, only the fields with the required property will be validated.

...

export const TableCell = ({ getValue, row, column, table }) => {
  ...

  const columnMeta = column.columnDef.meta;

  ...

  if (tableMeta?.editedRows[row.id]) {
    return columnMeta?.type === "select" ? (
      <select
        onChange={onSelectChange}
        value={initialValue}
      >
        {columnMeta?.options?.map((option: Option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    ) : (
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={onBlur}
        type={columnMeta?.type || "text"}
        required={columnMeta?.required}
      />
    );
  }
  return <span>{value}</span>;
};

The above demo shows how the required property is only triggered on the “name” field.

Select Validation

The select validation is similar to the previous validation. We will use the required attribute to validate the select field, but we must add an empty option to the select element to make it work. Also, we will use the :invalid pseudo-class to style the select element.

...

export const columns = [
 ...

  columnHelper.accessor('major', {
    header: 'Major',
    cell: TableCell,
    meta: {
      type: 'select',
      required: true,
      options: [
        { value: '', label: 'Select' },
        { value: 'Computer Science', label: 'Computer Science' },
        { value: 'Communications', label: 'Communications' },
        { value: 'Business', label: 'Business' },
        { value: 'Psychology', label: 'Psychology' },
      ],
    },
  }),
  columnHelper.display({
    id: 'edit',
    cell: EditCell,
  }),
]

...

export const TableCell = ({ getValue, row, column, table }) => {
  ...

  const columnMeta = column.columnDef.meta;
  
  ...

  if (tableMeta?.editedRows[row.id]) {
    return columnMeta?.type === "select" ? (
      <select
        onChange={onSelectChange}
        value={initialValue}
        required={columnMeta?.required}
      >
        {columnMeta?.options?.map((option: Option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    ) : (
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={onBlur}
        type={columnMeta?.type || "text"}
        required={columnMeta?.required}
      />
    );
  }
  return <span>{value}</span>;
};

select:invalid, input:invalid {
  border: 2px solid red;
}

Let’s test it in the demo below. When changing the “major” field to “Select”, we will see that the field will be highlighted with a red border.

Pattern Validation

The pattern validation uses regular expressions to validate the input field. A good example of this is the “name” field. We want to validate that the name only contains letters and spaces.

Let’s introduce a new property called pattern in the column.ts file with a regex value.

...

export const columns = [
  ...

  columnHelper.accessor('name', {
    header: 'Full Name',
    cell: TableCell,
    meta: {
      type: 'text',
      required: true,
      pattern: '^[a-zA-Z ]+$',
    },
  }),

  ...
]

Then, in the TableCell component, we will add the pattern property to the input element. The value will come from the columnMeta object.

...

export const TableCell = ({ getValue, row, column, table }) => {
  ...

  const columnMeta = column.columnDef.meta;

  ...

  if (tableMeta?.editedRows[row.id]) {
    return columnMeta?.type === "select" ? (
      <select
        onChange={onSelectChange}
        value={initialValue}
        required={columnMeta?.required}
      >
        {columnMeta?.options?.map((option: Option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    ) : (
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={onBlur}
        type={columnMeta?.type || "text"}
        required={columnMeta?.required}
        pattern={columnMeta?.pattern}
      />
    );
  }
  return <span>{value}</span>;
};

Now, in the demo below, we will see that the “name” field will be validated using the regex pattern and only accept letters and spaces.

Display Validation Message

Previously, we added a red border to the input element when the validation was triggered, but we did not display any validation message.

To display the validation message, we can use the title attribute of the input element to show the validation message when the user hovers over the input element.

Then, we will need to add a new state to the TableCell component to store the validation message and a new function to set the value. Both onBlur and onChange events will trigger the function.

Below is the full code of the TableCell component.

...

export const TableCell = ({ getValue, row, column, table }) => {
 import { useState, useEffect, ChangeEvent } from "react";
 import "./table.css";

type Option = {
  label: string;
  value: string;
};

export const TableCell = ({ getValue, row, column, table }) => {
  const initialValue = getValue();
  const columnMeta = column.columnDef.meta;
  const tableMeta = table.options.meta;
  const [value, setValue] = useState(initialValue);
  const [validationMessage, setValidationMessage] = useState("");

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const onBlur = (e: ChangeEvent<HTMLInputElement>) => {
    displayValidationMessage(e);
    tableMeta?.updateData(row.index, column.id, value);
  };

  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    displayValidationMessage(e);
    setValue(e.target.value);
    tableMeta?.updateData(row.index, column.id, e.target.value);
  };

  const displayValidationMessage = <
    T extends HTMLInputElement | HTMLSelectElement
  >(
    e: ChangeEvent<T>
  ) => {
    if (e.target.validity.valid) {
      setValidationMessage("");
    } else {
      setValidationMessage(e.target.validationMessage);
    }
  };

  if (tableMeta?.editedRows[row.id]) {
    return columnMeta?.type === "select" ? (
      <select
        onChange={onSelectChange}
        value={initialValue}
        required={columnMeta?.required}
        title={validationMessage}
      >
        {columnMeta?.options?.map((option: Option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    ) : (
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={onBlur}
        type={columnMeta?.type || "text"}
        required={columnMeta?.required}
        pattern={columnMeta?.pattern}
        title={validationMessage}
      />
    );
  }
  return <span>{value}</span>;
};

Now, in the demo below, if we enter an invalid value in the “name” field and hover over it, we will see the validation message.

Note that using title attribute might not be the best way to display the validation message because of the limited styling options. We can always create a customomized tooltip or use a third-party library such as react-tooltip, but this is out of the scope of this tutorial.

Custom Validation

The custom validation is useful when we want to validate the field using a more complex logic and using regex might add more complexity to the code. Let’s take the date as an example. We want to validate that the date is not in the future.

To do this, we will add a new property called validate in the column.ts file with a callback function that has the validation logic. The function will return a boolean value. Also, we will add a new property called validationMessage to display the custom validation message.

...

export const columns = [
  ...

  columnHelper.accessor('date', {
    header: 'Date',
    cell: TableCell,
    meta: {
      type: 'date',
      required: true,
      validate: (value: string) => {
        const date = new Date(value);
        const today = new Date();
        return date <= today;
      },
      validationMessage: 'Date cannot be in the future',
    },
  }),

  ...
]

Then, in the displayValidationMessage function, we will check if the validate property is present in the columnMeta object. If it is, we will call the validate function and set the new validationMessage state.

import { useState, useEffect, ChangeEvent } from "react";
import "./table.css";

type Option = {
  label: string;
  value: string;
};

export const TableCell = ({ getValue, row, column, table }) => {
  ...

  const displayValidationMessage = <
    T extends HTMLInputElement | HTMLSelectElement
  >(
    e: ChangeEvent<T>
  ) => {
    if (columnMeta?.validate) {
      const isValid = columnMeta.validate(e.target.value);
      if (isValid) {
        e.target.setCustomValidity("");
        setValidationMessage("");
      } else {
        e.target.setCustomValidity(columnMeta.validationMessage);
        setValidationMessage(columnMeta.validationMessage);
      }
    } else if (e.target.validity.valid) {
      setValidationMessage("");
    } else {
      setValidationMessage(e.target.validationMessage);
    }
  };

  ...
  }
  return <span>{value}</span>;
};

Notice that we used the setCustomValidity function. Since we are using the native HTML5 validation, we need to use the setCustomValidity function to trigger the :invalid pseudo-class for the styling.

In the demo below, we will see that the “date” field will be validated using the custom validation if the date is in the future.

Row Validation

The row validation is useful when we want to validate the row as a whole. For example, we want to disable the save button if there is an invalid field in the row to avoid saving invalid data.

Since the save button is in a different component, we will need to add a new validRows state in the Table component to store the valid rows and pass it to the table meta. In addition, we will update the validRows state in the updateData function, which will have a new isValid parameter.

import { useState } from "react";
import { Student, data as defaultData } from "./data";
import "./table.css";

import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { columns } from "./columns";
import { FooterCell } from "./FooterCell";

export const Table = () => {
  ...

  const [validRows, setValidRows] = useState({});

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    enableRowSelection: true,
    meta: {
      ...
      validRows,
      setValidRows,
      ...
      updateData: (rowIndex: number, columnId: string, value: string, isValid: boolean) => {
        setData((old) =>
          old.map((row, index) => {
            if (index === rowIndex) {
              return {
                ...old[rowIndex],
                [columnId]: value,
              };
            }
            return row;
          })
        );
        setValidRows((old) => ({
          ...old,
          [rowIndex]: { ...old[rowIndex], [columnId]: isValid },
        }));
      },
      ...
    },
  });
  ...
};

A quick clarification to what the setValidRows is doing, it is updating the validRows state by adding a new key-value pair to the object. The key is the row index, and the value is an object with the column id as the key and the validation status as the value.

Below is a JSON representation of the validRows state.

{
  "0": {
    "name": true,
    "major": true,
    "date": false
  },
  "1": {
    "name": true,
    "major": false,
    "date": true
  },
  ...
}

Now that the updateData has a new isValid parameter, we will need to update the TableCell component to pass the isValid parameter to the updateData function.

...

export const TableCell = ({ getValue, row, column, table }) => {
  ...

  const onBlur = (e: ChangeEvent<HTMLInputElement>) => {
    displayValidationMessage(e);
    tableMeta?.updateData(row.index, column.id, value, e.target.validity.valid);
  };

  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    displayValidationMessage(e);
    setValue(e.target.value);
    tableMeta?.updateData(row.index, column.id, e.target.value, e.target.validity.valid);
  };

  ...
};

Finally, we will update the EditCell component to disable the save button if there is an invalid field in the current row. We will also style the save button to indicate that it is disabled.

import { MouseEvent } from "react";

export const EditCell = ({ row, table }) => {
  const meta = table.options.meta;
  const validRow = meta?.validRows[row.id];
  const disableSubmit = validRow ? Object.values(validRow)?.some(item => !item) : false;

  ...

  return (
    <div className="edit-cell-container">
      {meta?.editedRows[row.id] ? (
        <div className="edit-cell-action">
          <button onClick={setEditedRows} name="cancel">
            ⚊
          </button>{" "}
          <button onClick={setEditedRows} name="done" disabled={disableSubmit}>
            ✔
          </button>
        </div>
      ) : (
        <div className="edit-cell-action">
          <button onClick={setEditedRows} name="edit">
            ✐
          </button>
          <button onClick={removeRow} name="remove">
            X
          </button>
        </div>
      )}
      <input
        type="checkbox"
        checked={row.getIsSelected()}
        onChange={row.getToggleSelectedHandler()}
      />
    </div>
  );
};

table .edit-cell-action button[name='done']:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

Here is the final demo of the table, when we try to save an invalid row, we will see that the save button is disabled.

Complete code and live demo

The complete code is available in this repository. If you liked the tutorial, please star the repository, and feel free to request new features!

Alternatively, you can try the code in the live demo below:

Summary

In this part, we learned how to validate table rows and fields using React Tanstack. We learned how to validate required fields, select fields, and custom validations. We also learned how to display validation messages and disable the save button if there is an invalid field in the row.

Bye for now 👋

[Part 2] Add and Remove Table Rows with React TanStack

In the previous part, we went through a detailed approach to creating an editable React table with a dynamic column schema. We also utilized TanStack Table to simplify the process. The code from the previous part is available here in Stackblitz.

In this part, we will continue building on what we’ve done previously and add the ability to remove and add table rows with multiple row selections.

Below is a short video of how we want the table to look and behave at the end of this tutorial:

As we continue building upon the same code from the previous part, it’s recommended that you go through the first tutorial to understand how the code structure works as we will not be explaining it here. You can navigate to any part using the table of contents.

Add table row

To enable adding table rows, we must add an “Add Row” button and then create the logic to insert an empty row into the data array.

Let’s start by adding the logic to insert the row in the main table component. Like the previous approach, we’ll attach the function in the meta object in the useReactTableHook. This way, we can access it anywhere through the main table object:

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      editedRows,
      setEditedRows,
      revertData: (...) => {
        ...
      },
      updateData: (...) => {
        ...
      },
      addRow: () => {
        const newRow: Student = {
          studentId: Math.floor(Math.random() * 10000),
          name: "",
          dateOfBirth: "",
          major: "",
        };
        const setFunc = (old: Student[]) => [...old, newRow];
        setData(setFunc);
        setOriginalData(setFunc);
      },
    },
  });

Note that we also updated the originalData array, as we need to keep them in sync for the cancel/save row functionality discussed in the first part.

Now, we can create a Footer Cell component with a button and event handler to consume the addRow function.

export const FooterCell = ({ table }) => {
  const meta = table.options.meta

  return (
    <div className="footer-buttons">
      <button className="add-button" onClick={meta?.addRow}>
        Add New +
      </button>
    </div>
  )
}

Lastly, we need to display the FooterCell component somewhere on the table for the user to consume. There are multiple options, but adding it to the footer’s main table can be a good place as it will feel more integrated.

import { FooterCell } from '../Table/FooterCell';

export const Table = () => {
  const [data, setData] = useState(() => [...defaultData]);
  const [originalData, setOriginalData] = useState(() => [...defaultData]);
  const [editedRows, setEditedRows] = useState({});

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      editedRows,
      setEditedRows,
      revertData: (...) => {
       ...
      },
      updateData: (...) => {
        ...
      },
      addRow: () => {
        const newRow: Student = {
          studentId: Math.floor(Math.random() * 10000),
          name: "",
          dateOfBirth: "",
          major: "",
        };
        const setFunc = (old: Student[]) => [...old, newRow];
        setData(setFunc);
        setOriginalData(setFunc);
      },
    },
  });

  return (
    <article className="table-container">
      <table>
        <thead>
          ...
        </thead>
        <tbody>
          ...
        </tbody>
        <tfoot>
          <tr>
            <th colSpan={table.getCenterLeafColumns().length} align="right">
              <FooterCell table={table} />
            </th>
          </tr>
        </tfoot>
      </table>
    </article>
  );
};

Below is a live example of the code above with some button styling:

table .footer-buttons button {
  border: none;
  background-color: transparent;
}

table .add-button {
  color: #4bbd7f;
}

Remove table row

Removing table rows will follow the same approach as the previous section. Let’s start by adding the removeRow function, a simple one-liner filter method to remove the row from the data and original data arrays.

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      editedRows,
      setEditedRows,
      revertData: (...) => {
        ...
      },
      updateData: (...) => {
        ...
      },
      addRow: () => {
        ...
      },
      removeRow: (rowIndex: number) => {
        const setFilterFunc = (old: Student[]) =>
          old.filter((_row: Student, index: number) => index !== rowIndex);
        setData(setFilterFunc);
        setOriginalData(setFilterFunc);
      },
    },
  });

For the “Remove” button, creating a new component wouldn’t be necessary as it will reside next to the “Edit” button in the EditCell component.

Now, we can add a removeRow function in the EditCell component and call it on the “Remove” button’s onClick event.

export const EditCell = ({ row, table }) => {
  const meta = table.options.meta;

  const setEditedRows = (...) => {
   ...
  };

  const removeRow = () => {
    meta?.removeRow(row.index);
  };

  return (
    <div className="edit-cell-container">
      {meta?.editedRows[row.id] ? (
        <div className="edit-cell-action">
          <button onClick={setEditedRows} name="cancel">
            ⚊
          </button>{" "}
          <button onClick={setEditedRows} name="done">
            ✔
          </button>
        </div>
      ) : (
        <div className="edit-cell-action">
          <button onClick={setEditedRows} name="edit">
            ✐
          </button>
          <button onClick={removeRow} name="remove">
            X
          </button>
        </div>
      )}
    </div>
  );
};

Note that we changed the “Cancel” icon to a minus sign (⚊) and the “Remove” icon to a cross (X) for better clarity.

Below is a live demo of the code above with some button styling and alignment:

table .edit-cell-action button[name="edit"] {
  color: #ffb918;
}

table .edit-cell-action button[name="cancel"] {
  color: #7b7b7b;
}

table .edit-cell-action button[name="done"] {
  color: #4bbd7f;
}

table .edit-cell-action button[name="remove"] {
  color: red;
  background-color: rgb(230, 208, 208);
}
table .edit-cell-action {
  display: flex;
  gap: 5px;
}

Remove multiple table rows

It’s always helpful to select and remove multiple rows at once. Luckily, row selection is available out of the box from TanStack Table. All we need to do is enable the feature and pass in the proper methods; it will manage the rest for us.

First, we’ll add enableRowSelection in useReactTable and create a new removeSelectedRows function. The function will receive an array of selected row IDs and filter them out from the data array.

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  enableRowSelection: true,
  meta: {
    editedRows,
    setEditedRows,
    revertData: (...) => {
      ...
    },
    updateData: (...) => {
      ...
    },
    addRow: () => {
      ...
    },
    removeRow: (...) => {
      ...
    },
    removeSelectedRows: (selectedRows: number[]) => {
      const setFilterFunc = (old: Student[]) =>
        old.filter((_row, index) => !selectedRows.includes(index));
      setData(setFilterFunc);
      setOriginalData(setFilterFunc);
    },
  },
});

Then, in the EditCell component, we’ll add a checkbox input with the appropriate props to capture and update the selected rows. The event handlers are coming from the row object available for us from the useReactTable hook.

export const EditCell = ({ row, table }) => {
  const meta = table.options.meta;

  const setEditedRows = (...) => {
    ...
  };

  const removeRow = () => {
    meta?.removeRow(row.index);
  };

  return (
    <div className="edit-cell-container">
      {meta?.editedRows[row.id] ? (
        <div className="edit-cell-action">
          <button onClick={setEditedRows} name="cancel">
            ⚊
          </button>{" "}
          <button onClick={setEditedRows} name="done">
            ✔
          </button>
        </div>
      ) : (
        <div className="edit-cell-action">
          <button onClick={setEditedRows} name="edit">
            ✐
          </button>
          <button onClick={removeRow} name="remove">
            X
          </button>
        </div>
      )}
      <input
        type="checkbox"
        checked={row.getIsSelected()}
        onChange={row.getToggleSelectedHandler()}
      />
    </div>
  );
};

Last, we’ll add a new Remove Selected button to the FooterCell component and pass in the removeSelectedRows function from the meta object. The selected rows can be retrieved from the getSelectedRowModel function that has rows property.

export const FooterCell = ({ table }) => {
  const meta = table.options.meta
  const selectedRows = table.getSelectedRowModel().rows

  const removeRows = () => {
    meta.removeSelectedRows(
      table.getSelectedRowModel().rows.map(row => row.index)
    )
    table.resetRowSelection()
  }

  return (
    <div className="footer-buttons">
      {selectedRows.length > 0 ? (
        <button className="remove-button" onClick={removeRows}>
          Remove Selected x
        </button>
      ) : null}
      <button className="add-button" onClick={meta?.addRow}>
        Add New +
      </button>
    </div>
  )
}

Additionally, we added a condition to show the Remove Selected button only if there are selected rows.

Below is the final demo, along with the rest of the styling for the Remove Selected button and check box input:

table .edit-cell-container {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 4px;
}

table input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
table .remove-button {
  color: #e44747;
}

Complete code and live demo

The complete code is available in this repository. If you liked the tutorial, please star the repository, and feel free to request new features!

Alternatively, you can try the code in the live demo below:

Summary

In this tutorial, we learned how to add and remove rows from a React Table. We also learned how to add a checkbox input to select and remove multiple rows with a single click.

Bye for now 👋

Creating an Editable and Dynamic React Table with TanStack

An editable table is an essential component in many applications in the real world. While plenty of excellent React libraries are feature-rich and easy to use for editing tables, most are paid services or need to be customized to fit business requirements.

In this tutorial, we’ll go through all the steps to create a dynamic editable table using TanStack Table, a Headless UI library for building robust tables and data grids in React. Since it’s just a utility, we have complete control over the UI structure and editable elements. We will be covering some of the basics, but having some basic knowledge is recommended.

The aim is to design a flexible enough component where we can provide the data source with the columns schema, and the table can adapt accordingly.

Let’s take a simplified example; if we have the data and column input below, the editable table will populate input text fields for all cells.

const data = [
  {
    studentId: 1111,
    name: "Bahar Constantia",
    dateOfBirth: "1984-01-04",
    major: "Computer Science",
  },
  {
    studentId: 2222,
    name: "Harold Nona",
    dateOfBirth: "1961-05-10",
    major: "Communications",
  },
  {
    studentId: 3333,
    name: "Raginolf Arnulf",
    dateOfBirth: "1991-10-12",
    major: "Business",
  },
  {
    studentId: 4444,
    name: "Marvyn Wendi",
    dateOfBirth: "1978-09-24",
    major: "Psychology",
  },
]

const columns = [
  {
    header: "Student ID",
    type: "text",
  },
  {
    header: "Full Name",
    type: "text",
  },
  {
    header: "Date Of Birth",
    type: "text",
  },
  {
    header: "Major",
    type: "text",
  },
]

On the other hand, if some column types change from “text” to “date” or “number”, the table will respond dynamically and populate a date or number input field instead of a text field.

const columns = [
  {
    header: "Student ID",
    type: "number",
  },
  {
    header: "Full Name",
    type: "text",
  },
  {
    header: "Date Of Birth",
    type: "date",
  },
  {
    header: "Major",
    type: "select",
  },
]

The above demo is how we want the table to look and behave at the end of the tutorial. So without further ado, let’s dive into the implementation🚀

Creating a basic table

To get started with TanStack Table, we have to create a model type, default data, and a column definition, which is essential to creating a basic table and, eventually, dynamic editable cells. Please refer to the official documentation for a more detailed understanding.

type Student = {
  studentId: number;
  name: string;
  dateOfBirth: string;
  major: string;
};

const defaultData: Student[] = [
  {
    studentId: 1111,
    name: "Bahar Constantia",
    dateOfBirth: "1984-01-04",
    major: "Computer Science",
  },
  {
    studentId: 2222,
    name: "Harold Nona",
    dateOfBirth: "1961-05-10",
    major: "Communications",
  },
  {
    studentId: 3333,
    name: "Raginolf Arnulf",
    dateOfBirth: "1991-10-12",
    major: "Business",
  },
  {
    studentId: 4444,
    name: "Marvyn Wendi",
    dateOfBirth: "1978-09-24",
    major: "Psychology",
  },
];

const columnHelper = createColumnHelper<Student>();

const columns = [
  columnHelper.accessor("studentId", {
    header: "Student ID",
  }),
  columnHelper.accessor("name", {
    header: "Full Name",
  }),
  columnHelper.accessor("dateOfBirth", {
    header: "Date Of Birth",
  }),
  columnHelper.accessor("major", {
    header: "Major",
  }),
];

columns can be a regular object, but using createColumnHelper provides a utility for creating different column definition types.

Let’s add the rest of the code to get the basic TanStack table running.

import { useState } from "react";
import "./table.css";

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

type Student = {
  studentId: number;
  name: string;
  dateOfBirth: string;
  major: string;
};

const defaultData: Student[] = [
  {
    studentId: 1111,
    name: "Bahar Constantia",
    dateOfBirth: "1984-01-04",
    major: "Business",
  },
  {
    studentId: 2222,
    name: "Harold Nona",
    dateOfBirth: "1961-05-10",
    major: "Communications",
  },
  {
    studentId: 3333,
    name: "Raginolf Arnulf",
    dateOfBirth: "1991-10-12",
    major: "Business",
  },
  {
    studentId: 4444,
    name: "Marvyn Wendi",
    dateOfBirth: "1978-09-24",
    major: "Business",
  },
];

const columnHelper = createColumnHelper<Student>();

const columns = [
  columnHelper.accessor("studentId", {
    header: "Student ID",
  }),
  columnHelper.accessor("name", {
    header: "Full Name",
  }),
  columnHelper.accessor("dateOfBirth", {
    header: "Date Of Birth",
  }),
  columnHelper.accessor("major", {
    header: "Major",
  }),
];

export const Table = () => {
  const [data, setData] = useState(() => [...defaultData]);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

In addition, we added some styling to the table - margins, alignments, and borders.

table {
  font-family: sans-serif;
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin: 25px;
  background-color: #fff;
}
tr {
  border-bottom: 1px solid #ccc;
}
th,
td {
  text-align: left;
  padding: 8px 10px;
}

Adding editable cells

We’ll start with the most straightforward approach by replacing cells with input text fields, and we’ll make sure to structure the code in a way that will scale as we progress to the other sections.

Let’s create a new Table Cell component with a state and an input field.

const TableCell = () => {
  const [value, setValue] = useState("")

  return <input value={value} onChange={e => setValue(e.target.value)} />
}

The column definition provides a cell prop to render any element we need instead of the default text value. This way, we can add the new TableCell component in all columns.

const columns = [
  columnHelper.accessor("studentId", {
    header: "Student ID",
    cell: TableCell,
  }),
  columnHelper.accessor("name", {
    header: "Full Name",
    cell: TableCell,
  }),
  columnHelper.accessor("dateOfBirth", {
    header: "Date Of Birth",
    cell: TableCell,
  }),
  columnHelper.accessor("major", {
    header: "Major",
    cell: TableCell,
  }),
]

When the cell prop renders the component, it will provide all the information we need to access the table and update the value. But before going there, we need to create a new function in the main Table component to update the data based on the modified row and column.

The function will have three parameters - row index, column id, and value.

export const Table = () => {
  const [data, setData] = useState(() => [...defaultData]);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      updateData: (rowIndex: number, columnId: string, value: string) => {
        setData((old) =>
          old.map((row, index) => {
            if (index === rowIndex) {
              return {
                ...old[rowIndex],
                [columnId]: value,
              };
            }
            return row;
          })
        );
      },
    },
  });

  return (...);

Notice that we added the function in a meta object, which is part of the useReactTable options and can be accessed anywhere the table is available via table.options.meta.

Now that we have all the functions and props we need, let’s complete the TableCell component to trigger the update function.

const TableCell = ({ getValue, row, column, table }) => {
  const initialValue = getValue()
  const [value, setValue] = useState(initialValue)

  useEffect(() => {
    setValue(initialValue)
  }, [initialValue])

  const onBlur = () => {
    table.options.meta?.updateData(row.index, column.id, value)
  }

  return (
    <input
      value={value}
      onChange={e => setValue(e.target.value)}
      onBlur={onBlur}
    />
  )
}

We are using the onBlur to trigger the updateData function, and as we can see, it’s now available in table.options.meta. In addition, we’re passing a default value to the input field using getValue, which is available for us from the props.

Now, let’s put everything together and look at what we have so far.

import { useState, useEffect } from "react";
import "./table.css";

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

type Student = {
  studentId: number;
  name: string;
  dateOfBirth: string;
  major: string;
};

const defaultData: Student[] = [
  {
    studentId: 1111,
    name: "Bahar Constantia",
    dateOfBirth: "1984-01-04",
    major: "Business",
  },
  {
    studentId: 2222,
    name: "Harold Nona",
    dateOfBirth: "1961-05-10",
    major: "Communications",
  },
  {
    studentId: 3333,
    name: "Raginolf Arnulf",
    dateOfBirth: "1991-10-12",
    major: "Business",
  },
  {
    studentId: 4444,
    name: "Marvyn Wendi",
    dateOfBirth: "1978-09-24",
    major: "Business",
  },
];

const TableCell = ({ getValue, row, column, table }) => {
  const initialValue = getValue();
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const onBlur = () => {
    table.options.meta?.updateData(row.index, column.id, value);
  };

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onBlur={onBlur}
    />
  );
};

const columnHelper = createColumnHelper<Student>();

const columns = [
  columnHelper.accessor("studentId", {
    header: "Student ID",
    cell: TableCell,
  }),
  columnHelper.accessor("name", {
    header: "Full Name",
    cell: TableCell,
  }),
  columnHelper.accessor("dateOfBirth", {
    header: "Date Of Birth",
    cell: TableCell,
  }),
  columnHelper.accessor("major", {
    header: "Major",
    cell: TableCell,
  }),
];

export const Table = () => {
  const [data, setData] = useState(() => [...defaultData]);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      updateData: (rowIndex: number, columnId: string, value: string) => {
        setData((old) =>
          old.map((row, index) => {
            if (index === rowIndex) {
              return {
                ...old[rowIndex],
                [columnId]: value,
              };
            }
            return row;
          })
        );
      },
    },
  });

  return (
    <>
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <pre>{JSON.stringify(data, null, "\t")}</pre>
    </>
  );
};

The object is printed out at the end to validate that the input updates are working as expected.

Supporting dynamic types

So far, we’ve created an editable table that only supports text fields. As mentioned in the introduction, the goal is to be able to define different column types and render the appropriate elements dynamically.

Let’s start by adding a new type prop to the columns object.

const columns = [
  columnHelper.accessor("studentId", {
    header: "Student ID",
    cell: TableCell,
    meta: {
      type: "number",
    },
  }),
  columnHelper.accessor("name", {
    header: "Full Name",
    cell: TableCell,
    meta: {
      type: "text",
    },
  }),
  columnHelper.accessor("dateOfBirth", {
    header: "Date Of Birth",
    cell: TableCell,
    meta: {
      type: "date",
    },
  }),
  columnHelper.accessor("major", {
    header: "Major",
    cell: TableCell,
    meta: {
      type: "text",
    },
  }),
]

Similar to the table, the columns provide a meta object to add whatever we’d like to it. All we need to do is get the type from the meta object and pass it to the input field in the TableCell component.

const TableCell = ({ getValue, row, column, table }) => {
  const initialValue = getValue()
  const [value, setValue] = useState(initialValue)

  useEffect(() => {
    setValue(initialValue)
  }, [initialValue])

  const onBlur = () => {
    table.options.meta?.updateData(row.index, column.id, value)
  }

  return (
    <input
      value={value}
      onChange={e => setValue(e.target.value)}
      onBlur={onBlur}
      type={column.columnDef.meta?.type || "text"}
    />
  )
}

Voila! That was fast!

What if we want a more complex data type, like a select element? Well, for that, we need to do a bit more work 🙂

Here are the steps we need to follow:

Change the “Major” col type to “select” and provide all the select options within the column meta. Remember, we want to make this as dynamic as possible to support different data models.
Introduce a new select element in the TableCell component, which will populate all options from the column meta object.

type Option = {
  label: string;
  value: string;
};

const TableCell = ({ getValue, row, column, table }) => {
  const initialValue = getValue();
  const columnMeta = column.columnDef.meta;
  const tableMeta = table.options.meta;
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const onBlur = () => {
    tableMeta?.updateData(row.index, column.id, value);
  };

  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    setValue(e.target.value);
    tableMeta?.updateData(row.index, column.id, e.target.value);
  };

  return columnMeta?.type === "select" ? (
    <select onChange={onSelectChange} value={initialValue}>
      {columnMeta?.options?.map((option: Option) => (
        <option key={option.value} value={option.value}>{option.label}</option>
      ))}
    </select>
  ) : (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onBlur={onBlur}
      type={columnMeta?.type || "text"}
    />
  );
};

const columnHelper = createColumnHelper<Student>();

const columns = [
  columnHelper.accessor("studentId", {
    header: "Student ID",
    cell: TableCell,
    meta: {
      type: "number",
    },
  }),
  columnHelper.accessor("name", {
    header: "Full Name",
    cell: TableCell,
    meta: {
      type: "text",
    },
  }),
  columnHelper.accessor("dateOfBirth", {
    header: "Date Of Birth",
    cell: TableCell,
    meta: {
      type: "date",
    },
  }),
  columnHelper.accessor("major", {
    header: "Major",
    cell: TableCell,
    meta: {
      type: "select",
      options: [
        { value: "Computer Science", label: "Computer Science" },
        { value: "Communications", label: "Communications" },
        { value: "Business", label: "Business" },
        { value: "Psychology", label: "Psychology" },
      ],
    },
  }),
];

As we can see in the code and demo above, the “number”, “date” and “select” along with the options, are all correctly showing. For the select element, we defined a new onSelectChange event to trigger the update function. Additionally, we did some code cleanup to make accessing column and table less verbose.

Editable rows

We often want the table to be read-only and switch to an edit mode on demand. The reasons could be performance enhancement or want to submit data to the server, so avoid triggering an API call on every field.

A common practice is to add an action button in a new column that will toggle the row between edit and non-edit mode. It will also contain a cancel action in case the user wants to abort changes.

Let’s start with creating an editedRows state, a key/value object that indicates which rows are in edit mode. We’ll also add the getter and setter to the table meta so we can access it from other components.

export const Table = () => {
  const [data, setData] = useState(() => [...defaultData]);
  const [editedRows, setEditedRows] = useState({});

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      editedRows,
      setEditedRows,
      ...
    },
  });

  return (...);
};

Then, we can create an EditCell component with “edit”, “cancel”, and “done” buttons. “cancel” and “done” will only show if the editedRows contains the row id set to true. A unique row id is automatically generated for each row through the getCoreRowModel function.

const EditCell = ({ row, table }) => {
  const meta = table.options.meta

  const setEditedRows = (e: MouseEvent<HTMLButtonElement>) => {
    meta?.setEditedRows((old: []) => ({
      ...old,
      [row.id]: !old[row.id],
    }))
  }

  return meta?.editedRows[row.id] ? (
    <>
      <button>X</button> <button onClick={setEditedRows}>✔</button>
    </>
  ) : (
    <button onClick={setEditedRows}>✐</button>
  )
}

We also defined an event, a simple true/false toggle for the current row id using the setter function we just passed in the meta options.

Now, the component has to be placed in a new column. TanStack Table provides a display column option, which means it won’t be part of the data model as its only purpose is to manage the editable state.

const columns = [
  columnHelper.accessor("studentId", {
    header: "Student ID",
    cell: TableCell,
    meta: {
      type: "number",
    },
  }),
  columnHelper.accessor("name", {
    header: "Full Name",
    cell: TableCell,
    meta: {
      type: "text",
    },
  }),
  columnHelper.accessor("dateOfBirth", {
    header: "Date Of Birth",
    cell: TableCell,
    meta: {
      type: "date",
    },
  }),
  columnHelper.accessor("major", {
    header: "Major",
    cell: TableCell,
    meta: {
      type: "select",
      options: [
        { value: "Computer Science", label: "Computer Science" },
        { value: "Communications", label: "Communications" },
        { value: "Business", label: "Business" },
        { value: "Psychology", label: "Psychology" },
      ],
    },
  }),
  columnHelper.display({
    id: "edit",
    cell: EditCell,
  }),
]

Given what we have so far, the TableCell component can easily toggle between edit and non-edit modes by checking the editedRows in the table meta object.

const TableCell = ({ getValue, row, column, table }) => {
  const initialValue = getValue()
  const columnMeta = column.columnDef.meta
  const tableMeta = table.options.meta
  const [value, setValue] = useState(initialValue)

  useEffect(() => {
    setValue(initialValue)
  }, [initialValue])

  const onBlur = () => {
    tableMeta?.updateData(row.index, column.id, value)
  }

  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    setValue(e.target.value)
    tableMeta?.updateData(row.index, column.id, e.target.value)
  }

  if (tableMeta?.editedRows[row.id]) {
    return columnMeta?.type === "select" ? (
      <select onChange={onSelectChange} value={initialValue}>
        {columnMeta?.options?.map((option: Option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    ) : (
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
        onBlur={onBlur}
        type={columnMeta?.type || "text"}
      />
    )
  }
  return <span>{value}</span>
}

Last but not least, implementing a cancel action. While there are multiple ways to achieve that, depending on the business rules and the data flow, we’ll go with a simple approach for this tutorial.

Let’s create an originalData, a copy of the data array. If the user chooses to save the row, it will update the originalData with the newly updated row. Otherwise, it will revert to the original row.

In the Edtiable Table component, we can add a new state with a revert function.

export const Table = () => {
  const [data, setData] = useState(() => [...defaultData]);
  const [originalData, setOriginalData] = useState(() => [...defaultData]);
  const [editedRows, setEditedRows] = useState({});

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      editedRows,
      setEditedRows,
      revertData: (rowIndex: number, revert: boolean) => {
        if (revert) {
          setData((old) =>
            old.map((row, index) =>
              index === rowIndex ? originalData[rowIndex] : row
            )
          );
        } else {
          setOriginalData((old) =>
            old.map((row, index) => (index === rowIndex ? data[rowIndex] : row))
          );
        }
      },
      updateData: ...
  });

  return (...);
};

And in the EditCell component, we can call the function when the “cancel” or “done” buttons are triggered.

const EditCell = ({ row, table }) => {
  const meta = table.options.meta

  const setEditedRows = (e: MouseEvent<HTMLButtonElement>) => {
    const elName = e.currentTarget.name
    meta?.setEditedRows((old: []) => ({
      ...old,
      [row.id]: !old[row.id],
    }))
    if (elName !== "edit") {
      meta?.revertData(row.index, e.currentTarget.name === "cancel")
    }
  }

  return meta?.editedRows[row.id] ? (
    <>
      <button onClick={setEditedRows} name="cancel">
        X
      </button>{" "}
      <button onClick={setEditedRows} name="done">
        ✔
      </button>
    </>
  ) : (
    <button onClick={setEditedRows} name="edit">
      ✐
    </button>
  )
}

Here is the code and demo of what we have so far.

import { useState, useEffect, ChangeEvent, MouseEvent } from "react";
import "./table.css";

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

type Student = {
  studentId: number;
  name: string;
  dateOfBirth: string;
  major: string;
};

type Option = {
  label: string;
  value: string;
};

const defaultData: Student[] = [
  {
    studentId: 1111,
    name: "Bahar Constantia",
    dateOfBirth: "1984-01-04",
    major: "Computer Science",
  },
  {
    studentId: 2222,
    name: "Harold Nona",
    dateOfBirth: "1961-05-10",
    major: "Communications",
  },
  {
    studentId: 3333,
    name: "Raginolf Arnulf",
    dateOfBirth: "1991-10-12",
    major: "Business",
  },
  {
    studentId: 4444,
    name: "Marvyn Wendi",
    dateOfBirth: "1978-09-24",
    major: "Psychology",
  },
];

const TableCell = ({ getValue, row, column, table }) => {
  const initialValue = getValue();
  const columnMeta = column.columnDef.meta;
  const tableMeta = table.options.meta;
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const onBlur = () => {
    tableMeta?.updateData(row.index, column.id, value);
  };

  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    setValue(e.target.value);
    tableMeta?.updateData(row.index, column.id, e.target.value);
  };

  if (tableMeta?.editedRows[row.id]) {
    return columnMeta?.type === "select" ? (
      <select onChange={onSelectChange} value={initialValue}>
        {columnMeta?.options?.map((option: Option) => (
          <option key={option.value} value={option.value}>{option.label}</option>
        ))}
      </select>
    ) : (
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={onBlur}
        type={columnMeta?.type || "text"}
      />
    );
  }
  return <span>{value}</span>;
};

const EditCell = ({ row, table }) => {
  const meta = table.options.meta;

  const setEditedRows = (e: MouseEvent<HTMLButtonElement>) => {
    const elName = e.currentTarget.name;
    meta?.setEditedRows((old: []) => ({
      ...old,
      [row.id]: !old[row.id],
    }));
    if (elName !== "edit") {
      meta?.revertData(row.index, e.currentTarget.name === "cancel");
    }
  };

  return (
    <div className="edit-cell-container">
      {meta?.editedRows[row.id] ? (
        <div className="edit-cell">
          <button onClick={setEditedRows} name="cancel">
            X
          </button>
          <button onClick={setEditedRows} name="done">
            ✔
          </button>
        </div>
      ) : (
        <button onClick={setEditedRows} name="edit">
          ✐
        </button>
      )}
    </div>
  );
};

const columnHelper = createColumnHelper<Student>();

const columns = [
  columnHelper.accessor("studentId", {
    header: "Student ID",
    cell: TableCell,
    meta: {
      type: "number",
    },
  }),
  columnHelper.accessor("name", {
    header: "Full Name",
    cell: TableCell,
    meta: {
      type: "text",
    },
  }),
  columnHelper.accessor("dateOfBirth", {
    header: "Date Of Birth",
    cell: TableCell,
    meta: {
      type: "date",
    },
  }),
  columnHelper.accessor("major", {
    header: "Major",
    cell: TableCell,
    meta: {
      type: "select",
      options: [
        { value: "Computer Science", label: "Computer Science" },
        { value: "Communications", label: "Communications" },
        { value: "Business", label: "Business" },
        { value: "Psychology", label: "Psychology" },
      ],
    },
  }),
  columnHelper.display({
    id: "edit",
    cell: EditCell,
  }),
];

export const Table = () => {
  const [data, setData] = useState(() => [...defaultData]);
  const [originalData, setOriginalData] = useState(() => [...defaultData]);
  const [editedRows, setEditedRows] = useState({});

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      editedRows,
      setEditedRows,
      revertData: (rowIndex: number, revert: boolean) => {
        if (revert) {
          setData((old) =>
            old.map((row, index) =>
              index === rowIndex ? originalData[rowIndex] : row
            )
          );
        } else {
          setOriginalData((old) =>
            old.map((row, index) => (index === rowIndex ? data[rowIndex] : row))
          );
        }
      },
      updateData: (rowIndex: number, columnId: string, value: string) => {
        setData((old) =>
          old.map((row, index) => {
            if (index === rowIndex) {
              return {
                ...old[rowIndex],
                [columnId]: value,
              };
            }
            return row;
          })
        );
      },
    },
  });

  return (
    <>
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <pre>{JSON.stringify(data, null, "\t")}</pre>
    </>
  );
};

Table styling and restructuring

Restructuring is as simple as extracting each component into its own tsx file to make the main table component smaller and leaner and eventually easier to maintain.

Here are all the components that we would like to extract into a separate file:

index will have the main table component that can be imported by the consumer as follows.

import { Table } from "./Table"

function App() {
  return <Table />
}

export default App

The rest are the same components we worked on in the previous sections but moved to a separate file as an isolated component and imported when required.

All files and code restructures are available in the next section.

To finish up this tutorial, let’s treat ourselves a bit and style the table with a simple yet effective CSS 🙂

table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 14px;
  font-family: sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  width: 720px;
}

table thead tr {
  background-color: #4bbd7f;
  color: #ffffff;
  text-align: left;
}

table th,
table td {
  padding: 10px 15px;
}

table tbody tr {
  border-bottom: 1px solid #dddddd;
}

table tbody tr:nth-of-type(even) {
  background-color: #f6f6f6;
}

table tbody tr:last-of-type {
  border-bottom: 2px solid #4bbd7f;
}

table tbody tr.active-row {
  font-weight: bold;
  color: #4bbd7f;
}

table td:first-child input {
  width: 50px;
}

table td:nth-child(2) input {
  width: 120px;
}

table .edit-cell-container button {
  border-radius: 50px;
  height: 26px;
  width: 26px;
  border: 1px solid #ccc;
  color: #ffb918;
}

table button[name="cancel"] {
  color: #7b7b7b;
}

table button[name="done"] {
  color: #4bbd7f;
}

table input,
select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

table .edit-cell {
  display: flex;
  gap: 5px;
}

Nothing out of the ordinary here, some table shadow with row colors, borders, margin, and width!

Complete code and live demo

The complete code is available in this repository. If you liked the tutorial, please star the repository, and feel free to request new features!

Alternatively, you can access the code on StackBlitz below.

Summary

In this tutorial, we learned how to utilize TanckStack to build a dynamic React editable table that supports custom column schema and row editing, saving, and canceling actions.

The solution we explored together is one of several different approaches that we can take. We also didn’t consider any performance impact. So it’s highly recommended, based on the business requirement, to conduct performance tests and asses if the code might require design pattern adjustments such as using React memo, signals, or a state management to enhance performance level.

Bye for now 👋

Muhi Masri RSS Feed

Build a Customizable Next.js Blog with Material UI

Next.js Setup

Create the project

Run the dev server

Material UI Setup

Install Material UI

Clean Up and Configure MUI

Test MUI with a Header Component

MDX Setup

Install MDX Dependencies

Configure Next

Add Components Mapping

Create a Test Blog Post

Final Structure Overview

Building a Blog

Understanding Dynamic Routing

Loading Dynamic Content

Loading MDX Content

Frontmatter and Metadata

Add Frontmatter to Blog Posts

Parsing Frontmatter

Table of Contents (TOC)

Install Required Packages

Extracting Headings

Code Highlighting

Install Shiki and Rehype Plugin

Configure Code Highlighting in MDX Compiler

Using React Components in MDX

Create a React Component

Use Component in MDX

Creating a List of Blog Posts

Create the blogs Page

Filtering Blog Posts

Design Tokens & Theme Configuration

Design Tokens in Action

Creating the Theme

Section-Specific Palettes

Extending the MUI Theme with Custom Types

Extending MUI Theme Types

Global Styles & Typography Setup

Setting Global Styles with MUI

Why fontSize: 62.5%?

Typography Setup with Google Fonts

Component-Level Styling Using Tokens

sx vs. Direct Props

Theme-Aware Shorthand

Custom Font Size Hack

Using Theme Variables Responsively

Responsive Values in sx

Example from Main Codebase

Dark Mode Support & Theme Switching

Defining Light & Dark Color Schemes

Switching Modes with useColorScheme()

Summary

Creating React Fieldset Component with MUI

Basic React Fieldset

Advanced MUI Fieldset

Customizing the Component with Styling Props

Advanced Styling with sx

Adding Icons to the Title

Using TypeScript

Summary & Complete Code

React Responsive Navbar with MUI

Creating a Basic Navbar

Responsive navbar with a drawer

Simple Example to Show/Hide on Mobile

NavList Component

Nav Component

Complete Header Component

Mobile Menu Customization

Customizing the Mobile Menu to Slide Full Screen

Summary

React Vertical Tabs: Complete Customization with MUI

Creating Basic Vertical Tabs

Setting Up MUI Tabs

Enable Vertical Tabs

Advanced Customization

Enhancing Tab Labels with Icons

Styling the Tabs

`sx` vs. Direct Props

Responsive Values in `sx`

Switching Modes with `useColorScheme()`

Advanced Styling with `sx`

Using `sx` for Advanced Styling

Using `sx` for Styling

Using Theme within `sx`