Basic Data Table

Component 77

About

A powerful and flexible data table component with sorting, filtering, pagination, and customizable rendering.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Basic Data Table to your project and fits it to your theme.

Code

How Basic Data Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DataTable } from "@/components/ui/basic-data-table";

const DemoOne = () => {
  const data = [
    {
      id: 1,
      name: "John Doe",
      email: "john@example.com",
      role: "Admin",
    },
    {
      id: 2,
      name: "Jane Smith",
      email: "jane@example.com",
      role: "User",
    },
    {
      id: 3,
      name: "Bob Johnson",
      email: "bob@example.com",
      role: "User",
      status: "Inactive",
    },
    {
      id: 4,
      name: "Alice Brown",
      email: "alice@example.com",
      role: "Moderator",
    },
    {
      id: 5,
      name: "Charlie Wilson",
      email: "charlie@example.com",
      role: "User",
    },
  ];

  const columns = [
    { key: "id", header: "ID", sortable: true },
    { key: "name", header: "Name", sortable: true, filterable: true },
    { key: "email", header: "Email", sortable: true, filterable: true },
    { key: "role", header: "Role", sortable: true, filterable: true },
  ];

  return (
    <div className= "max-w-6xl w-[95%] mx-auto" >
      <DataTable data= { data } columns = { columns } searchable itemsPerPage = { 10} />
    </div>
  );
};

export { DemoOne };