Démo YaYaw Table

// 1. Configuration via provider
const getTableConfig = (tableType: string) => {
  if (tableType === "products") {
    return {
      table: { 
        allowCreate: true,
        allowEdit: true,
        allowDuplicate: true,
        allowDelete: true,
        allowBulkEdit: true,
        allowBulkDelete: true,
        allowInlineEdit: true,
        enableRowSelection: true,
        enableColumnFilters: true,
        enableCalculations: false,
        enableColumnDnd: true,
        enableSorting: true,
        enableGrouping: true,
        enablePagination: true,
        enableRowClickEdit: false,
        export: true,
        bulkExport: true,
        showToolbar: true,
        showToolbarHeader: true,
        density: "medium",
        actionsAsIcons: false
      },
      columns: {
        definitions: [
          { id: "name", type: "text", header: "Product Name" },
          { id: "brand", type: "text", header: "Brand" },
          {
            id: "category",
            type: "select",
            displayVariant: "tag",
            header: "Category",
            tagColorMap: {
              Electronics: "bg-blue-500/80 text-white dark:bg-blue-600/90",
              Furniture: "bg-amber-500/80 text-white dark:bg-amber-600/90"
            }
          },
          {
            id: "price",
            type: "number",
            header: "Price",
            numberFormat: {
              thousandsSeparator: " ",
              decimals: 0,
              suffix: " €",
            },
          },
          {
            id: "status",
            type: "select",
            displayVariant: "tag",
            header: "Status",
            tagColorMap: {
              available: "bg-green-500/80 text-white dark:bg-green-600/90",
              low_stock: "bg-orange-500/80 text-white dark:bg-orange-600/90",
              out_of_stock: "bg-red-500/80 text-white dark:bg-red-600/90"
            }
          },
          { id: "createdAt", type: "date", header: "Created" },
          { id: "isActive", type: "boolean", header: "Active" },
          { id: "actions", type: "actions", header: "Actions" }
        ],
        visible: [
          "select",
          "name",
          "brand",
          "category",
          "price",
          "status",
          "createdAt",
          "isActive",
          "actions"
        ]
      }
    }
  }
}

// 2. Production Table with Real API
<DataTable 
  tableType="products"
  enableAdvancedFilters={true}
  columnTypeMapping={{
    name: 'text',
    brand: 'text', 
    category: 'select',  // select with tag display variant
    price: 'number',
    status: 'select',    // select with tag display variant  
    website: 'text',
    createdAt: 'date',
    isActive: 'select'   // boolean -> select for true/false
  }}
/>

// Local data API with pagination, filtering, and sorting.
// Edits persist in localStorage and can be reset from the settings panel.