@zip_co/react-datagrid

React DataGrid

A powerful, customizable React DataGrid component built with TypeScript and Tailwind CSS.

Features

• 📊 Advanced Data Grid: Full-featured data grid with sorting, filtering, and pagination
• 🎨 Customizable: Highly customizable with Tailwind CSS classes
• 📱 Responsive: Mobile-friendly with different display modes
• 🔄 Real-time Updates: Supports real-time data updates
• 🎯 TypeScript: Fully typed with TypeScript support
• 🧪 Tested: Comprehensive test coverage
• ♿ Accessible: Built with accessibility in mind

Installation

npm install @your-org/react-datagrid
# or
yarn add @your-org/react-datagrid
# or
pnpm add @your-org/react-datagrid

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0",
  "@tanstack/react-table": ">=8.0.0"
}

Quick Start

import { DataGrid } from '@your-org/react-datagrid';
import { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John Doe', email: '[e-mail]' },
    { id: 2, name: 'Jane Smith', email: '[e-mail]' },
  ]);

  const columns = [
    { accessorKey: 'id', header: 'ID' },
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'email', header: 'Email' },
  ];

  return (
    <DataGrid
      data={data}
      columns={columns}
      state={{
        sorting: [],
        globalFilter: '',
        columnVisibility: {},
        columnOrder: [],
        columnPinning: {},
        rowSelection: {},
        pagination: { pageIndex: 0, pageSize: 10 },
      }}
      onStateChange={{
        setSorting: () => {},
        setGlobalFilter: () => {},
        setColumnVisibility: () => {},
        setColumnOrder: () => {},
        setColumnPinning: () => {},
        setRowSelection: () => {},
        setPagination: () => {},
      }}
    />
  );
};

API Reference

DataGrid Props

Prop	Type	Default	Description
data	T[]	-	Array of data objects
columns	ColumnDef<T>[]	-	Column definitions
state	DataGridState	-	Current grid state
onStateChange	DataGridStateChange	-	State change handlers
dir	'ltr' | 'rtl'	'rtl'	Text direction
density	'compact' | 'normal' | 'comfortable'	'normal'	Row density
mobileMode	'scroll' | 'stack'	'scroll'	Mobile display mode
scrollMode	'body-only' | 'full'	'body-only'	Scroll behavior
paginationMode	'pages' | 'infinite'	'pages'	Pagination mode
selectionMode	'none' | 'single' | 'multiple'	'multiple'	Row selection mode
enableColumnDragDrop	boolean	false	Enable column reordering

Components

• DataGrid - Main data grid component
• DataGridHeader - Grid header component
• DataGridBody - Grid body component
• DataGridCell - Individual cell component
• DataGridPagination - Pagination component
• DataGridToolbar - Toolbar component
• DataGridActions - Actions component

Hooks

• useDataGrid - Main data grid hook
• useDataGridContext - Context hook
• useDataGridState - State management hook
• useAdvancedFilter - Advanced filtering hook
• useColumnOrderDnD - Drag and drop hook
• useColumnPinningSync - Column pinning hook
• useGridTemplate - Grid template hook
• useIntersection - Intersection observer hook

Styling

The component uses Tailwind CSS for styling. You can customize the appearance by:

• Overriding CSS classes using the classNames prop
• Using the variants prop for different visual variants
• Customizing the base Tailwind configuration

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the package
npm run build

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

Contributing

• Fork the repository
• Create a feature branch
• Make your changes
• Add tests for new functionality
• Run the test suite
• Submit a pull request

License

MIT License - see LICENSE file for details.