📊 Responsive React DataTable

Responsive React DataTable — A modern, responsive React DataTable component for React applications.
Supports sorting, filtering, pagination, and customizable columns — ideal for building interactive, data-driven interfaces that look great on any screen size.

🎯 Click here to view the live demo

🚀 Features of Responsive React DataTable

• 📱 Responsive design for desktop and mobile
• 🔄 Multiple data modes: Internal, External, Static
• 🔍 Pagination, search, sorting, selection, and column reordering
• 📏 Auto page size calculation
• 🎨 Customizable themes
• 🌐 Multi-language support (English, Persian, RTL)

⚙️ Installation

npm install responsive-react-datatable

Required Dependencies

Make sure you have the following installed:

npm install @tanstack/react-query axios swiper

🧩 Usage Example — Internal Mode

import Table, {
  ColumnType,
  rowRenderer,
  ActionDropDown,
} from "responsive-react-datatable";
const columns: ColumnType[] = [
  {
    data: "avatar",
    title: "Profile",
    searchable: false,
    orderable: false,
    width: 80,
    render: rowRenderer((_cell, _row) => (
      <img src={_cell} alt={_row?.profileAlt} />
    )),
  },
  {
    data: "name",
    title: "Name",
    searchable: true,
    orderable: true,
    width: 150,
  },
  // if it is an operation column, it must be null.
  {
    data: null,
    orderable: false,
    title: "Operation",
    searchable: false,
    width: 140,
    render: rowRenderer(() => (
      <ActionDropDown
        options={[
          { label: "detail", href: "https://example.com" },
          { label: "show alert", onClick: () => alert("hi") },
        ]}
      />
    )),
  },
];

const internalApiConfig = {
  endpoint: "/api/data",
  baseUrl: "https://example.com",
  method: "POST",
  defaultSortBy: "id",
  sortType: "desc",
  customBody: [{ someFilter: "value" }],
  headers: { Authorization: "Bearer token" },
  onFetch: (data) => console.log("Fetched:", data),
};

<Table
  columns={columns}
  mode="internal"
  internalApiConfig={internalApiConfig}
  pageSize={10}
  lang="en"
  notify={(message, type) => console.log(`${type}: ${message}`)}
/>;

📦 Internal Mode Payload Structure

In Internal Mode, the table generates a default payload for server requests, inspired by DataTables.net:

let payload: Record<string, any> = {
  draw: currentPage,
  columns: makeCurrentCols,
  order: order || [],
  start: (currentPage - 1) * dynamicPageSize,
  length: dynamicPageSize,
  search: { value: searchText || "", regex: false, fixed: [] },
};

📦 Static Mode Example

const staticRows = [{ id: 1, name: "max", age: 30 }];

<Table
  columns={columns}
  mode="static"
  staticRows={staticRows}
  totalItems={staticRows.length}
  pageSize={5}
/>;

⚙️ Props Reference