Building a Reusable Table with React, Typescript, Tailwindcss, and Shadcn/UI

Let’s face it—building an HTML table is simple enough if you stick to the good ol’ semantic approach with , , , and . But what starts as an easy task can quickly turn into a nightmare when you find yourself building multiple tables scattered across different parts of your application. Suddenly, what seemed like a harmless chore morphs into a time-sucking beast. Now imagine a feature request rolls in: "Hey, can we change the table header color? Oh, and bump up the font weight. Actually, let’s shuffle those columns while we’re at it." Sounds innocent enough, right? But then it hits you—you’ll need to go digging into every instance of every table to update them manually, praying you don’t accidentally break something in the process. Yup. Told you. It can be a pain in the… well, let’s just say “backlog.” But don’t worry—I’ve got a solution that’s more magical than a Hogwarts sorting hat! The secret? Reusable components. With the right mix of tools (think React, TypeScript, TailwindCSS, and a dash of Shadcn/UI), you can whip up a table component that’s versatile, efficient, and a joy to maintain. No more repetitive coding. No more chaos when requirements change. Ready to save yourself hours of work and frustration? Let’s dive into the potions and spells—err, tools—you’ll need to create tables that work like magic. Tools We’re Using Alright, let’s talk about the secret weapons that’ll make this table component as slick as a well-oiled machine. We’re not just throwing random libraries together—we’re using a carefully curated stack that keeps things fast, flexible, and developer-friendly. React.js (with Vite) React’s component-based architecture is perfect for this job. Instead of copy-pasting the same table structure everywhere (which, let’s be honest, sounds like a nightmare), we’ll create a reusable table component that can be dropped into any part of our app with minimal effort. And why Vite? Because it’s blazing fast—seriously, you’ll wonder why you ever put up with slow-build tools. Shadcn/UI You could build table styles, buttons, and dropdowns from scratch… or you could just use Shadcn/UI and save yourself the hassle. This library gives us prebuilt, beautifully designed components that integrate seamlessly with TailwindCSS, so we can focus on making the table functional instead of spending hours tweaking styles. TailwindCSS Speaking of styling, TailwindCSS lets us write clean, maintainable styles without drowning in a sea of custom CSS files. Need to adjust spacing? Change font sizes? Update colors? Just tweak a class right inside the component. It’s like having a design system at your fingertips—without the headache. TypeScript Ever tried debugging an error caused by passing the wrong data to a component? Fun times. TypeScript helps us avoid that mess by enforcing strict type definitions. It makes sure our table rows, columns, and actions are properly structured, so we don’t end up with nasty runtime surprises. Plus, it gives us autocomplete for our table columns, rows, and data types, making development smoother and reducing guesswork. No more switching back and forth between files to remember what props a component expects—TypeScript has our back. Visual Studio Code (VS Code) Finally, every wizard needs a wand, and for us, that’s VS Code. It’s lightweight, powerful, and packed with extensions that’ll make writing and debugging code a breeze. With TypeScript IntelliSense, we get real-time autocomplete for our table structure, ensuring we never have to second-guess column names or row properties. Installation & Setup Step 1: Set Up a React + TypeScript Project Run the following command npm create vite@latest project-name Then select Typescript: Once the project is created, navigate into the project directory and install dependencies: cd project-name npm install Now, open the project in VS Code. Step 2: Install & Configure Tailwind CSS (v4) Run the command below to install tailwindcss into your project: npm install tailwindcss @tailwindcss/vite Next, add the @tailwindcss/vite plugin to your Vite configuration. vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import tailwindcss from "@tailwindcss/vite"; // https://vite.dev/config/ export default defineConfig({ plugins: [react(), tailwindcss()], }); Import Tailwind CSS to your index.css @import "tailwindcss"; Step 3: Install Shadcn/UI Edit tsconfig.json file The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files. // tsconfig.json "compilerOptions": { "baseUrl": ".", "paths": { "@/": ["./src/"] } } Edit tsconfig.app.json file Add the following cod

Mar 2, 2025 - 23:27

Building a Reusable Table with React, Typescript, Tailwindcss, and Shadcn/UI

Let’s face it—building an HTML table is simple enough if you stick to the good ol’ semantic approach with

, , , and

. But what starts as an easy task can quickly turn into a nightmare when you find yourself building multiple tables scattered across different parts of your application. Suddenly, what seemed like a harmless chore morphs into a time-sucking beast.

