FluentGrid - Advanced React Data Grid Component

A powerful, customizable data grid component built with React, TypeScript, and TanStack Table v8. Features include column resizing, pinning, filtering, sorting, pagination, cell editing, and theme support.

🚀 Features

• 📊 Advanced Data Grid: Built on TanStack Table v8 for maximum performance
• 🎨 Theme Support: Light/dark mode with custom primary colors
• 📏 Column Management: Resize, pin, reorder, and hide columns
• 🔍 Smart Filtering: Type-specific filters with advanced operators
• ✏️ Cell Editing: Inline editing with validation and large text support
• 📱 Responsive Design: Mobile-friendly with adaptive layouts
• ⚡ Virtual Scrolling: Optimized for large datasets
• 🎯 Bulk Actions: Multi-select with bulk operations
• 📤 Import/Export: CSV and Excel support
• 🔧 Highly Customizable: Extensive props and styling options

📦 Installation

npm install react-datagrid-component
# or
yarn add react-datagrid-component
# or
pnpm add react-datagrid-component

🎨 Including Styles

Important: You must import the CSS file to use the component properly:

import 'react-datagrid-component/dist/style.css';

The CSS file includes:

• Tailwind CSS utilities
• Component-specific styles
• Theme-aware styling
• Responsive design
• Accessibility features

🎯 Quick Start

import { DataGridTable } from 'react-datagrid-component';
import 'react-datagrid-component/dist/style.css'; // Include styles

const columns = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    type: 'text',
    editable: true,
  },
  {
    id: 'age',
    header: 'Age',
    accessorKey: 'age',
    type: 'number',
    sortable: true,
  },
  {
    id: 'status',
    header: 'Status',
    accessorKey: 'status',
    type: 'badge',
    options: [
      { label: 'Active', value: 'active' },
      { label: 'Inactive', value: 'inactive' },
    ],
  },
];

const data = [
  { id: 1, name: 'John Doe', age: 30, status: 'active' },
  { id: 2, name: 'Jane Smith', age: 25, status: 'inactive' },
];

function App() {
  return (
    <DataGridTable
      data={data}
      columns={columns}
      tableName="Users"
      onDataChange={(newData) => console.log('Data changed:', newData)}
    />
  );
}

📚 API Reference

DataGridTable Props

Column Types

Column Properties

🎨 Styling

The component uses Tailwind CSS for styling and includes comprehensive CSS classes. You can customize the appearance in several ways:

1. CSS Import (Required)

import 'react-datagrid-component/dist/style.css';

2. Theme Variables

Override CSS custom properties for theming:

:root {
  --primary: 20 14.3% 4.1%;
  --primary-foreground: 60 9.1% 97.8%;
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --ring: 215 20.2% 65.1%;
  /* ... more variables */
}

3. Custom Classes

Pass additional CSS classes via the className prop:

<DataGridTable
  data={data}
  columns={columns}
  className="my-custom-grid bg-blue-50"
/>

4. Component-Specific Classes

The CSS includes utility classes for specific components:

.fluent-grid-badge.active { /* Active badge styles */ }
.fluent-grid-avatar { /* Avatar styles */ }
.fluent-grid-progress { /* Progress bar styles */ }
.fluent-grid-search { /* Search input styles */ }

5. Tailwind Configuration

Extend your Tailwind configuration to include the component's design tokens:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    'node_modules/react-datagrid-component/dist/**/*.js'
  ],
  theme: {
    extend: {
      colors: {
        // Your custom colors
      }
    }
  }
}

🔧 Advanced Usage

Custom Cell Renderers

import { CellRenderer } from 'fluent-grid';

const CustomCell = ({ value, row, column, isEditing, onSave, onCancel }) => {
  if (isEditing) {
    return (
      <input
        value={value}
        onChange={(e) => onSave(e.target.value)}
        onBlur={onCancel}
        autoFocus
      />
    );
  }
  return <span>{value}</span>;
};

const columns = [
  {
    id: 'custom',
    header: 'Custom',
    accessorKey: 'custom',
    cell: CustomCell,
  },
];

API Integration

const apiConfig = {
  fetchUrl: 'https://api.example.com/users',
  updateUrl: 'https://api.example.com/users/:id',
  deleteUrl: 'https://api.example.com/users',
  method: 'PATCH',
};

<DataGridTable
  data={data}
  columns={columns}
  apiConfig={apiConfig}
  onRowEdit={async (row, field, value) => {
    // Custom edit logic
    await updateUser(row.id, { [field]: value });
  }}
/>

Custom Filtering

const columns = [
  {
    id: 'status',
    header: 'Status',
    accessorKey: 'status',
    type: 'select',
    filterable: true,
    options: [
      { label: 'Active', value: 'active' },
      { label: 'Inactive', value: 'inactive' },
      { label: 'Pending', value: 'pending' },
    ],
  },
];

📦 Exported Components

• DataGridTable - Main data grid component
• ThemePicker - Theme selection component
• FileUpload - Import/export component
• ColumnVisibility - Column visibility toggle
• ColumnFilter - Individual column filter
• AppliedFilters - Active filters display
• BulkActions - Bulk operations component
• TablePagination - Pagination component
• CellRenderer - Cell rendering utilities
• DensitySelector - Row density selector
• PinnedColumnsIndicator - Pinned columns display
• LargeTextEditor - Large text editing dialog
• ResizablePopup - Resizable popup component

🔗 Dependencies

Peer Dependencies

• react ^18.0.0
• react-dom ^18.0.0
• @tanstack/react-table ^8.0.0

Required Dependencies

• @radix-ui/* - UI primitives
• lucide-react - Icons
• date-fns - Date utilities
• react-day-picker - Date picker
• class-variance-authority - Component variants
• clsx - Conditional classes
• tailwind-merge - Tailwind class merging

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details

🔧 Troubleshooting

CSS Import Issues

If you encounter an error like:

Failed to resolve import "react-datagrid-component/dist/style.css"

Solution: Make sure you're importing the CSS file correctly:

import 'react-datagrid-component/dist/style.css';

Common issues:

1. Missing CSS import: Always import the CSS file after installing the package
2. Build tool configuration: Ensure your bundler (Vite, Webpack, etc.) can handle CSS imports
3. Package version: Make sure you're using the latest version of the package

Styling Issues

If the component doesn't look styled properly:

1. Check CSS import: Ensure the CSS file is imported
2. Tailwind CSS: Make sure Tailwind CSS is installed and configured in your project
3. CSS variables: Verify that your CSS custom properties are defined

Build Issues

If you encounter build errors:

1. Peer dependencies: Ensure all peer dependencies are installed
2. TypeScript: Make sure TypeScript is configured to handle the package types
3. Module resolution: Check that your bundler can resolve ES modules

🆘 Support

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions