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.
npm install jc-data-tableuseMemo and useCallback for efficient rendering.
maxHeight prop for sticky headers.
width, minWidth, and maxWidth.
width acts as a strict minimum, preventing column compression.
bash
npm install jc-data-table
`
---
🚀 Usage
$3
`jsx
import { DataTable } from 'jc-data-table';
import 'jc-data-table.css';
`
$3
`jsx
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) => {row.desc}
},
{
key: 'actions',
header: 'Actions',
width: '100px',
render: (row) =>
}
];
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
`jsx
function App() {
return (
User Directory
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}
/>
);
}
`
---
📖 API Reference
$3
| 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. |
$3
| 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
$3
The library allows easy styling overrides via standard CSS.
`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
`bash
npm install
`
2. Start Dev Server (Demo App)
`bash
npm run dev
`
3. Build Library
`bash
npm run build
``