@duro-app/ui 0.23.0 → 0.25.0

package/src/components/Table/Table.stories.tsx

@@ -9,6 +9,11 @@ import {Button} from '../Button/Button'
 import {ActionBar} from '../ActionBar/ActionBar'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
+import {flexRender, createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, type SortingState, type ColumnFiltersState, type PaginationState} from '@tanstack/react-table'
+import {useDataTable} from './useDataTable'
+import {Combobox} from '../Combobox/Combobox'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
 const meta: Meta = {
   title: 'Components/Table',
   argTypes: {
@@ -426,3 +431,395 @@ export const AllVariants: Story = {
     await expect(tables.length).toBe(4)
   },
 }
+
+// --- Sorting: demonstrates click-to-sort with hover indicators ---
+
+type Service = {name: string; role: string; port: number; uptime: string}
+
+const sortingData: Service[] = [
+  {name: 'Traefik', role: 'Reverse Proxy', port: 443, uptime: '14d 3h'},
+  {name: 'Pi-hole', role: 'DNS Filter', port: 80, uptime: '14d 3h'},
+  {name: 'Grafana', role: 'Monitoring', port: 3000, uptime: '7d 12h'},
+  {name: 'Portainer', role: 'Container Mgmt', port: 9000, uptime: '2d 5h'},
+  {name: 'Nginx', role: 'Web Server', port: 8080, uptime: '30d 1h'},
+]
+
+const sortingCols = [
+  createColumnHelper<Service>().accessor('name', {header: 'Name', enableSorting: true}),
+  createColumnHelper<Service>().accessor('role', {header: 'Role', enableSorting: true}),
+  createColumnHelper<Service>().accessor('port', {header: 'Port', enableSorting: true}),
+  createColumnHelper<Service>().accessor('uptime', {header: 'Uptime', enableSorting: true}),
+]
+
+function SortingDemo() {
+  const [sorting, setSorting] = useState<SortingState>([])
+
+  const table = useReactTable({
+    data: sortingData,
+    columns: sortingCols,
+    state: {sorting},
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  return (
+    <Table.Root>
+      <Table.Header>
+        {table.getHeaderGroups().map((hg) => (
+          <Table.Row key={hg.id}>
+            {hg.headers.map((header) => (
+              <Table.HeaderCell key={header.id}>
+                <html.span
+                  style={fullFeaturedStyles.headerContent}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                  <Table.SortIndicator column={header.column} />
+                </html.span>
+              </Table.HeaderCell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Header>
+      <Table.Body>
+        {table.getRowModel().rows.map((row) => (
+          <Table.Row key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <Table.Cell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  )
+}
+
+export const Sorting: Story = {
+  render: () => <SortingDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    await expect(canvas.getAllByRole('columnheader').length).toBe(4)
+  },
+}
+
+// --- Shared data helpers for interactive demos ---
+
+interface User {
+  name: string
+  role: string
+  status: string
+  email: string
+}
+
+const firstNames = [
+  'Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Hank',
+  'Iris', 'Jack', 'Karen', 'Leo', 'Mona', 'Nick', 'Olivia', 'Paul',
+  'Quinn', 'Rita', 'Sam', 'Tina', 'Uma', 'Vince', 'Wendy', 'Xander',
+  'Yara', 'Zach',
+]
+const lastNames = [
+  'Adams', 'Brown', 'Clark', 'Davis', 'Evans', 'Foster', 'Garcia',
+  'Hill', 'Ito', 'Jones', 'Kim', 'Lee', 'Moore', 'Nash', 'Owen',
+  'Patel', 'Quinn', 'Reed', 'Smith', 'Tran', 'Ueda', 'Voss', 'Wang',
+  'Xu', 'Yang', 'Zhang',
+]
+const roles = ['Admin', 'Editor', 'Viewer', 'Moderator', 'Analyst']
+const statuses = ['Active', 'Inactive', 'Pending', 'Suspended']
+
+function generateUsers(count: number): User[] {
+  return Array.from({length: count}, (_, i) => {
+    const first = firstNames[i % firstNames.length]
+    const last = lastNames[(i * 7) % lastNames.length]
+    return {
+      name: `${first} ${last}`,
+      role: roles[i % roles.length],
+      status: statuses[i % statuses.length],
+      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+    }
+  })
+}
+
+// --- Pagination: demonstrates page navigation ---
+
+const paginationData = generateUsers(35)
+
+const paginationCols = [
+  createColumnHelper<User>().accessor('name', {header: 'Name'}),
+  createColumnHelper<User>().accessor('role', {header: 'Role'}),
+  createColumnHelper<User>().accessor('email', {header: 'Email'}),
+]
+
+function PaginationDemo() {
+  const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10})
+
+  const table = useReactTable({
+    data: paginationData,
+    columns: paginationCols,
+    state: {pagination},
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  return (
+    <html.div style={fullFeaturedStyles.wrapper}>
+      <Table.Root>
+        <Table.Header>
+          {table.getHeaderGroups().map((hg) => (
+            <Table.Row key={hg.id}>
+              {hg.headers.map((header) => (
+                <Table.HeaderCell key={header.id}>
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Header>
+        <Table.Body>
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+      <Table.Pagination table={table} />
+    </html.div>
+  )
+}
+
+export const WithPagination: Story = {
+  render: () => <PaginationDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('1 / 4')).toBeInTheDocument()
+    await expect(canvas.getByText('Next')).toBeInTheDocument()
+  },
+}
+
+// --- Filtering: demonstrates column filter inputs ---
+
+const filteringData = generateUsers(20)
+
+const filteringCols = [
+  createColumnHelper<User>().accessor('name', {header: 'Name', enableColumnFilter: true}),
+  createColumnHelper<User>().accessor('role', {header: 'Role', enableColumnFilter: false}),
+  createColumnHelper<User>().accessor('status', {header: 'Status', enableColumnFilter: false}),
+  createColumnHelper<User>().accessor('email', {header: 'Email', enableColumnFilter: true}),
+]
+
+function FilteringDemo() {
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+  const table = useReactTable({
+    data: filteringData,
+    columns: filteringCols,
+    state: {columnFilters},
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  })
+
+  return (
+    <Table.Root>
+      <Table.Header>
+        {table.getHeaderGroups().map((hg) => (
+          <Table.Row key={hg.id}>
+            {hg.headers.map((header) => (
+              <Table.HeaderCell key={header.id}>
+                {flexRender(header.column.columnDef.header, header.getContext())}
+                {header.column.getCanFilter() && (
+                  <Table.ColumnFilter
+                    column={header.column}
+                    placeholder={`Filter ${header.column.id}...`}
+                  />
+                )}
+              </Table.HeaderCell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Header>
+      <Table.Body>
+        {table.getRowModel().rows.map((row) => (
+          <Table.Row key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <Table.Cell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  )
+}
+
+export const WithFiltering: Story = {
+  render: () => <FilteringDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('Filter name...')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('Filter email...')).toBeInTheDocument()
+  },
+}
+
+// --- FullFeatured: useDataTable with pagination, sorting, and filtering ---
+
+const fakeUsers = generateUsers(50)
+
+const columnHelper = createColumnHelper<User>()
+
+const fullFeaturedColumns = [
+  columnHelper.accessor('name', {
+    header: 'Name',
+    enableSorting: true,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor('role', {
+    header: 'Role',
+    enableSorting: true,
+    enableColumnFilter: true,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    enableSorting: true,
+    enableColumnFilter: true,
+  }),
+  columnHelper.accessor('email', {
+    header: 'Email',
+    enableSorting: true,
+    enableColumnFilter: false,
+  }),
+]
+
+const fullFeaturedStyles = css.create({
+  wrapper: {display: 'flex', flexDirection: 'column', gap: 0},
+  filterBar: {
+    display: 'flex',
+    gap: spacing.md,
+    paddingBottom: spacing.md,
+  },
+  headerContent: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    cursor: 'pointer',
+    userSelect: 'none',
+  },
+})
+
+const uniqueRoles = [...new Set(fakeUsers.map((u) => u.role))].sort()
+const uniqueStatuses = [...new Set(fakeUsers.map((u) => u.status))].sort()
+
+function FullFeaturedDemo() {
+  const table = useDataTable(fakeUsers, fullFeaturedColumns, {
+    pagination: {pageSize: 10},
+    enableSorting: true,
+    enableFiltering: true,
+  })
+
+  return (
+    <html.div style={fullFeaturedStyles.wrapper}>
+      <html.div style={fullFeaturedStyles.filterBar}>
+        <Combobox.Root
+          value={table.getColumn('role')?.getFilterValue() as string ?? ''}
+          onValueChange={(v) => table.getColumn('role')?.setFilterValue(v || undefined)}
+          onInputChange={(v) => table.getColumn('role')?.setFilterValue(v || undefined)}
+        >
+          <Combobox.Input placeholder="Filter role...">
+            <Combobox.Trigger />
+          </Combobox.Input>
+          <Combobox.Popup>
+            <Combobox.Item value="">
+              <Combobox.ItemText>All Roles</Combobox.ItemText>
+            </Combobox.Item>
+            {uniqueRoles.map((role) => (
+              <Combobox.Item key={role} value={role}>
+                <Combobox.ItemText>{role}</Combobox.ItemText>
+              </Combobox.Item>
+            ))}
+            <Combobox.Empty>No roles found</Combobox.Empty>
+          </Combobox.Popup>
+        </Combobox.Root>
+        <Combobox.Root
+          value={table.getColumn('status')?.getFilterValue() as string ?? ''}
+          onValueChange={(v) => table.getColumn('status')?.setFilterValue(v || undefined)}
+          onInputChange={(v) => table.getColumn('status')?.setFilterValue(v || undefined)}
+        >
+          <Combobox.Input placeholder="Filter status...">
+            <Combobox.Trigger />
+          </Combobox.Input>
+          <Combobox.Popup>
+            <Combobox.Item value="">
+              <Combobox.ItemText>All Statuses</Combobox.ItemText>
+            </Combobox.Item>
+            {uniqueStatuses.map((status) => (
+              <Combobox.Item key={status} value={status}>
+                <Combobox.ItemText>{status}</Combobox.ItemText>
+              </Combobox.Item>
+            ))}
+            <Combobox.Empty>No statuses found</Combobox.Empty>
+          </Combobox.Popup>
+        </Combobox.Root>
+      </html.div>
+      <Table.Root>
+        <Table.Header>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Table.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <Table.HeaderCell key={header.id}>
+                  <html.div
+                    style={fullFeaturedStyles.headerContent}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    <Table.SortIndicator column={header.column} />
+                  </html.div>
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Header>
+        <Table.Body>
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+      <Table.Pagination table={table} />
+    </html.div>
+  )
+}
+
+export const FullFeatured: Story = {
+  render: () => <FullFeaturedDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+
+    // Should render 10 body rows (pageSize) + 1 header row
+    const rows = canvas.getAllByRole('row')
+    await expect(rows.length).toBe(11)
+
+    // All 4 column headers present
+    const columnHeaders = canvas.getAllByRole('columnheader')
+    await expect(columnHeaders.length).toBe(4)
+
+    // Pagination is visible (50 rows / 10 per page = 5 pages)
+    await expect(canvas.getByText('1 / 5')).toBeInTheDocument()
+    await expect(canvas.getByText('Next')).toBeInTheDocument()
+    await expect(canvas.getByText('Previous')).toBeInTheDocument()
+  },
+}

package/src/components/Table/Table.tsx

@@ -1,6 +1,17 @@
-import {type ReactNode, type MutableRefObject, createContext, useContext, useRef, Children, isValidElement} from 'react'
+import {
+  type ReactNode,
+  type MutableRefObject,
+  createContext,
+  useContext,
+  useRef,
+  Children,
+  isValidElement,
+} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
+import {Pagination} from './Pagination'
+import {SortIndicator} from './SortIndicator'
+import {ColumnFilter} from './ColumnFilter'
 
 // --- Types ---
 
@@ -12,7 +23,7 @@ export type TableSize = 'sm' | 'md'
 interface TableContextValue {
   variant: TableVariant
   size: TableSize
-  /** Mutable ref: header Row writes inferred template, body Rows read it */
+  /** Mutable ref: header Row writes inferred template, Root reads it */
   inferredTemplateRef: MutableRefObject<string | null>
 }
 
@@ -28,6 +39,10 @@ function useTable() {
 
 const HeaderContext = createContext(false)
 
+// --- Template context: set after first render pass ---
+
+const TemplateContext = createContext<string | null>(null)
+
 // --- Root ---
 
 interface RootProps {
@@ -36,12 +51,46 @@ interface RootProps {
   size?: TableSize
 }
 
+/**
+ * Scans the React tree for HeaderCell elements to extract width props.
+ * Returns a grid-template-columns string.
+ */
+function extractTemplate(children: ReactNode): string {
+  const widths: string[] = []
+
+  function walk(node: ReactNode) {
+    Children.forEach(node, (child) => {
+      if (!isValidElement(child)) return
+      const props = child.props as Record<string, any>
+      // Check if this looks like a HeaderCell (has width prop or is inside Header)
+      const displayName = (child.type as any)?.name || (child.type as any)?.displayName || ''
+      if (displayName === 'HeaderCell' || child.type === HeaderCell) {
+        widths.push(props.width || '1fr')
+      } else if (props.children) {
+        walk(props.children)
+      }
+    })
+  }
+
+  walk(children)
+  return widths.length > 0 ? widths.join(' ') : ''
+}
+
 function Root({children, variant = 'default', size = 'md'}: RootProps) {
   const inferredTemplateRef = useRef<string | null>(null)
 
+  // Extract template from HeaderCell children synchronously
+  const template = extractTemplate(children)
+  if (template) {
+    inferredTemplateRef.current = template
+  }
+
   return (
     <TableContext.Provider value={{variant, size, inferredTemplateRef}}>
-      <html.div role="table" style={styles.root}>
+      <html.div
+        role="table"
+        style={[styles.root, template ? styles.gridColumns(template) : undefined]}
+      >
         {children}
       </html.div>
     </TableContext.Provider>
@@ -68,7 +117,7 @@ function Body({children}: {children: ReactNode}) {
 
   return (
     <HeaderContext.Provider value={false}>
-      <html.div role="rowgroup">
+      <html.div role="rowgroup" style={styles.body}>
         {childArray.map((child, index) => {
           if (variant === 'striped') {
             return (
@@ -89,35 +138,17 @@ const RowIndexContext = createContext<number>(-1)
 // --- Row ---
 
 function Row({children}: {children: ReactNode}) {
-  const {variant, inferredTemplateRef} = useTable()
+  const {variant} = useTable()
   const isHeader = useContext(HeaderContext)
   const rowIndex = useContext(RowIndexContext)
   const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
   const childArray = Children.toArray(children)
 
-  let template: string
-
-  if (isHeader) {
-    // Build template from HeaderCell width props
-    const widths: string[] = []
-    Children.forEach(children, (child) => {
-      if (isValidElement(child)) {
-        const props = child.props as {width?: string}
-        widths.push(props.width || '1fr')
-      }
-    })
-    template = widths.join(' ')
-    inferredTemplateRef.current = template
-  } else {
-    template = inferredTemplateRef.current ?? `repeat(${childArray.length}, 1fr)`
-  }
-
   return (
     <html.div
       role="row"
       style={[
         styles.row,
-        styles.gridColumns(template),
         !isHeader && styles.bodyRow,
         !isHeader && variant === 'striped' && isEvenRow && styles.stripedEven,
       ]}
@@ -143,7 +174,7 @@ function HeaderCell({
   'aria-label': ariaLabel,
 }: {
   children?: ReactNode
-  /** Column width: CSS value like '40px', '2fr', 'auto'. Defaults to '1fr'. */
+  /** Column width: CSS value like '40px', '2fr', 'max-content'. Defaults to '1fr'. */
   width?: string
   'aria-label'?: string
 }) {
@@ -198,4 +229,7 @@ export const Table = {
   Row,
   HeaderCell,
   Cell,
+  Pagination,
+  SortIndicator,
+  ColumnFilter,
 }

package/src/components/Table/styles.css.ts

@@ -4,8 +4,9 @@ import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 export const styles = css.create({
-  // Root
+  // Root — the single grid container for the entire table
   root: {
+    display: 'grid',
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: colors.border,
@@ -18,19 +19,28 @@ export const styles = css.create({
 
   // Header group
   header: {
+    display: 'grid',
+    gridColumn: '1 / -1',
+    gridTemplateColumns: 'subgrid',
     backgroundColor: colors.bgCard,
   },
 
-  // Row
+  // Body group
+  body: {
+    display: 'grid',
+    gridColumn: '1 / -1',
+    gridTemplateColumns: 'subgrid',
+  },
+
+  // Row — spans all columns, uses subgrid to share parent tracks
   row: {
     display: 'grid',
+    gridColumn: '1 / -1',
+    gridTemplateColumns: 'subgrid',
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
-  rowLastChild: {
-    borderBottomWidth: 0,
-  },
   bodyRow: {
     backgroundColor: {
       default: 'transparent',
@@ -90,7 +100,7 @@ export const styles = css.create({
     borderRightWidth: 0,
   },
 
-  // Dynamic styles — simple identifier params only (StyleX constraint)
+  // Dynamic: grid columns applied on Root
   gridColumns: (template: string) => ({
     gridTemplateColumns: template,
   }),