react-fluent-grid/README.md

A powerful, customizable data grid component built with React, TypeScript, and TanStack Table v8

# React FluentGrid

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

## Features

- ✅ **Column Resizing** - Drag to resize columns
- ✅ **Column Pinning** - Pin columns to left or right
- ✅ **Sorting** - Multi-column sorting
- ✅ **Filtering** - Advanced filtering with multiple operators
- ✅ **Pagination** - Built-in pagination with customizable page sizes
- ✅ **Row Selection** - Single and multi-row selection
- ✅ **Cell Editing** - Inline cell editing with validation
- ✅ **Global Search** - Search across all columns
- ✅ **Theme Support** - Light/dark theme with custom colors
- ✅ **Export/Import** - CSV, Excel export and import
- ✅ **Responsive** - Mobile-friendly design
- ✅ **TypeScript** - Full TypeScript support
- ✅ **Accessible** - WCAG compliant

## Installation

```bash
npm install react-fluent-grid
```

### Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install @tanstack/react-table react react-dom
```

## Quick Start

```tsx
import { DataGrid } from 'react-fluent-grid';
import 'react-fluent-grid/dist/style.css';

const columns = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    type: 'text',
    sortable: true,
    filterable: true,
  },
  {
    id: 'email',
    header: 'Email',
    accessorKey: 'email',
    type: 'text',
    sortable: true,
    filterable: true,
  },
  {
    id: 'status',
    header: 'Status',
    accessorKey: 'status',
    type: 'badge',
    sortable: true,
    filterable: true,
  },
];

const data = [
  { name: 'John Doe', email: 'john@example.com', status: 'active' },
  { name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
];

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

## Advanced Usage

### Column Configuration

```tsx
const columns = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    type: 'text',
    sortable: true,
    filterable: true,
    editable: true,
    pinnable: true,
    width: 200,
    minWidth: 100,
    maxWidth: 300,
  },
  {
    id: 'age',
    header: 'Age',
    accessorKey: 'age',
    type: 'number',
    sortable: true,
    filterable: true,
    editable: true,
  },
  {
    id: 'birthDate',
    header: 'Birth Date',
    accessorKey: 'birthDate',
    type: 'date',
    sortable: true,
    filterable: true,
  },
  {
    id: 'status',
    header: 'Status',
    accessorKey: 'status',
    type: 'select',
    options: ['active', 'inactive', 'pending'],
    sortable: true,
    filterable: true,
  },
  {
    id: 'description',
    header: 'Description',
    accessorKey: 'description',
    type: 'largeText',
    sortable: false,
    filterable: true,
  },
];
```

### API Integration

```tsx
import { DataGrid } from 'react-fluent-grid';

function App() {
  return (
    <DataGrid
      data={data}
      columns={columns}
      tableName="Users"
      apiConfig={{
        fetchUrl: 'https://api.example.com/users',
        updateUrl: 'https://api.example.com/users',
        deleteUrl: 'https://api.example.com/users',
        method: 'PATCH',
      }}
      onRowEdit={async (row, field, value) => {
        // Custom edit logic
        console.log('Editing:', row, field, value);
      }}
      onRowDelete={async (rows) => {
        // Custom delete logic
        console.log('Deleting:', rows);
      }}
    />
  );
}
```

### Custom Styling

```tsx
import { DataGrid } from 'react-fluent-grid';
import 'react-fluent-grid/dist/style.css';

function App() {
  return (
    <DataGrid
      data={data}
      columns={columns}
      tableName="Users"
      theming={{
        enabled: true,
        defaultTheme: 'dark',
      }}
      className="my-custom-grid"
    />
  );
}
```

## Column Types

- `text` - Regular text input
- `number` - Numeric input
- `select` - Dropdown selection
- `date` - Date picker
- `badge` - Status badge
- `image` - Image display
- `chart` - Chart component
- `largeText` - Multi-line text editor
- `timestamp` - Date/time display

## Props

### DataGridProps

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `T[]` | `[]` | Array of data objects |
| `columns` | `DataGridColumn[]` | `[]` | Column definitions |
| `tableName` | `string` | - | Display name for the table |
| `loading` | `boolean` | `false` | Loading state |
| `error` | `string` | - | Error message |
| `onDataChange` | `(data: T[]) => void` | - | Callback when data changes |
| `onRowEdit` | `(row: T, field: keyof T, value: any) => Promise<void>` | - | Row edit callback |
| `onRowDelete` | `(rows: T[]) => Promise<void>` | - | Row delete callback |
| `onExport` | `(data: T[], format: string) => void` | - | Export callback |
| `onImport` | `(data: T[]) => void` | - | Import callback |
| `pagination` | `PaginationConfig` | `{ pageSize: 25, showSizeSelect: true }` | Pagination settings |
| `selection` | `SelectionConfig` | `{ enabled: true }` | Row selection settings |
| `globalSearch` | `GlobalSearchConfig` | `{ enabled: true }` | Global search settings |
| `theming` | `ThemingConfig` | `{ enabled: true, defaultTheme: 'light' }` | Theme settings |
| `className` | `string` | `""` | Additional CSS classes |
| `apiConfig` | `DataGridApiConfig` | - | API configuration |

## CSS Customization

The component uses CSS custom properties for theming. You can override these in your CSS:

```css
:root {
  --primary: 222.2 47.4% 11.2%;
  --grid-header-bg: 210 40% 98%;
  --grid-row-hover: 210 40% 98%;
  --grid-cell-border: 214.3 31.8% 92%;
}

.dark {
  --primary: 210 40% 98%;
  --grid-header-bg: 217.2 32.6% 12%;
  --grid-row-hover: 217.2 32.6% 12%;
  --grid-cell-border: 217.2 32.6% 15%;
}
```

## Browser Support

- Chrome >= 88
- Firefox >= 85
- Safari >= 14
- Edge >= 88

## React Version Support

- React 18.x
- React 19.x (experimental)

## License

MIT

## Contributing

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

## Changelog

### v1.0.5
- Fixed column resize functionality for npm package
- Added comprehensive CSS styles
- Improved React 19 compatibility
- Enhanced build configuration
- Added proper CSS injection

### v1.0.4
- Initial release
- Basic DataGrid functionality
- Column resizing, pinning, sorting, filtering
- Pagination and row selection
- Theme support