npm package: @prix_international/generic-table
Description: A reusable React generic table component with filters, actions, and customizable columns
Author: Elver Rodriguez
Latest version: 1.0.4

# @prix_international/generic-table

A reusable React generic table component with filters, actions, and customizable columns.

## Installation

```bash
npm install @prix_international/generic-table
```

## Peer Dependencies

This package requires the following peer dependencies:

- `react` ^18.0.0
- `react-dom` ^18.0.0
- `lucide-react` ^0.263.0

You also need to provide your own shadcn/ui components (Table, Button, Input, Select, Checkbox, Switch, etc.) as they are not included in this package.

## Usage

### Basic Example

```tsx
import { GenericTable } from '@prix_international/generic-table';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  Button,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Checkbox,
  Switch,
} from '@/components/ui'; // Your shadcn/ui components

const uiComponents = {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  Checkbox,
  Button,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Switch,
};

const columns = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
];

const data = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
];

function MyTable() {
  return (
    <GenericTable
      data={data}
      columns={columns}
      uiComponents={uiComponents}
      enableActions
      showViewAction={true}
      showEditAction={false}
      showDeleteAction={false}
      showMoreAction={false}
      onViewRow={(row) => console.log('View', row)}
    />
  );
}
```

### With Filters

```tsx
function MyTableWithFilters() {
  const [query, setQuery] = useState('');
  const [status, setStatus] = useState('all');

  const filters = [
    {
      key: 'query',
      type: 'input' as const,
      placeholder: 'Buscar...',
      value: query,
      onChange: (value) => setQuery(value as string),
    },
    {
      key: 'status',
      type: 'select' as const,
      placeholder: 'Estado',
      value: status,
      onChange: (value) => setStatus(value as string),
      options: [
        { value: 'all', label: 'Todos' },
        { value: 'active', label: 'Activo' },
        { value: 'inactive', label: 'Inactivo' },
      ],
    },
  ];

  return (
    <GenericTable
      data={data}
      columns={columns}
      uiComponents={uiComponents}
      filters={filters}
      perPage={10}
      onPerPageChange={(value) => console.log('Per page:', value)}
      showExport
      onExport={() => console.log('Export')}
    />
  );
}
```

### With Custom Actions

```tsx
import { Download, Share2 } from 'lucide-react';

function MyTableWithCustomActions() {
  return (
    <GenericTable
      data={data}
      columns={columns}
      uiComponents={uiComponents}
      enableActions
      showViewAction={true}
      showEditAction={false}
      showDeleteAction={false}
      showMoreAction={false}
      onViewRow={(row) => console.log('View', row)}
      customActions={(row) => [
        {
          label: 'Descargar',
          icon: <Download className="h-4 w-4" />,
          onClick: () => handleDownload(row),
          variant: 'ghost' as const,
        },
        {
          label: 'Compartir',
          icon: <Share2 className="h-4 w-4" />,
          onClick: () => handleShare(row),
          variant: 'ghost' as const,
        },
      ]}
    />
  );
}
```

## API Reference

### GenericTable Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `T[]` | required | Array of data to display |
| `columns` | `Column<T>[]` | required | Column definitions |
| `uiComponents` | `UIComponents` | required | shadcn/ui components object |
| `loading` | `boolean` | `false` | Show loading state |
| `emptyMessage` | `string` | `'No hay datos para mostrar'` | Message when no data |
| `enableCheckbox` | `boolean` | `false` | Enable row selection |
| `enableActions` | `boolean` | `false` | Enable action buttons |
| `showViewAction` | `boolean` | `true` | Show view action button |
| `showEditAction` | `boolean` | `true` | Show edit action button |
| `showDeleteAction` | `boolean` | `true` | Show delete action button |
| `showMoreAction` | `boolean` | `true` | Show more action button |
| `onViewRow` | `(row: T) => void` | - | Callback for view action |
| `onEditRow` | `(row: T) => void` | - | Callback for edit action |
| `onDeleteRow` | `(row: T) => void` | - | Callback for delete action |
| `onMoreRow` | `(row: T) => void` | - | Callback for more action |
| `customActions` | `(row: T, index: number) => ActionButtonConfig[]` | - | Custom action buttons |
| `filters` | `FilterConfig[]` | - | Filter configurations |
| `perPage` | `number` | - | Items per page |
| `onPerPageChange` | `(value: number) => void` | - | Callback when per page changes |
| `showExport` | `boolean` | `false` | Show export button |
| `onExport` | `() => void` | - | Export callback |

## License

MIT