JC React DataTable

A modern, highly customizable, and performance-optimized React DataTable library. Built with pure JavaScript (ES6+) and React Hooks, offering a robust set of features with zero external logic dependencies.

✨ Features

• 🚀 High Performance: Optimized with useMemo and useCallback for efficient rendering.
• 🔍 Advanced Filtering: Column-specific search with support for custom filter functions.
• ⇅ Sorting: Multi-type sorting (String, Number, Date, Custom).
• 📄 Pagination: Built-in client-side pagination with customizable page sizes.
• 📱 Responsive Design & Scrolling:
  • Automatic Horizontal Scroll: Handles tables with many columns gracefully.
  • Vertical Scroll: maxHeight prop for sticky headers.
  • Smart popover positioning.
• 📏 Strict Column Control:
  • Support for width, minWidth, and maxWidth.
  • width acts as a strict minimum, preventing column compression.
• 🎨 Modern UI: Clean aesthetics, hover effects, and accessible controls.
• 📦 Zero Heavy Deps: Lightweight—only depends on React.

📦 Installation

Install the package via npm:

npm install jc-data-table

🚀 Usage

1. Import Component & Styles

import { DataTable } from 'jc-data-table';
import 'jc-data-table.css'; 

2. Define Columns & Data

const columns = [
  { 
    key: 'id', 
    header: 'ID', 
    width: '60px', 
    sortable: true 
  },
  { 
    key: 'name', 
    header: 'Name', 
    minWidth: '200px', // Forces minimum width
    sortable: true, 
    searchable: true 
  },
  { 
    key: 'role', 
    header: 'Role', 
    width: '120px', 
    sortable: true
  },
  {
    key: 'description',
    header: 'Description',
    width: '300px', // Functions as min-width: 300px by default
    render: (row) => <span className="text-gray-500">{row.desc}</span>
  },
  { 
    key: 'actions', 
    header: 'Actions', 
    width: '100px',
    render: (row) => <button onClick={() => alert(row.name)}>Edit</button> 
  }
];

const data = [
  { id: 1, name: 'John Doe', role: 'Admin', desc: 'System Admin', joined: '2023-01-15' },
  { id: 2, name: 'Jane Smith', role: 'User', desc: 'Regular User', joined: '2023-02-20' },
  // ... more data
];

3. Render the Table

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>User Directory</h1>
      
      <DataTable 
        columns={columns} 
        data={data} 
        pagination={true}
        pageSizeOptions={[5, 10, 20]}
        defaultPageSize={10}
        onRowClick={(row) => console.log('Clicked Row:', row)}
        maxHeight="400px" // Enable vertical scroll with sticky header
        loading={false}
      />
    </div>
  );
}

📖 API Reference

DataTable Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | columns | Array | Required | Array of column definitions (see below). | | data | Array | Required | Array of data objects to display. | | pagination | Boolean | true | Enable/Disable pagination. | | pageSizeOptions | Array | [5, 10, 20, 50] | Dropdown options for "Rows per page". | | defaultPageSize | Number | 10 | Initial number of rows per page. | | onRowClick | Function | undefined | Callback function when a row is clicked: (row) => {}. | | loading | Boolean | false | Shows a loading spinner if true. | | noDataText | String | 'No records found' | Custom message when data is empty/filtered out. | | maxHeight | String | undefined | Sets a fixed height (e.g., "300px"). Enables vertical scrolling with sticky headers. | | className | String | '' | Extra CSS class for the wrapper div. |

Column Definition Object

| Property | Type | Description | |----------|------|-------------| | key | String | Required. Unique key corresponding to the field in the data object. | | header | String | Required. The text to display in the table header. | | width | String | Optional. Preferred width. Acts as min-width if minWidth is not set. | | minWidth | String | Optional. Strict minimum width (e.g. "200px"). | | maxWidth | String | Optional. Strict maximum width (e.g. "500px"). | | sortable | Boolean | Enable sorting for this column. | | searchable | Boolean | Enable text filtering (search) for this column. | | render | Function | Custom cell renderer: (row, index) => ReactNode. | | sortFn | Function | Custom sort logic: (a, b) => number (-1, 0, 1). | | filterFn | Function | Custom filter logic: (value, filterText, row) => boolean. |

🛠 customization

CSS Overrides

The library allows easy styling overrides via standard CSS.

/* Example: Dark Header */
.jc-datatable-th {
  background-color: #2d3748;
  color: #ffffff;
}

/* Example: Row Hover Color */
.jc-datatable-tr:hover {
  background-color: #ebf8ff;
}

/* Example: Active Page Button */
.jc-datatable-pagination-btn:not(:disabled):hover {
  border-color: #3182ce;
  color: #3182ce;
}

💻 Development

Clone the repository and run locally:

1. Install Dependencies

   npm install

2. Start Dev Server (Demo App)

   npm run dev

3. Build Library

   npm run build

📄 License

MIT © Jay Chikhaliya

Built with ❤️ using React.