JSON DataTable Component

A flexible DataTable component to load and display CDISC Dataset-JSON 1.1

Features

- ✅ Column visibility toggle
- ✅ Multi-column sorting with priority indicators
- ✅ Pagination support
- ✅ Column metadata tooltips on hover
- ✅ Label/Name toggle for column headers
- ✅ Key column highlighting
- ✅ Responsive design with Tailwind CSS
- ✅ Row numbering with customizable header content

Repository

* GitHub: https://github.com/explore-eda/dataset-json-grid
* NPM: https://www.npmjs.com/package/dataset-json-grid

Installation

``bash
npm install nextjs-datatable-component
`

Usage

`jsx
import DataTable from 'nextjs-datatable-component';

function MyComponent() {
const file = {
columns: [
{
name: 'id',
label: 'ID',
dataType: 'integer',
keySequence: 1,
itemOID: 'IT.ID'
},
{
name: 'name',
label: 'Full Name',
dataType: 'string',
length: 100
},
{
name: 'email',
label: 'Email Address',
dataType: 'string'
}
],
rows: [
['1', 'John Doe', 'john@example.com'],
['2', 'Jane Smith', 'jane@example.com'],
['3', 'Bob Johnson', 'bob@example.com']
]
};

const [currentPage, setCurrentPage] = useState(1);
const [sortColumns, setSortColumns] = useState([]);
const [visibleColumns, setVisibleColumns] = useState(['id', 'name', 'email']);

const handleSort = (columnName) => {
// Implement your sort logic
console.log('Sort by:', columnName);
};

return (
file={file}
isLabelToggled={false}
rowsPerPage={10}
currentPage={currentPage}
sortColumns={sortColumns}
onSort={handleSort}
visibleColumns={visibleColumns}
onPageChange={setCurrentPage}
magnifyIconSrc="/magnify.png"
/>
);
}
`

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| file | Object | Required | Data object containing columns and rows arrays |
| isLabelToggled | Boolean | false | Toggle between showing column names or labels |
| rowsPerPage | Number | 10 | Number of rows to display per page |
| currentPage | Number | 1 | Current page number |
| sortColumns | Array | [] | Array of sort configurations [{column: 'name', direction: 'asc'}] |
| onSort | Function | - | Callback when a column header is clicked |
| visibleColumns | Array | [] | Array of column names to display (empty shows all) |
| onPageChange | Function | - | Callback when page changes |
| processedRows | Array | - | Pre-processed rows (optional, uses file.rows if not provided) |
| rowNumberHeader | ReactNode | null | Custom content for row number header (e.g., icon, text, or React component) |

Column Object Structure

`javascript
{
name: 'column_name', // Required: Column identifier
label: 'Column Label', // Optional: Display label
dataType: 'string', // Optional: Data type
length: 100, // Optional: Maximum length
keySequence: 1, // Optional: Key column indicator
itemOID: 'IT.COL', // Optional: Item OID
codelist: 'CL.STATUS', // Optional: Codelist reference
format: 'DD-MMM-YYYY', // Optional: Format string
significantDigits: 2 // Optional: Number of significant digits
}
`

Examples

$3


`jsx

`

$3

`jsx
// With an icon
file={file}
rowNumberHeader={

}
/>

// With text
file={file}
rowNumberHeader={Row}
/>

// With a custom component
file={file}
rowNumberHeader={



}
/>

// Default (shows "#")

``

Styling

This component uses Tailwind CSS classes. Make sure you have Tailwind CSS configured in your Next.js project.

License

MIT