Now imagine a feature request rolls in: "Hey, can we change the table header color? Oh, and bump up the font weight. Actually, let’s shuffle those columns while we’re at it." Sounds innocent enough, right? But then it hits you—you’ll need to go digging into every instance of every table to update them manually, praying you don’t accidentally break something in the process.

Yup. Told you. It can be a pain in the… well, let’s just say “backlog.”

But don’t worry—I’ve got a solution that’s more magical than a Hogwarts sorting hat! The secret? Reusable components. With the right mix of tools (think React, TypeScript, TailwindCSS, and a dash of Shadcn/UI), you can whip up a table component that’s versatile, efficient, and a joy to maintain. No more repetitive coding. No more chaos when requirements change.

Ready to save yourself hours of work and frustration? Let’s dive into the potions and spells—err, tools—you’ll need to create tables that work like magic.

Tools We’re Using

Alright, let’s talk about the secret weapons that’ll make this table component as slick as a well-oiled machine. We’re not just throwing random libraries together—we’re using a carefully curated stack that keeps things fast, flexible, and developer-friendly.

React.js (with Vite)

React’s component-based architecture is perfect for this job. Instead of copy-pasting the same table structure everywhere (which, let’s be honest, sounds like a nightmare), we’ll create a reusable table component that can be dropped into any part of our app with minimal effort. And why Vite? Because it’s blazing fast—seriously, you’ll wonder why you ever put up with slow-build tools.

Shadcn/UI

You could build table styles, buttons, and dropdowns from scratch… or you could just use Shadcn/UI and save yourself the hassle. This library gives us prebuilt, beautifully designed components that integrate seamlessly with TailwindCSS, so we can focus on making the table functional instead of spending hours tweaking styles.

TailwindCSS

Speaking of styling, TailwindCSS lets us write clean, maintainable styles without drowning in a sea of custom CSS files. Need to adjust spacing? Change font sizes? Update colors? Just tweak a class right inside the component. It’s like having a design system at your fingertips—without the headache.

TypeScript

Ever tried debugging an error caused by passing the wrong data to a component? Fun times. TypeScript helps us avoid that mess by enforcing strict type definitions. It makes sure our table rows, columns, and actions are properly structured, so we don’t end up with nasty runtime surprises. Plus, it gives us autocomplete for our table columns, rows, and data types, making development smoother and reducing guesswork. No more switching back and forth between files to remember what props a component expects—TypeScript has our back.

Visual Studio Code (VS Code)

Finally, every wizard needs a wand, and for us, that’s VS Code. It’s lightweight, powerful, and packed with extensions that’ll make writing and debugging code a breeze. With TypeScript IntelliSense, we get real-time autocomplete for our table structure, ensuring we never have to second-guess column names or row properties.

Installation & Setup

Step 1: Set Up a React + TypeScript Project

Run the following command

npm create vite@latest project-name

Then select Typescript:

Once the project is created, navigate into the project directory and install dependencies:

cd project-name
npm install

Now, open the project in VS Code.

Step 2: Install & Configure Tailwind CSS (v4)

Run the command below to install tailwindcss into your project:

npm install tailwindcss @tailwindcss/vite

Next, add the @tailwindcss/vite plugin to your Vite configuration. vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Import Tailwind CSS to your index.css

@import "tailwindcss";

Step 3: Install Shadcn/UI

Edit tsconfig.json file
The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files.

// tsconfig.json
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
}

Edit tsconfig.app.json file

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

// tsconfig.app.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Add the following code to the vite.config.ts so your app can resolve paths without error

npm install -D @types/node

// vite.config.ts
**import { defineConfig } from "vite";
import path from "path";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Run the shadcn-ui init command to setup your project:

npx shadcn@latest init

During setup, select "Slate" as the theme (or choose any other preferred theme).

To verify the installation, add a button component:

npx shadcn@latest add button

If everything works correctly, you should now have a Shadcn-styled button component ready to use!

Step 4: Install the Table Component

Since we’ll be building a table, install the Shadcn table component by running:

npx shadcn@latest add table

Final Check

At this point, your project is fully set up with React, TypeScript, TailwindCSS 4, and Shadcn/UI. If you run into issues, refer to the TailwindCSS Vite Guide or the Shadcn/UI documentation.

Now, let's start building our reusable table!