YaYaw Table Demo

// 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,
        allowViewSave: true,
        allowViewSharing: false,
        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",
        layoutPreset: "catalog",
        displayModes: ["table", "kanban", "gallery"],
        defaultDisplayMode: "table",
        kanban: {
          groupBy: "status",
          titleColumn: "name",
          cardColumnIds: ["brand", "category", "price", "isActive"],
          groups: [
            { value: "In Stock" },
            { value: "Low Stock" },
            { value: "Out of Stock" }
          ],
          allowDragUpdate: true
        },
        gallery: {
          imageColumn: "imageUrl",
          titleColumn: "name",
          cardColumnIds: ["brand", "category", "price", "status"],
          aspectRatio: "square",
          imageFit: "contain",
          cardSize: "medium"
        },
        emptyState: {
          title: "No products found",
          description: "Try changing your search or filters.",
        },
        rowClickMode: "activate",
        actionsAsIcons: false
      },
      columns: {
        definitions: [
          { id: "imageUrl", type: "image", header: "Image" },
          { 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: {
              "In Stock": "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",
          "imageUrl",
          "name",
          "brand",
          "category",
          "price",
          "status",
          "createdAt",
          "isActive",
          "actions"
        ]
      }
    }
  }
}

// 2. Production Table with Real API
const [activeRowId, setActiveRowId] = useState<string>();

<DataTable 
  activeRowId={activeRowId}
  tableType="products"
  enableAdvancedFilters={true}
  getRowId={(row) => String(row.id)}
  onRowActivate={(row) => setActiveRowId(String(row.id))}
  columnTypeMapping={{
    name: 'text',
    imageUrl: '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.