🧮 DataGrid

A lightweight, high-performance, and customizable data grid component for React, ideal for rendering large data sets with support for sorting, searching, pagination, theming, and responsive layouts.

🧱 Columns Configuration Example

const columns = [
  {
    name: 'username',
    alias: 'User Name',
    width: '200px',
    enableSearch: true
  },
  {
    name: 'status',
    alias: 'Account Status',
    hidden: false
  }
];

🎛 Props in Action

pageSize + onPageChange

<DataGrid
  columns={columns}
  data={largeDataset}
  pageSize={10}
  onPageChange={(e, newPage) => console.log(`Page changed to: ${newPage}`)}
/>

Row Interaction Events

<DataGrid
  columns={columns}
  data={data}
  onRowClick={(e, row) => alert(`You clicked on ${row.name}`)}
  onRowHover={(e, row) => console.log('Hovered:', row.id)}
  onRowOut={() => console.log('Mouse left row')}
/>

Global Search & Sort Events

<DataGrid
  columns={columns}
  data={data}
  options={ enableGlobalSearch: true }
  onSearchComplete={(e, query, columns, result, matchCount) => console.log('Search Results:', result)}
  onSortComplete={(e, sortColumns, sortedData, sortOrder) => console.log('Sorted Data:', sortedData)}
/>

Custom Grid Dimensions

<DataGrid
  columns={columns}
  data={data}
  width="100%"
  height="400px"
  maxWidth="1200px"
  maxHeight="80vh"
/>

Resizable Columns (v1.1.0+)

<DataGrid
  columns={columns}
  data={data}
  onColumnResized={(e, newWidth, columnName) =>
    console.log(`${columnName} resized to ${newWidth}px`)
  }
/>

🎨 Themes

Available themes:

• 'blue-core'
• 'dark-stack'
• 'medi-glow'
• '' (default/neutral)

Example:

<DataGrid
  columns={columns}
  data={data}
  theme="blue-core"
/>

📌 Version-Specific Features