dynamic-table-pkg

A modern, highly customizable React dynamic table component with built-in pagination, loading states, and Tailwind CSS styling out of the box.

Features

• Client-side & Server-side Data: Pass all your data at once, or provide a fetch function for server-side pagination.
• Built-in Pagination: Includes a complete pagination component with page size selection and ellipsis logic.
• Tailwind CSS Styling: Beautiful default styles powered by Tailwind CSS, fully responsive.
• Custom Renderers: Easily customize cell contents with custom render functions.
• TypeScript Ready: Written in TypeScript with full type definitions exported.

Installation

Install the package via npm, yarn, or pnpm:

npm install dynamic-table-pkg
# or
yarn add dynamic-table-pkg
# or
pnpm add dynamic-table-pkg

Setup

To use the default Tailwind CSS styles, import the CSS file in your application's entry point (e.g., main.tsx, App.tsx, or _app.tsx):

import "dynamic-table-pkg/dist/dynamic-table-pkg.css";

Usage

1. Client-Side Pagination

If you have all the data available locally, simply pass the data array and the component will handle pagination automatically.

TypeScript (TSX)

import React from "react";
import { DynamicTable, Column } from "dynamic-table-pkg";
import "dynamic-table-pkg/dist/dynamic-table-pkg.css";

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

const columns: Column<User>[] = [
  { key: "id", header: "ID" },
  { key: "name", header: "Name" },
  { key: "email", header: "Email" },
  {
    key: "role",
    header: "Role",
    render: (row) => (
      <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">
        {row.role}
      </span>
    ),
  },
];

const data: User[] = [
  { id: 1, name: "John Doe", email: "[email protected]", role: "Admin" },
  { id: 2, name: "Jane Smith", email: "[email protected]", role: "User" },
  // ... more data
];

export default function App() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Users</h1>
      <DynamicTable
        columns={columns}
        data={data}
        pageSize={5}
        pageSizeOptions={[5, 10, 20]}
      />
    </div>
  );
}

JavaScript (JSX)

import React from "react";
import { DynamicTable } from "dynamic-table-pkg";
import "dynamic-table-pkg/dist/dynamic-table-pkg.css";

const columns = [
  { key: "id", header: "ID" },
  { key: "name", header: "Name" },
  { key: "email", header: "Email" },
  {
    key: "role",
    header: "Role",
    render: (row) => (
      <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">
        {row.role}
      </span>
    ),
  },
];

const data = [
  { id: 1, name: "John Doe", email: "[email protected]", role: "Admin" },
  { id: 2, name: "Jane Smith", email: "[email protected]", role: "User" },
  // ... more data
];

export default function App() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Users</h1>
      <DynamicTable
        columns={columns}
        data={data}
        pageSize={5}
        pageSizeOptions={[5, 10, 20]}
      />
    </div>
  );
}

2. Server-Side Pagination

For large datasets, use the fetchData prop to load data on demand. The table will automatically display a loading spinner while fetching.

TypeScript (TSX)

import React from "react";
import { DynamicTable, Column } from "dynamic-table-pkg";
import "dynamic-table-pkg/dist/dynamic-table-pkg.css";

interface Product {
  id: string;
  title: string;
  price: number;
}

const columns: Column<Product>[] = [
  { key: "id", header: "Product ID" },
  { key: "title", header: "Title" },
  {
    key: "price",
    header: "Price",
    render: (row) => `$${row.price.toFixed(2)}`,
  },
];

export default function ServerSideTable() {
  const fetchProducts = async (page: number, pageSize: number) => {
    // Replace with your actual API call
    const response = await fetch(
      `/api/products?page=${page}&limit=${pageSize}`
    );
    const data = await response.json();

    return {
      rows: data.items, // The array of data for the current page
      totalCount: data.total, // The total number of items in the database
    };
  };

  return (
    <DynamicTable
      columns={columns}
      fetchData={fetchProducts}
      initialPage={1}
      pageSize={10}
    />
  );
}

