Tables are essential for displaying structured data clearly and efficiently. In this guide, we’ll build a flexible Table component in React/Next.js that supports custom data, styling, and extendable features like sorting or pagination.

Table preview

1. Setup codes

Create a new file components/ui/Table.tsx then copy the code below

jsx
type TableProps<T> = {
  data: T[];
};

export default function Table<T extends Record<string, any>>({ data }: TableProps<T>) {
  if (data.length === 0) return <p>No data available.</p>;

  const columns = Object.keys(data[0]);

  return (
    <div className="px-4 sm:px-6 lg:px-8">
      <div className="sm:flex sm:items-center">
        <div className="sm:flex-auto">
          <h1 className="text-base font-semibold text-gray-900">Users</h1>
          <p className="mt-2 text-sm text-gray-700">
            A list of all the users in your account including their name, title, email and role.
          </p>
        </div>
        <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
          <button
            type="button"
            className="shadow-xs block rounded-full bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          >
            Add User +
          </button>
        </div>
      </div>

      <div className="mt-8 flow-root">
        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
            <table className="min-w-full divide-y divide-gray-300">
              <thead>
                <tr>
                  {columns.map((col) => (
                    <th
                      key={col}
                      scope="col"
                      className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
                    >
                      {col}
                    </th>
                  ))}
                  <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-0">
                    <span className="sr-only">Edit</span>
                  </th>
                </tr>
              </thead>

              <tbody className="divide-y divide-gray-200">
                {data.map((row, rowIndex) => (
                  <tr key={rowIndex}>
                    {columns.map((col) => (
                      <td key={col} className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        {row[col]}
                      </td>
                    ))}
                    <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                      <a href="#" className="text-indigo-600 hover:text-indigo-900">
                        Edit<span className="sr-only">, {row.name}</span>
                      </a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

2. Usages

Now you can use the Table component in your pages

jsx
import React from "react";
import Table from "@/components/ui/Table";

const users = [
  {
    name: "Bien Tu Anh",
    title: "Front-end Developer",
    email: "bientuanh1996@example.com",
    role: "Member",
  },
  {
    name: "Nguyen Van A",
    title: "Back-end Developer",
    email: "nguyenvana@example.com",
    role: "Member",
  },
  {
    name: "Nguyen Van B",
    title: "Full-stack Developer",
    email: "nguyenvanb@example.com",
    role: "Admin",
  },
];

const DocTable = () => {
  return (
    <div className="container">
      <Table data={users} />
    </div>
  );
};

export default DocTable;

The UI like that