Dynamic Table Builder

A powerful and flexible React table library that supports backend-driven configuration, built on top of Ant Design. This document provides a comprehensive guide to the DynamicTable component and its JSON configuration structure.

Features

• Backend-Driven Configuration: Define table structure, filters, sorting, and more from a JSON object, usually fetched from a backend.
• Global and Column-Level Filters: Supports various filter types like search, select, and date range.
• Sortable Columns: Enable sorting on specified columns.
• Pagination: Complete pagination support, configurable from the JSON.
• State Persistence: Persist table state (filters, sorting, pagination) to localStorage.
• Custom Rendering: Render cell content as links, statuses with colors, formatted dates, and numbers.
• Action Buttons: Configurable action buttons for functionalities like Export and Refresh.
• Row Selection: Support for checkbox-based row selection.

Installation

First, make sure you have the required peer dependencies installed:

npm install antd @ant-design/icons dayjs

Then, install the library:

npm install dynamic-table-builder

How to Use

Here's a basic example of how to integrate the DynamicTable component.

import React from 'react';
import DynamicTable from 'dynamic-table-builder';
import 'dynamic-table-builder/dist/index.css'; // Don't forget to import styles

const YourComponent = () => {
  // This config would typically come from an API
  const tableConfiguration = { /* ... Your JSON config ... */ };

  const handleDataFetch = async (params) => {
    console.log('Fetching data with params:', params);
    // 'params' will contain { pagination, filters, sorter }
    // Fetch data from your API and return it in the expected format.
    // Example:
    // const response = await yourApi.getData(params);
    // return { data: response.items, pagination: { totalCount: response.total } };
    return Promise.resolve({ data: [], pagination: { totalCount: 0 } });
  };

  const handleExport = async (params) => {
    console.log('Exporting data with params:', params);
    // 'params' will contain { filters, sort }
    // Call your API to get the export data (e.g., a CSV blob).
    // Example:
    // const blob = await yourApi.exportData(params);
    // return blob;
    return Promise.resolve(new Blob(["Success"]));
  };

  return (
    <DynamicTable
      config={tableConfiguration}
      onDataFetch={handleDataFetch}
      onExport={handleExport}
      className="custom-table-class"
    />
  );
};

export default YourComponent;

JSON Configuration Structure

The DynamicTable is configured through a single JSON object. Here is the breakdown of its main properties.

{
  "data": [],
  "columns": [],
  "pagination": {},
  "tableConfig": {},
  "tableFeatures": {}
}

• data: An array of objects, where each object represents a row in the table. While it can be provided initially, the component is designed to fetch data dynamically via the onDataFetch prop.
• columns: (Required) An array of objects defining the table's columns.
• pagination: Configuration for the table's pagination.
• tableConfig: General table settings like title, action buttons, and global filters.
• tableFeatures: Enables or configures special features like row selection and state management.

columns

Each object in the columns array defines a column.

Render Configuration (render)

Column Filter Configuration (filter)

pagination

Configures the table's pagination controls.

tableConfig

General table configuration.

Action Button Configuration

Global Filter Configuration

Setting Default Values for Global Filters

You can set default values for any global filter using the defaultValue property:

// Date Range - Last 30 days
{
  key: 'dateRange',
  type: 'dateRange',
  title: 'Date Range',
  defaultValue: [
    dayjs().subtract(30, 'days'), // Start date
    dayjs() // End date
  ]
}

// Single Select - Default to specific value
{
  key: 'status',
  type: 'select',
  title: 'Status',
  options: [
    { label: 'Active', value: 'ACTIVE' },
    { label: 'Inactive', value: 'INACTIVE' }
  ],
  defaultValue: 'ACTIVE'
}

// Multi-Select - Default to multiple values
{
  key: 'roles',
  type: 'select',
  mode: 'multiple',
  title: 'Roles',
  options: [
    { label: 'Admin', value: 'ADMIN' },
    { label: 'User', value: 'USER' }
  ],
  defaultValue: ['ADMIN', 'USER']
}

// Search - Default search term
{
  key: 'search',
  type: 'search',
  title: 'Search',
  defaultValue: 'john'
}

tableFeatures

Enables or configures special table features.

State Management Configuration

Row Selection Configuration

Component Props