@varialkit/table 0.1.0

package/examples.tsx

@@ -0,0 +1,1177 @@
+'use client';
+
+import { Button } from '@solara/button';
+import { Checkbox } from '@solara/checkbox';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import type { ReactElement } from 'react';
+import { createColumnHelper, flexRender, getCoreRowModel, getExpandedRowModel, getPaginationRowModel, Row, Table as TanStackTable, ColumnDef } from '@tanstack/react-table';
+import { Table } from './src/Table';
+import type { TableDensity, TableGridType, TableLayoutMode } from './src/Table.types';
+
+type PersonRow = {
+  avatar: string;
+  name: string;
+  role: string;
+  status: string;
+  lastActive: string;
+  subRows?: PersonRow[];
+};
+
+const columnHelper = createColumnHelper<PersonRow>();
+
+const data: PersonRow[] = [
+  { avatar: 'https://i.pravatar.cc/600?img=11', name: 'Avery Miles', role: 'Product Design', status: 'Active', lastActive: '2 hours ago' },
+  { avatar: 'https://i.pravatar.cc/600?img=22', name: 'Ravi Patel', role: 'Engineering', status: 'Active', lastActive: '1 day ago' },
+  { avatar: 'https://i.pravatar.cc/600?img=33', name: 'Jordan Lee', role: 'Operations', status: 'Away', lastActive: '3 days ago' },
+  { avatar: 'https://i.pravatar.cc/600?img=44', name: 'Maya Chen', role: 'Research', status: 'Active', lastActive: 'Just now' },
+  { avatar: 'https://i.pravatar.cc/600?img=55', name: 'Logan Kim', role: 'Sales', status: 'Inactive', lastActive: '2 weeks ago' },
+];
+
+const columns = [
+  columnHelper.accessor('avatar', {
+    header: 'Photo',
+    cell: (info) => (
+      <img
+        src={info.getValue()}
+        alt=""
+        style={{
+          width: '48px',
+          height: '48px',
+          borderRadius: '999px',
+          objectFit: 'cover',
+        }}
+      />
+    ),
+  }),
+  columnHelper.accessor('name', {
+    header: 'Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('role', {
+    header: 'Role',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('lastActive', {
+    header: 'Last Active',
+    cell: (info) => info.getValue(),
+  }),
+];
+
+const makeLargeData = (count: number): PersonRow[] =>
+  Array.from({ length: count }, (_, index) => ({
+    avatar: `https://i.pravatar.cc/600?img=${(index % 70) + 1}`,
+    name: `Person ${index + 1}`,
+    role: ['Engineering', 'Design', 'Operations', 'Sales'][index % 4],
+    status: ['Active', 'Away', 'Inactive'][index % 3],
+    lastActive: `${(index % 24) + 1} hours ago`,
+  }));
+
+function DensityMenuExample() {
+  const [density, setDensity] = useState<TableDensity>('standard');
+
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      // Density lives in state so the column controls menu can update it.
+      density={density}
+      enableColumnControls
+      onDensityChange={setDensity}
+    />
+  );
+}
+
+function GridDefaultExample() {
+  const [layoutMode, setLayoutMode] = useState<TableLayoutMode>('grid');
+
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      // Start in grid mode and allow switching to list from the built-in action menu.
+      layoutMode={layoutMode}
+      onLayoutModeChange={setLayoutMode}
+      enableLayoutToggle
+      enableColumnControls
+      gridType="grid"
+      // Grid can treat image/media as a full-bleed top area while details remain toggled fields.
+      gridColumnConfig={{
+        avatar: { variant: 'media', unpadded: true, showLabel: false },
+        name: { hiddenByDefault: true },
+        role: { hiddenByDefault: true },
+        status: { hiddenByDefault: true },
+        lastActive: { hiddenByDefault: true },
+      }}
+      // Grid renderer map lets each column control its own visual output.
+      gridCellRenderers={{
+        avatar: (cell, row) => (
+          <img
+            src={String(cell.getValue())}
+            alt={`${String(row.original.name)} profile`}
+            style={{ width: '100%', height: '100%', minHeight: '180px', objectFit: 'cover' }}
+          />
+        ),
+        status: (cell) => {
+          const value = String(cell.getValue());
+          const tone =
+            value === 'Active'
+              ? '#16a34a'
+              : value === 'Away'
+                ? '#f59e0b'
+                : '#64748b';
+          return (
+            <span
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                borderRadius: '999px',
+                padding: '2px 10px',
+                backgroundColor: `${tone}1A`,
+                color: tone,
+                fontWeight: 600,
+              }}
+            >
+              {value}
+            </span>
+          );
+        },
+        lastActive: (cell) => (
+          <span style={{ color: 'var(--color-text-secondary)' }}>
+            {String(cell.getValue())}
+          </span>
+        ),
+      }}
+    />
+  );
+}
+
+function GridMasonryExample() {
+  const [layoutMode, setLayoutMode] = useState<TableLayoutMode>('grid');
+  const [gridType, setGridType] = useState<TableGridType>('masonry');
+  const masonryImageSizes = [
+    { width: 720, height: 420 },
+    { width: 640, height: 860 },
+    { width: 800, height: 500 },
+    { width: 600, height: 920 },
+    { width: 760, height: 460 },
+  ];
+
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      layoutMode={layoutMode}
+      onLayoutModeChange={setLayoutMode}
+      enableLayoutToggle
+      enableColumnControls
+      // View menu supports List, Standard grid, and Masonry grid.
+      gridType={gridType}
+      onGridTypeChange={setGridType}
+      gridColumnConfig={{
+        avatar: { variant: 'media', unpadded: true, showLabel: false },
+        name: { hiddenByDefault: true },
+        role: { hiddenByDefault: true },
+        status: { hiddenByDefault: true },
+        lastActive: { hiddenByDefault: true },
+      }}
+      gridCellRenderers={{
+        avatar: (_cell, row) => {
+          // Use intentionally different source dimensions so masonry is obvious in docs/storybook.
+          const size = masonryImageSizes[row.index % masonryImageSizes.length];
+          // Seed by row id + name for stable-but-varied demo images across reloads.
+          const seed = `${row.id}-${String(row.original.name).toLowerCase().replace(/\s+/g, '-')}`;
+          const src = `https://picsum.photos/seed/${seed}/${size.width}/${size.height}`;
+
+          return (
+            <img
+              src={src}
+              alt={`${String(row.original.name)} profile`}
+              // In standard grid, fill the media slot; in masonry, preserve natural aspect ratio.
+              style={
+                gridType === 'masonry'
+                  ? { width: '100%', height: 'auto', display: 'block' }
+                  : { width: '100%', height: '100%', display: 'block', objectFit: 'cover' }
+              }
+            />
+          );
+        },
+      }}
+    />
+  );
+}
+
+function ListOnlyLayoutExample() {
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      layoutMode="list"
+      // List-only surfaces keep the same controls without exposing grid as a mode.
+      layoutModeOptions={['list']}
+      enableLayoutToggle
+      enableColumnControls
+    />
+  );
+}
+
+function SelectableRowsExample() {
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  const columnsWithSelect = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: function Header({ table }: { table: TanStackTable<PersonRow> }) {
+          // Solara Checkbox supports indeterminate directly, so we can mirror TanStack state without refs.
+          const isAllRowsSelected = table.getIsAllRowsSelected();
+          const isSomeRowsSelected = table.getIsSomeRowsSelected();
+
+          return (
+            <Checkbox
+              aria-label="Select all rows"
+              size="small"
+              checked={isAllRowsSelected}
+              indeterminate={!isAllRowsSelected && isSomeRowsSelected}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          );
+        },
+        cell: ({ row }: { row: Row<PersonRow> }) => (
+          <Checkbox
+            aria-label={`Select row ${row.id}`}
+            size="small"
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        ),
+      },
+      ...columns,
+    ],
+    []
+  );
+
+  return (
+    <Table
+      data={data}
+      columns={columnsWithSelect as any}
+      tableOptions={{
+        getCoreRowModel: getCoreRowModel(),
+        enableRowSelection: true,
+        state: { rowSelection },
+        onRowSelectionChange: setRowSelection,
+      }}
+    />
+  );
+}
+
+const dataWithSubRows: PersonRow[] = [
+  {
+    name: 'Avery Miles',
+    avatar: 'https://i.pravatar.cc/600?img=11',
+    role: 'Product Design',
+    status: 'Active',
+    lastActive: '2 hours ago',
+    subRows: [
+      { avatar: 'https://i.pravatar.cc/600?img=12', name: 'Sub Avery 1', role: 'Sub Role 1', status: 'Active', lastActive: '2 hours ago' },
+      { avatar: 'https://i.pravatar.cc/600?img=13', name: 'Sub Avery 2', role: 'Sub Role 2', status: 'Away', lastActive: '1 day ago' },
+    ],
+  },
+  { avatar: 'https://i.pravatar.cc/600?img=22', name: 'Ravi Patel', role: 'Engineering', status: 'Active', lastActive: '1 day ago', subRows: [] },
+  {
+    avatar: 'https://i.pravatar.cc/600?img=33',
+    name: 'Jordan Lee',
+    role: 'Operations',
+    status: 'Away',
+    lastActive: '3 days ago',
+    subRows: [
+      { avatar: 'https://i.pravatar.cc/600?img=34', name: 'Sub Jordan 1', role: 'Sub Role 3', status: 'Inactive', lastActive: '2 weeks ago' },
+    ],
+  },
+  { avatar: 'https://i.pravatar.cc/600?img=44', name: 'Maya Chen', role: 'Research', status: 'Active', lastActive: 'Just now', subRows: [] },
+  { avatar: 'https://i.pravatar.cc/600?img=55', name: 'Logan Kim', role: 'Sales', status: 'Inactive', lastActive: '2 weeks ago', subRows: [] },
+];
+
+function ExpandableRowsExample() {
+  const [expanded, setExpanded] = React.useState({});
+
+  const columnsWithToggle = useMemo(
+    () => [
+      {
+        id: 'expand',
+        header: () => null,
+        cell: ({ row }: { row: Row<PersonRow> }) => {
+          return row.getCanExpand() ? (
+            <Button
+              aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
+              variant="ghost"
+              iconOnly={row.getIsExpanded() ? 'arrow_chevron_down_16' : 'arrow_chevron_right_16'}
+              onClick={row.getToggleExpandedHandler()}
+            />
+          ) : null;
+        },
+      },
+      ...columns,
+    ],
+    []
+  );
+
+  return (
+    <Table
+      data={dataWithSubRows}
+      columns={columnsWithToggle as any}
+      tableOptions={{
+        state: { expanded },
+        onExpandedChange: setExpanded,
+        getSubRows: (row) => row.subRows,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+      }}
+    />
+  );
+}
+
+function PinnedColumnsExample() {
+  const [columnPinning, setColumnPinning] = useState({
+    left: ['name'],
+    right: [],
+  });
+  const [density, setDensity] = useState<TableDensity>('standard');
+
+  const pinnedColumns = useMemo(
+    () => [
+      columnHelper.accessor('name', {
+        header: 'Name',
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor('role', {
+        header: 'Role',
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor('lastActive', {
+        header: 'Last Active',
+        cell: (info) => info.getValue(),
+      }),
+    ],
+    []
+  );
+
+  return (
+    <div style={{ maxWidth: '520px' }}>
+      <Table
+        data={[...data, ...data, ...data, ...data]}
+        columns={pinnedColumns as any}
+        transparentSticky
+        transparentBackground
+        wrapperProps={{ style: { maxHeight: '220px', overflow: 'auto' } }}
+        tableProps={{ style: { minWidth: '640px' } }}
+        // Built-in menu handles visibility and order; pinning is still controlled via TanStack state.
+        enableColumnControls
+        density={density}
+        onDensityChange={setDensity}
+        tableOptions={{
+          getCoreRowModel: getCoreRowModel(),
+          enableColumnPinning: true,
+          state: { columnPinning },
+          onColumnPinningChange: setColumnPinning as any,
+        }}
+        getHeaderProps={(header) => {
+          const pinState = header.column.getIsPinned();
+          if (!pinState) return {};
+          const left = header.column.getStart('left');
+          return {
+            style: { left },
+            className: 'solara-table__header-cell--pinned',
+          };
+        }}
+        getCellProps={(cell) => {
+          const pinState = cell.column.getIsPinned();
+          if (!pinState) return {};
+          const left = cell.column.getStart('left');
+          return {
+            style: { left },
+            className: 'solara-table__cell--pinned',
+          };
+        }}
+      />
+    </div>
+  );
+}
+
+function PaginationExample() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      tableOptions={{
+        // Keep pagination state in TanStack so UI stays decoupled.
+        state: { pagination },
+        onPaginationChange: setPagination,
+        getPaginationRowModel: getPaginationRowModel(),
+        getCoreRowModel: getCoreRowModel(),
+      }}
+    />
+  );
+}
+
+function PaginationControlsExample() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+
+  const largeData = useMemo(() => makeLargeData(2000), []);
+
+  return (
+    <div>
+      <Table
+        data={largeData}
+        columns={columns as any}
+        showPagination
+        tableOptions={{
+          // Pagination is controlled here; footer UI reads from the same state.
+          state: { pagination },
+          onPaginationChange: setPagination,
+          getPaginationRowModel: getPaginationRowModel(),
+          getCoreRowModel: getCoreRowModel(),
+        }}
+      />
+    </div>
+  );
+}
+
+function VirtualizedRowsExample() {
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(320);
+  const rowHeight = 40;
+  const overscan = 6;
+  const largeData = useMemo(() => makeLargeData(2000), []);
+
+  return (
+    <Table
+      data={largeData}
+      columns={columns as any}
+      transparentSticky
+      transparentBackground
+      stickyHeader
+      wrapperProps={{
+        style: { maxHeight: '320px', overflow: 'auto' },
+        onScroll: (event) => {
+          const target = event.currentTarget;
+          setScrollTop(target.scrollTop);
+          setViewportHeight(target.clientHeight);
+        },
+      }}
+      renderBody={(table, rows) => {
+        // Virtualize the row model we intend to display (post-sorting/pagination).
+        const totalSize = rows.length * rowHeight;
+        const startIndex = Math.max(
+          0,
+          Math.floor(scrollTop / rowHeight) - overscan
+        );
+        const endIndex = Math.min(
+          rows.length,
+          Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan
+        );
+        const visibleRows = rows.slice(startIndex, endIndex);
+        const paddingTop = startIndex * rowHeight;
+        const paddingBottom = totalSize - endIndex * rowHeight;
+        const colSpan = table.getVisibleLeafColumns().length;
+
+        return (
+          <tbody className="solara-table__body">
+            {paddingTop > 0 ? (
+              <tr aria-hidden="true">
+                <td colSpan={colSpan} style={{ height: `${paddingTop}px`, padding: 0 }} />
+              </tr>
+            ) : null}
+            {visibleRows.map((row) => (
+              <tr key={row.id} className="solara-table__row" style={{ height: `${rowHeight}px` }}>
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="solara-table__cell">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {paddingBottom > 0 ? (
+              <tr aria-hidden="true">
+                <td colSpan={colSpan} style={{ height: `${paddingBottom}px`, padding: 0 }} />
+              </tr>
+            ) : null}
+          </tbody>
+        );
+      }}
+    />
+  );
+}
+
+function LargeDataPerformanceExample() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 25,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const largeData = useMemo(() => makeLargeData(5000), []);
+  const totalRows = isLoading ? 0 : largeData.length;
+  const pageCount = Math.max(1, Math.ceil(totalRows / pagination.pageSize));
+  const safePageIndex = Math.min(pagination.pageIndex, pageCount - 1);
+  const safePagination = {
+    pageIndex: safePageIndex,
+    pageSize: pagination.pageSize,
+  };
+
+  useEffect(() => {
+    // Clamp page index when row count changes (e.g., loading -> empty).
+    if (safePageIndex !== pagination.pageIndex) {
+      setPagination((prev) => ({ ...prev, pageIndex: safePageIndex }));
+    }
+  }, [pagination.pageIndex, safePageIndex]);
+
+  const toggleLoading = () => {
+    // Reset to page 0 so we never point past the end during loading.
+    setIsLoading((prev) => !prev);
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '12px', display: 'flex', gap: '8px' }}>
+        <button type="button" onClick={toggleLoading}>
+          Toggle loading
+        </button>
+        <span>{isLoading ? 'Loading rows...' : 'Loaded rows'}</span>
+      </div>
+      <Table
+        data={isLoading ? [] : largeData}
+        columns={columns as any}
+        emptyState={isLoading ? 'Loading...' : 'No results.'}
+        tableOptions={{
+          state: { pagination: safePagination },
+          onPaginationChange: setPagination,
+          getPaginationRowModel: getPaginationRowModel(),
+          getCoreRowModel: getCoreRowModel(),
+        }}
+      />
+    </div>
+  );
+}
+
+type StoryControlOption = {
+  label: string;
+  value: string;
+};
+
+type StoryControl = {
+  name: string;
+  label?: string;
+  type: 'select' | 'text' | 'boolean' | 'number';
+  options?: Array<string | StoryControlOption>;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+type StoryDefinition = {
+  title: string;
+  description?: string;
+  render: (props: Record<string, unknown>) => ReactElement;
+  controls?: StoryControl[];
+  initialProps?: Record<string, unknown>;
+  showProps?: boolean;
+  applyPropsToPreview?: boolean;
+  code?: string;
+};
+
+export const stories: Record<string, StoryDefinition> = {
+  playground: {
+    title: 'Playground',
+    description: 'Adjust the density and behavior of the Table wrapper.',
+    render: (props) => (
+      <Table
+        data={data}
+        columns={columns as any}
+        transparentSticky
+        transparentBackground
+        density={props.density as TableDensity}
+        showHeader={props.showHeader as boolean}
+        layoutMode={props.layoutMode as TableLayoutMode}
+        stickyHeader={props.stickyHeader as boolean}
+        enableSorting={props.enableSorting as boolean}
+        // Column controls menu lives in the header action column.
+        enableColumnControls={props.enableColumnControls as boolean}
+        enableLayoutToggle={props.enableLayoutToggle as boolean}
+        showPagination={props.showPagination as boolean}
+      />
+    ),
+    controls: [
+      {
+        name: 'density',
+        label: 'Density',
+        type: 'select',
+        options: ['compact', 'standard', 'spacious'],
+      },
+      {
+        name: 'layoutMode',
+        label: 'Layout Mode',
+        type: 'select',
+        options: ['list', 'grid'],
+      },
+      {
+        name: 'showHeader',
+        label: 'Show Header',
+        type: 'boolean',
+      },
+      {
+        name: 'stickyHeader',
+        label: 'Sticky Header',
+        type: 'boolean',
+      },
+      {
+        name: 'enableSorting',
+        label: 'Enable Sorting',
+        type: 'boolean',
+      },
+      {
+        name: 'enableColumnControls',
+        label: 'Column Controls',
+        type: 'boolean',
+      },
+      {
+        name: 'enableLayoutToggle',
+        label: 'Layout Toggle',
+        type: 'boolean',
+      },
+      {
+        name: 'showPagination',
+        label: 'Show Pagination',
+        type: 'boolean',
+      },
+    ],
+    initialProps: {
+      density: 'standard',
+      layoutMode: 'list',
+      showHeader: true,
+      stickyHeader: false,
+      enableSorting: true,
+      enableColumnControls: true,
+      enableLayoutToggle: true,
+      showPagination: false,
+    },
+  },
+  gridDefault: {
+    title: 'Grid Default',
+    showProps: true,
+    render: () => <GridDefaultExample />,
+    code: `import { Table } from "@solara/table";
+import type { TableLayoutMode } from "@solara/table";
+
+export function Example() {
+  const [layoutMode, setLayoutMode] = useState<TableLayoutMode>("grid");
+
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      layoutMode={layoutMode}
+      onLayoutModeChange={setLayoutMode}
+      enableLayoutToggle
+      enableColumnControls
+      gridColumnConfig={{
+        avatar: { variant: "media", unpadded: true, showLabel: false },
+        name: { hiddenByDefault: true },
+        role: { hiddenByDefault: true },
+        status: { hiddenByDefault: true },
+        lastActive: { hiddenByDefault: true },
+      }}
+      gridCellRenderers={{
+        avatar: (cell, row) => (
+          <img
+            src={String(cell.getValue())}
+            alt={String(row.original.name) + " profile"}
+            style={{ width: "100%", height: "100%", minHeight: "180px", objectFit: "cover" }}
+          />
+        ),
+        status: (cell) => <StatusPill value={String(cell.getValue())} />,
+      }}
+    />
+  );
+}
+`,
+  },
+  gridMasonry: {
+    title: 'Grid Masonry',
+    showProps: true,
+    render: () => <GridMasonryExample />,
+    code: `import { Table } from "@solara/table";
+import type { TableGridType, TableLayoutMode } from "@solara/table";
+
+export function Example() {
+  const [layoutMode, setLayoutMode] = useState<TableLayoutMode>("grid");
+  const [gridType, setGridType] = useState<TableGridType>("masonry");
+  const masonryImageSizes = [
+    { width: 720, height: 420 },
+    { width: 640, height: 860 },
+    { width: 800, height: 500 },
+    { width: 600, height: 920 },
+    { width: 760, height: 460 },
+  ];
+
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      layoutMode={layoutMode}
+      onLayoutModeChange={setLayoutMode}
+      enableLayoutToggle
+      enableColumnControls
+      gridType={gridType}
+      onGridTypeChange={setGridType}
+      gridColumnConfig={{
+        avatar: { variant: "media", unpadded: true, showLabel: false },
+        name: { hiddenByDefault: true },
+        role: { hiddenByDefault: true },
+        status: { hiddenByDefault: true },
+        lastActive: { hiddenByDefault: true },
+      }}
+      gridCellRenderers={{
+        avatar: (_cell, row) => {
+          const size = masonryImageSizes[row.index % masonryImageSizes.length];
+          const seed = \`\${row.id}-\${String(row.original.name).toLowerCase().replace(/\\s+/g, "-")}\`;
+          const src = \`https://picsum.photos/seed/\${seed}/\${size.width}/\${size.height}\`;
+          return (
+            <img
+              src={src}
+              alt={String(row.original.name) + " profile"}
+              style={
+                gridType === "masonry"
+                  ? { width: "100%", height: "auto", display: "block" }
+                  : { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+              }
+            />
+          );
+        },
+      }}
+    />
+  );
+}
+`,
+  },
+  listOnlyLayout: {
+    title: 'List Only Layout',
+    showProps: true,
+    render: () => <ListOnlyLayoutExample />,
+    code: `import { Table } from "@solara/table";
+
+export function Example() {
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      layoutMode="list"
+      layoutModeOptions={["list"]}
+      enableLayoutToggle
+      enableColumnControls
+    />
+  );
+}
+`,
+  },
+  overview: {
+    title: 'Overview',
+    showProps: true,
+    render: () => <DensityMenuExample />,
+    code: `import { Table } from "@solara/table";
+import { createColumnHelper } from "@tanstack/react-table";
+
+const columnHelper = createColumnHelper();
+
+const columns = [
+  columnHelper.accessor("name", { header: "Name" }),
+  columnHelper.accessor("role", { header: "Role" }),
+  columnHelper.accessor("status", { header: "Status" }),
+  columnHelper.accessor("lastActive", { header: "Last Active" }),
+];
+
+export function Example() {
+  const [density, setDensity] = useState("standard");
+
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      density={density}
+      enableSorting
+      enableColumnControls
+      onDensityChange={setDensity}
+    />
+  );
+}
+`,
+  },
+  stickyHeader: {
+    title: 'Sticky Header',
+    showProps: true,
+    render: () => (
+      <Table
+        data={[...data, ...data, ...data]}
+        columns={columns as any}
+        transparentSticky
+        transparentBackground
+        stickyHeader
+        // Scroll container must be on the wrapper for sticky headers to work.
+        wrapperProps={{ style: { maxHeight: '220px', overflow: 'auto' } }}
+        enableColumnControls
+      />
+    ),
+    code: `import { Table } from "@solara/table";
+
+export function Example() {
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      stickyHeader
+      wrapperProps={{ style: { maxHeight: 220, overflow: "auto" } }}
+    />
+  );
+}
+`,
+  },
+  pinnedColumns: {
+    title: 'Pinned Columns',
+    showProps: true,
+    render: () => <PinnedColumnsExample />,
+    code: `import { Table } from "@solara/table";
+import { createColumnHelper } from "@tanstack/react-table";
+
+const columnHelper = createColumnHelper();
+
+export function Example() {
+  const [columnPinning, setColumnPinning] = useState({
+    left: ["name"],
+    right: [],
+  });
+
+  const columns = [
+    columnHelper.accessor("name", { header: "Name" }),
+    columnHelper.accessor("role", { header: "Role" }),
+    columnHelper.accessor("status", { header: "Status" }),
+    columnHelper.accessor("lastActive", { header: "Last Active" }),
+  ];
+
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      tableProps={{ style: { minWidth: 640 } }}
+      enableColumnControls
+      tableOptions={{
+        enableColumnPinning: true,
+        state: { columnPinning },
+        onColumnPinningChange: setColumnPinning,
+      }}
+      getHeaderProps={(header) => {
+        if (!header.column.getIsPinned()) return {};
+        return {
+          style: { left: header.column.getStart("left") },
+          className: "solara-table__header-cell--pinned",
+        };
+      }}
+      getCellProps={(cell) => {
+        if (!cell.column.getIsPinned()) return {};
+        return {
+          style: { left: cell.column.getStart("left") },
+          className: "solara-table__cell--pinned",
+        };
+      }}
+    />
+  );
+}
+`,
+  },
+  pagination: {
+    title: 'Pagination',
+    showProps: true,
+    render: () => <PaginationExample />,
+    code: `import { Table } from "@solara/table";
+import { getPaginationRowModel } from "@tanstack/react-table";
+
+export function Example() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+
+  return (
+    <Table
+      data={data}
+      columns={columns as any}
+      tableOptions={{
+        state: { pagination },
+        onPaginationChange: setPagination,
+        getPaginationRowModel: getPaginationRowModel(),
+      }}
+    />
+  );
+}
+`,
+  },
+  paginationControls: {
+    title: 'Pagination Controls',
+    showProps: true,
+    render: () => <PaginationControlsExample />,
+    code: `import { Table } from "@solara/table";
+import { getPaginationRowModel } from "@tanstack/react-table";
+
+export function Example() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+  const largeData = useMemo(() => makeLargeData(2000), []);
+
+  return (
+    <div>
+      <Table
+        data={largeData}
+        columns={columns as any}
+        showPagination
+        tableOptions={{
+          state: { pagination },
+          onPaginationChange: setPagination,
+          getPaginationRowModel: getPaginationRowModel(),
+        }}
+      />
+    </div>
+  );
+}
+`,
+  },
+  virtualizedRows: {
+    title: 'Virtualized Rows',
+    showProps: true,
+    render: () => <VirtualizedRowsExample />,
+    code: `import { Table } from "@solara/table";
+import { flexRender } from "@tanstack/react-table";
+
+export function Example() {
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(320);
+  const rowHeight = 40;
+  const overscan = 6;
+
+  return (
+    <Table
+      data={largeData}
+      columns={columns as any}
+      stickyHeader
+      wrapperProps={{
+        style: { maxHeight: 320, overflow: "auto" },
+        onScroll: (event) => {
+          const target = event.currentTarget;
+          setScrollTop(target.scrollTop);
+          setViewportHeight(target.clientHeight);
+        },
+      }}
+      renderBody={(table, rows) => {
+        const totalSize = rows.length * rowHeight;
+        const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+        const endIndex = Math.min(
+          rows.length,
+          Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan
+        );
+        const visibleRows = rows.slice(startIndex, endIndex);
+        const paddingTop = startIndex * rowHeight;
+        const paddingBottom = totalSize - endIndex * rowHeight;
+        const colSpan = table.getVisibleLeafColumns().length;
+
+        return (
+          <tbody className="solara-table__body">
+            {paddingTop > 0 ? (
+              <tr aria-hidden="true">
+                <td colSpan={colSpan} style={{ height: paddingTop, padding: 0 }} />
+              </tr>
+            ) : null}
+            {visibleRows.map((row) => (
+              <tr key={row.id} className="solara-table__row">
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="solara-table__cell">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {paddingBottom > 0 ? (
+              <tr aria-hidden="true">
+                <td colSpan={colSpan} style={{ height: paddingBottom, padding: 0 }} />
+              </tr>
+            ) : null}
+          </tbody>
+        );
+      }}
+    />
+  );
+}
+`,
+  },
+  expandableRows: {
+    title: 'Expandable Rows',
+    showProps: true,
+    render: () => <ExpandableRowsExample />,
+    code: `import { Table } from "@solara/table";
+import { createColumnHelper, getCoreRowModel, getExpandedRowModel } from "@tanstack/react-table";
+
+const columnHelper = createColumnHelper();
+
+export function Example() {
+  const [expanded, setExpanded] = React.useState({});
+
+  const columnsWithToggle = React.useMemo(
+    () => [
+      {
+        id: 'expand',
+        header: () => null,
+        cell: ({ row }) => {
+          return row.getCanExpand() ? (
+            <button
+              aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
+              onClick={row.getToggleExpandedHandler()}
+            >
+              {row.getIsExpanded() ? '👇' : '👉'}
+            </button>
+          ) : null;
+        },
+      },
+      ...columns,
+    ],
+    []
+  );
+
+  return (
+    <Table
+      data={dataWithSubRows}
+      columns={columnsWithToggle as any}
+      tableOptions={{
+        state: { expanded },
+        onExpandedChange: setExpanded,
+        getSubRows: (row) => row.subRows,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+      }}
+    />
+  );
+}
+`,
+  },
+  selectableRows: {
+    title: 'Selectable Rows',
+    showProps: true,
+    render: () => <SelectableRowsExample />,
+    code: `import { Table } from "@solara/table";
+import { Checkbox } from "@solara/checkbox";
+import { createColumnHelper } from "@tanstack/react-table";
+
+const columnHelper = createColumnHelper();
+
+export function Example() {
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  const columnsWithSelect = React.useMemo(
+    () => [
+      {
+        id: "select",
+        header: ({ table }) => {
+          const isAllRowsSelected = table.getIsAllRowsSelected();
+          const isSomeRowsSelected = table.getIsSomeRowsSelected();
+          return (
+            <Checkbox
+              aria-label="Select all rows"
+              size="small"
+              checked={isAllRowsSelected}
+              indeterminate={!isAllRowsSelected && isSomeRowsSelected}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          );
+        },
+        cell: ({ row }) => (
+          <Checkbox
+            aria-label={"Select row " + row.id}
+            size="small"
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        ),
+      },
+      ...columns,
+    ],
+    []
+  );
+
+  return (
+    <Table
+      data={data}
+      columns={columnsWithSelect as any}
+      tableOptions={{
+        enableRowSelection: true,
+        state: { rowSelection },
+        onRowSelectionChange: setRowSelection,
+        getCoreRowModel: getCoreRowModel(),
+      }}
+    />
+  );
+}
+`,
+  },
+  largeDataPerformance: {
+    title: 'Large Data Performance',
+    showProps: true,
+    render: () => <LargeDataPerformanceExample />,
+    code: `import { Table } from "@solara/table";
+import { getPaginationRowModel } from "@tanstack/react-table";
+
+export function Example() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 25,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const largeData = useMemo(() => makeLargeData(5000), []);
+
+  return (
+    <div>
+      <button type="button" onClick={() => setIsLoading((prev) => !prev)}>
+        Toggle loading
+      </button>
+      <Table
+        data={isLoading ? [] : largeData}
+        columns={columns as any}
+        emptyState={isLoading ? "Loading..." : "No results."}
+        tableOptions={{
+          state: { pagination },
+          onPaginationChange: setPagination,
+          getPaginationRowModel: getPaginationRowModel(),
+          getCoreRowModel: getCoreRowModel(),
+        }}
+      />
+    </div>
+  );
+}
+`,
+  },
+};