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

npm install nextjs-datatable-component

Usage

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', '[email protected]'],
      ['2', 'Jane Smith', '[email protected]'],
      ['3', 'Bob Johnson', '[email protected]']
    ]
  };

  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 (
    <DataTable
      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

{
  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

Basic Usage

<DataTable file={file} />

With Custom Row Number Header

// With an icon
<DataTable 
  file={file}
  rowNumberHeader={
    <img src="/search.svg" alt="Search" className="w-4 h-4" />
  }
/>

// With text
<DataTable 
  file={file}
  rowNumberHeader={<span>Row</span>}
/>

// With a custom component
<DataTable 
  file={file}
  rowNumberHeader={
    <button className="p-1 hover:bg-gray-200 rounded">
      <SearchIcon className="w-4 h-4" />
    </button>
  }
/>

// Default (shows "#")
<DataTable file={file} />

Styling

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

License

MIT