JavaScript (JSX)

import React from "react";
import { DynamicTable } from "dynamic-table-pkg";
import "dynamic-table-pkg/dist/dynamic-table-pkg.css";

const columns = [
  { key: "id", header: "Product ID" },
  { key: "title", header: "Title" },
  {
    key: "price",
    header: "Price",
    render: (row) => `$${row.price.toFixed(2)}`,
  },
];

export default function ServerSideTable() {
  const fetchProducts = async (page, pageSize) => {
    // Replace with your actual API call
    const response = await fetch(
      `/api/products?page=${page}&limit=${pageSize}`
    );
    const data = await response.json();

    return {
      rows: data.items, // The array of data for the current page
      totalCount: data.total, // The total number of items in the database
    };
  };

  return (
    <DynamicTable
      columns={columns}
      fetchData={fetchProducts}
      initialPage={1}
      pageSize={10}
    />
  );
}

API Reference

DynamicTableProps

| Prop | Type | Default | Description | | :-------------------- | :------------------------------------------------ | :---------------- | :---------------------------------------------------- | | columns | Column<T>[] | Required | Array of column definitions | | data | T[] | undefined | Array of data for client-side pagination | | fetchData | (page, pageSize) => Promise<{rows, totalCount}> | undefined | Function to fetch data for server-side pagination | | initialPage | number | 1 | The initial active page | | pageSize | number | 10 | The number of rows per page | | pageSizeOptions | number[] | [5, 10, 20, 50] | Available options for the page size dropdown | | loading | boolean | false | Force external loading state (useful for server-side) | | className | string | undefined | Additional CSS classes for the main wrapper | | tableClassName | string | undefined | Additional CSS classes for the <table> element | | paginationClassName | string | undefined | Additional CSS classes for the pagination component | | onPageChange | (page: number) => void | undefined | Callback fired when the page changes | | onPageSizeChange | (size: number) => void | undefined | Callback fired when the page size changes |

Column<T>

| Property | Type | Default | Description | | :--------- | :------------------------------------------- | :----------- | :---------------------------------------------------------------------------------------------- | | key | string | Required | Unique key for the column, typically matching a property in your data object | | header | string | Required | The text to display in the table header | | render | (row: T, index: number) => React.ReactNode | undefined | Custom render function for the cell content | | sortable | boolean | undefined | Flag indicating if the column is sortable (Note: UI for sorting may need custom implementation) |

Customization

The table relies on standard class names that can be targeted for overriding styles. You can also pass custom Tailwind classes through the className, tableClassName, and paginationClassName props.

License

MIT

🎯 Support & Community

If you find this package helpful, please consider supporting its development:

• ⭐ Star the Repository - Give it a star on GitHub to show your appreciation
• 🐛 Report Issues - Found a bug? Open an issue and help improve the package
• 💡 Feature Requests - Have an idea for a new feature? Submit a feature request
• 🔧 Contribute - Pull requests are welcome! Fork the repo and submit your improvements
• 📢 Share - Tell your colleagues and friends about this package

🔔 Follow for More Packages

I regularly build and publish high-quality React components and utility packages. Follow me to stay updated:

• 👤 GitHub - Follow @HassanAarish for more open-source projects
• 💼 LinkedIn - Connect with me on LinkedIn for professional updates

💬 Need a Custom Package?

If you have a specific requirement or need a custom React component/package built for your project, feel free to reach out! I'm available for:

• 🎨 Custom component development
• 📦 NPM package creation
• 🔧 Feature additions to existing packages
• 📚 Technical consulting for React projects

Contact me on LinkedIn: Aarish Jafri - Developer

📊 Package Stats

• ⭐ Stars: Show your support by starring the repo
• 📥 Downloads: Check out npm trends
• 🔄 Updates: Watch the repo for new releases

If this package saved you time, please give it a ⭐!

Made with ❤️ by Aarish Jafri