@catalystsoftware/ui 1.0.0

package/data/table-data.tsx

@@ -0,0 +1,706 @@
+export const componentsTable = [
+    {
+        name: "filter - TanStack Table, default column header",
+        value: "filter",
+        importPath: "~/components/catalyst-ui/table/filter-column",
+        path: "/components/catalyst-ui/components/table/filter-column.tsx",
+        premium: true,
+        source: null,
+        basicusage: `
+    meta: {
+        filterVariant: "datalist", // range, select, datalist, search, number, textInput, p
+        placeholder: "Min Quantity",
+        className: "text-center max-w-[250px]",
+    },
+`,
+        usage: `
+// need to replace tablehead with the following in your table, then use as the axample below
+<TableHead key={header.id} className="[&:has([role=checkbox])]:pl-3">
+    {header.isPlaceholder ? null : (
+        <>
+            {header.column.getCanFilter() ? (
+                <div>
+                    <Filter column={header.column} table={table} />
+                </div>
+            ) : null}
+        </>
+    )}
+</TableHead>
+ 
+{
+    accessorKey: "dealerId",
+    enableSorting: false,
+    enableHiding: false,
+    cell: ({ row }) => {
+        const data = row.original;
+        return (
+            <div className="flex justify-center">
+                <NavButton className="w-auto bg-transparent border-transparent text-center text-foreground" to=''>
+                    {data.dealerId}
+                </NavButton>
+            </div>
+        );
+    },
+    meta: {
+        filterVariant: "datalist", // range, select, datalist, search, number, textInput, p
+        placeholder: "Min Quantity",
+        className: "text-center max-w-[250px]",
+    },
+},
+        
+        `,
+        usagePath: null,
+        category: "Table",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        props: {
+            "Filter": [
+                { name: "column", type: "Column<any, unknown>", default: "null", required: true },
+                { name: "table", type: "Table<any>", default: "null", required: true },
+            ],
+            "meta": [
+                { name: "filterVariant", type: "range | select | datalist | search | number | textInput | p | datalist", default: "null", required: false },
+                { name: "placeholder", type: "string", default: "null", required: false },
+                { name: "className", type: "string", default: "null", required: false },
+            ],
+        },
+        desc: "Clearly over engineered for optimal laziness, never having to open the filter component in order to achieve the level of customization needed for each of the columns you create. Each header can be built with a range selector, select, datalist select, search input, number filter and finishing a with p ( text ) for the headers that do not need any time of functionality. Under meta ( example use will be included ) declare the filterVariant, placeholder, and className. As a default if the column id is a single word it will capatalize that word, if its two words you may want to use the placeholder variable. The default header is the p variant, so if you don't put any values, your text column header will have the following className, text-center text-muted-foreground max-w-[250px] w-full. Thus leaving you with the perfect default, only to be changed at your discretion.",
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: 'D Table',
+        value: 'd-table',
+        importPath: '~/components/catalyst-ui/table/d-table',
+        multiImport: 'CatalystTable, DraggableTableHeader',
+        basicusage: `<CatalystTable 
+  data={data} 
+  columns={columns} 
+/>
+
+<CatalystTable
+  data={data}
+  columns={columns}
+  tableId="unique-table-id"
+  options={{
+    enableGlobalFilter: true,
+    enableSorting: true,
+    enableFiltering: true,
+    enableRowSelection: false,
+    enableExpanding: false,
+    enablePagination: true,
+    enableColumnResizing: false,
+    enableColumnReordering: false,
+    enableHeaderGroups: false,
+    pageSize: 10,
+  }}
+  toolbarRight={<Button>Action</Button>}
+  renderSubComponent={({ row }) => <div>Details</div>}
+  className=""
+/>`,
+        path: '/components/catalyst-ui/components/table/d-table.tsx',
+        source: null,
+        usagePath: null,
+        usage: `
+// Sample data types
+interface Task {
+  id: string;
+  title: string;
+  status: 'backlog' | 'todo' | 'in progress' | 'done' | 'canceled';
+  priority: 'low' | 'medium' | 'high';
+  label: 'bug' | 'feature' | 'documentation';
+  assignee: string;
+  dueDate: string;
+  estimatedHours: number;
+  subRows?: Task[]; // For expandable rows
+}
+
+const sampleData: Task[] = [
+  {
+    id: '1',
+    title: 'Fix login page styling',
+    status: 'in progress',
+    priority: 'high',
+    label: 'bug',
+    assignee: 'Alice Johnson',
+    dueDate: '2024-01-15',
+    estimatedHours: 4,
+  },
+  {
+    id: '2',
+    title: 'Add dark mode support',
+    status: 'todo',
+    priority: 'medium',
+    label: 'feature',
+    assignee: 'Bob Smith',
+    dueDate: '2024-01-20',
+    estimatedHours: 8,
+  },
+  {
+    id: '3',
+    title: 'Update API documentation',
+    status: 'done',
+    priority: 'low',
+    label: 'documentation',
+    assignee: 'Carol Davis',
+    dueDate: '2024-01-10',
+    estimatedHours: 6,
+  },
+  {
+    id: '4',
+    title: 'Implement user profile page',
+    status: 'in progress',
+    priority: 'high',
+    label: 'feature',
+    assignee: 'David Wilson',
+    dueDate: '2024-01-18',
+    estimatedHours: 12,
+    subRows: [
+      {
+        id: '4-1',
+        title: 'Design profile layout',
+        status: 'done',
+        priority: 'medium',
+        label: 'feature',
+        assignee: 'David Wilson',
+        dueDate: '2024-01-12',
+        estimatedHours: 4,
+      },
+      {
+        id: '4-2',
+        title: 'Implement backend API',
+        status: 'in progress',
+        priority: 'high',
+        label: 'feature',
+        assignee: 'David Wilson',
+        dueDate: '2024-01-16',
+        estimatedHours: 8,
+      },
+    ],
+  },
+  {
+    id: '5',
+    title: 'Fix mobile responsive issues',
+    status: 'backlog',
+    priority: 'medium',
+    label: 'bug',
+    assignee: 'Eva Brown',
+    dueDate: '2024-01-25',
+    estimatedHours: 10,
+  },
+];
+
+const statusOptions = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+    icon: QuestionMarkCircle,
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+    icon: Circle,
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+    icon: Stopwatch,
+  },
+  {
+    value: 'done',
+    label: 'Done',
+    icon: CheckCircle,
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+    icon: XCircle,
+  },
+];
+
+const priorityOptions = [
+  {
+    label: 'Low',
+    value: 'low',
+    icon: ArrowDown,
+  },
+  {
+    label: 'Medium',
+    value: 'medium',
+    icon: ArrowRightIcon,
+  },
+  {
+    label: 'High',
+    value: 'high',
+    icon: ArrowUp,
+  },
+];
+
+const labelOptions = [
+  {
+    value: 'bug',
+    label: 'Bug',
+  },
+  {
+    value: 'feature',
+    label: 'Feature',
+  },
+  {
+    value: 'documentation',
+    label: 'Documentation',
+  },
+];
+
+export function CatalystTableDemo() {
+  const [data, setData] = useState<Task[]>(sampleData);
+  const [selectedRows, setSelectedRows] = useState({});
+
+  // Define columns with all features
+  const columns = useMemo(() => [
+    // Row selection column
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+      size: 40,
+    },
+    // Expandable row column
+    {
+      id: 'expander',
+      header: () => null,
+      cell: ({ row }) => {
+        return row.getCanExpand() ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={row.getToggleExpandedHandler()}
+          >
+            {row.getIsExpanded() ? '👇' : '👉'}
+          </Button>
+        ) : null;
+      },
+      size: 40,
+    },
+    // Title with sorting and filtering
+    {
+      accessorKey: 'title',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Title" />
+      ),
+      cell: ({ row }) => <div className="font-medium">{row.getValue('title')}</div>,
+      enableSorting: true,
+      enableColumnFilter: true,
+      filterFn: 'includesString',
+      size: 250,
+    },
+    // Status with faceted filter
+    {
+      accessorKey: 'status',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Status" />
+      ),
+      cell: ({ row }) => {
+        const status = statusOptions.find(s => s.value === row.getValue('status'));
+        const Icon = status?.icon;
+        return (
+          <div className="flex items-center gap-2">
+            {Icon && <Icon className="h-4 w-4" />}
+            <span className="capitalize">{row.getValue('status')}</span>
+          </div>
+        );
+      },
+      filterFn: 'arrIncludesSome',
+      enableSorting: true,
+      enableColumnFilter: true,
+      size: 150,
+    },
+    // Priority with faceted filter
+    {
+      accessorKey: 'priority',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Priority" />
+      ),
+      cell: ({ row }) => {
+        const priority = priorityOptions.find(p => p.value === row.getValue('priority'));
+        const Icon = priority?.icon;
+        return (
+          <div className="flex items-center gap-2">
+            {Icon && <Icon className="h-4 w-4" />}
+            <span className="capitalize">{row.getValue('priority')}</span>
+          </div>
+        );
+      },
+      filterFn: 'arrIncludesSome',
+      enableSorting: true,
+      enableColumnFilter: true,
+      size: 120,
+    },
+    // Label with faceted filter
+    {
+      accessorKey: 'label',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Label" />
+      ),
+      cell: ({ row }) => (
+        <span className="capitalize">{row.getValue('label')}</span>
+      ),
+      filterFn: 'arrIncludesSome',
+      enableSorting: true,
+      enableColumnFilter: true,
+      size: 120,
+    },
+    // Assignee with text filtering
+    {
+      accessorKey: 'assignee',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Assignee" />
+      ),
+      cell: ({ row }) => row.getValue('assignee'),
+      enableSorting: true,
+      enableColumnFilter: true,
+      size: 150,
+    },
+    // Due date with sorting
+    {
+      accessorKey: 'dueDate',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Due Date" />
+      ),
+      cell: ({ row }) => new Date(row.getValue('dueDate')).toLocaleDateString(),
+      enableSorting: true,
+      size: 120,
+    },
+    // Estimated hours with numeric sorting
+    {
+      accessorKey: 'estimatedHours',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Est. Hours" />
+      ),
+      cell: ({ row }) => \`\${row.getValue('estimatedHours')}h\`,
+      enableSorting: true,
+      size: 100,
+    },
+    // Actions column
+    {
+      id: 'actions',
+      cell: ({ row }) => <DataTableRowActions row={row} />,
+      size: 60,
+    },
+  ], []);
+
+  // Custom toolbar component
+  const toolbarRight = (
+    <div className="flex items-center gap-2">
+      <DataTableFacetedFilter
+        column={undefined} // Global filter
+        title="Status"
+        options={statusOptions}
+      />
+      <DataTableFacetedFilter
+        column={undefined} // Global filter
+        title="Priority"
+        options={priorityOptions}
+      />
+      <Button variant="outline" size="sm">
+        <Plus className="h-4 w-4 mr-2" />
+        New Task
+      </Button>
+    </div>
+  );
+
+  // Sub-component for expanded rows
+  const renderSubComponent = ({ row }) => {
+    const subRows = row.original.subRows || [];
+    return (
+      <div className="p-4 bg-muted/50 rounded-lg">
+        <h4 className="font-semibold mb-2">Sub-tasks:</h4>
+        {subRows.map((subTask) => (
+          <div key={subTask.id} className="flex items-center justify-between py-2 border-b last:border-b-0">
+            <span>{subTask.title}</span>
+            <span className="text-sm text-muted-foreground capitalize">
+              {subTask.status} • {subTask.priority} priority
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">Advanced Data Table Demo</h1>
+        <p className="text-muted-foreground">
+          Showcasing all features: sorting, filtering, pagination, row selection, 
+          expandable rows, column reordering, resizing, and more.
+        </p>
+      </div>
+
+      {/* Demo 1: Full-featured table */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4">1. Full Featured Table</h2>
+        <CatalystTable
+          data={data}
+          columns={columns}
+          tableId="full-featured-demo"
+          toolbarRight={toolbarRight}
+          renderSubComponent={renderSubComponent}
+          options={{
+            enableGlobalFilter: true,
+            enableSorting: true,
+            enableFiltering: true,
+            enableRowSelection: true,
+            enableExpanding: true,
+            enablePagination: true,
+            enableColumnResizing: true,
+            enableColumnReordering: true,
+            pageSize: 10,
+          }}
+        />
+      </div>
+
+      {/* Demo 2: Minimal table */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4">2. Minimal Table (Basic Features)</h2>
+        <CatalystTable
+          data={data}
+          columns={columns.filter(col => 
+            !['select', 'expander', 'actions'].includes(col.id as string)
+          )}
+          options={{
+            enableGlobalFilter: false,
+            enableSorting: true,
+            enableFiltering: false,
+            enableRowSelection: false,
+            enableExpanding: false,
+            enablePagination: true,
+            enableColumnResizing: false,
+            enableColumnReordering: false,
+            pageSize: 5,
+          }}
+        />
+      </div>
+
+      {/* Demo 3: Custom configuration */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4">3. Custom Configuration (No Pagination)</h2>
+        <CatalystTable
+          data={data}
+          columns={columns.filter(col => 
+            ['title', 'status', 'priority', 'assignee'].includes(col.accessorKey as string)
+          )}
+          options={{
+            enableGlobalFilter: true,
+            enableSorting: true,
+            enableFiltering: true,
+            enableRowSelection: false,
+            enableExpanding: false,
+            enablePagination: false, // No pagination
+            enableColumnResizing: true,
+            enableColumnReordering: true,
+          }}
+          className="max-w-4xl"
+        />
+      </div>
+
+      {/* Demo 4: Row selection with actions */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4">4. Row Selection with Bulk Actions</h2>
+        <CatalystTable
+          data={data}
+          columns={columns.filter(col => 
+            !['expander'].includes(col.id as string)
+          )}
+          options={{
+            enableGlobalFilter: true,
+            enableSorting: true,
+            enableFiltering: true,
+            enableRowSelection: true,
+            enableExpanding: false,
+            enablePagination: true,
+            enableColumnResizing: false,
+            enableColumnReordering: false,
+            pageSize: 10,
+          }}
+        />
+      </div>
+    </div>
+  );
+}`,
+        premium: true,
+        category: "Table",
+        tags: ['data', 'table', 'tanstack', 'filtering', 'sorting', 'pagination', 'drag-drop', 'resizing'],
+        features: [
+            'Responsive',
+            'TypeScript',
+            'Accessible',
+            'Column Resizing',
+            'Column Reordering',
+            'Persistent Layout',
+            'Sub Components',
+            'Global Search',
+        ],
+        dependencies: [
+            '@tanstack/react-table',
+            '@dnd-kit/core',
+            '@dnd-kit/sortable',
+            '@dnd-kit/utilities',
+            'lucide-react',
+            'react',
+            'class-variance-authority',
+        ],
+        props: {
+            CatalystTable: [
+                { name: 'data', type: 'any[]', default: 'null' },
+                { name: 'columns', type: 'ColumnDef<any>[]', default: 'null' },
+                { name: 'tableId', type: 'string', default: 'null' },
+                { name: 'options', type: 'object', default: '{}' },
+                { name: 'options.enableGlobalFilter', type: 'boolean', default: 'true' },
+                { name: 'options.enableSorting', type: 'boolean', default: 'true' },
+                { name: 'options.enableFiltering', type: 'boolean', default: 'true' },
+                { name: 'options.enableRowSelection', type: 'boolean', default: 'false' },
+                { name: 'options.enableExpanding', type: 'boolean', default: 'false' },
+                { name: 'options.enablePagination', type: 'boolean', default: 'true' },
+                { name: 'options.enableColumnResizing', type: 'boolean', default: 'false' },
+                { name: 'options.enableColumnReordering', type: 'boolean', default: 'false' },
+                { name: 'options.enableHeaderGroups', type: 'boolean', default: 'false' },
+                { name: 'options.pageSize', type: 'number', default: '10' },
+                { name: 'toolbarRight', type: 'React.ReactNode', default: 'null' },
+                { name: 'renderSubComponent', type: 'function', default: 'null' },
+                { name: 'className', type: 'string', default: 'null' },
+            ],
+            "DataTableFacetedFilter": [
+                { name: "column", type: "Column<TData, TValue>", default: "null", desc: "Table column to filter" },
+                { name: "title", type: "string", default: "null", desc: "Title for the filter dropdown" },
+                { name: "options", type: "{ label: string; value: string; icon?: ComponentType }[]", default: "[]", desc: "Filter options with labels, values, and optional icons" },
+            ],
+            "DataTableColumnHeader": [
+                { name: "column", type: "Column<TData, TValue>", default: "null", required: true, desc: "Table column" },
+                { name: "title", type: "string", default: "null", required: true, desc: "Column header title" },
+                { name: "className", type: "string", default: "null", desc: "Additional CSS classes" },
+            ],
+            "DataTableRowActions": [
+                { name: "row", type: "any", default: "null", required: true, desc: "Table row data" },
+            ],
+            "DraggableTableHeader": [
+                { name: "header", type: "any", default: "null", required: true, desc: "Table header object" },
+                { name: "children", type: "React.ReactNode", default: "null", required: true, desc: "Header content" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Props Table",
+        value: "props-table",
+        importPath: "~/components/catalyst-ui/components/utility/props-table",
+        multiImport: null,
+        basicusage: `
+const simpleProps: PropDefinition[] = [
+    { 
+      name: "className", 
+      type: "string", 
+      default: "''", 
+      description: "Additional CSS classes",
+      required: false 
+    },
+    { 
+      name: "variant", 
+      type: "'default' | 'outline' | 'ghost'", 
+      default: "'default'", 
+      description: "Button style variant",
+      required: false 
+    },
+    { 
+      name: "size", 
+      type: "'sm' | 'md' | 'lg'", 
+      default: "'md'", 
+      description: "Button size",
+      required: true 
+    },
+  ]
+<PropsTable props={propsArray} />`,
+        path: "/components/catalyst-ui/components/utility/props-table.tsx",
+        source: null,
+        usagePath: null,
+        usage: `
+export function PropsTableDemo() {
+  const simpleProps: PropDefinition[] = [
+    { 
+      name: "className", 
+      type: "string", 
+      default: "''", 
+      description: "Additional CSS classes",
+      required: false 
+    },
+    { 
+      name: "variant", 
+      type: "'default' | 'outline' | 'ghost'", 
+      default: "'default'", 
+      description: "Button style variant",
+      required: false 
+    },
+    { 
+      name: "size", 
+      type: "'sm' | 'md' | 'lg'", 
+      default: "'md'", 
+      description: "Button size",
+      required: true 
+    },
+  ]
+
+  const multiComponentProps: Record<string, PropDefinition[]> = {
+    Button: [
+      { name: "className", type: "string", default: "''", description: "Additional CSS classes" },
+      { name: "variant", type: "'default' | 'outline'", default: "'default'", description: "Style variant" },
+    ],
+    Input: [
+      { name: "className", type: "string", default: "''", description: "Additional CSS classes" },
+      { name: "type", type: "string", default: "'text'", description: "Input type" },
+    ],
+  }
+
+  return (
+    <div className="space-y-8 p-6 max-w-4xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Simple Props Table</h2>
+        <PropsTable props={simpleProps} />
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Multi-Component Props Table</h2>
+        <PropsTable props={multiComponentProps} />
+      </div>
+    </div>
+  )
+}
+`,
+        premium: true,
+        category: "Table",
+        tags: ["utility", "documentation", "table"],
+        features: ["Responsive", "TypeScript", "Copy to Clipboard"],
+        dependencies: ["lucide-react", "react"],
+        props: [
+            { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]> | null", default: "null", description: "Props data to display in table format", required: true },
+        ],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+];