@prix_international/generic-table

A reusable React generic table component with filters, actions, and customizable columns.

Installation

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

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: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' },
];

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

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

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