@duro-app/ui 0.22.0 → 0.24.0

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

@@ -9,6 +9,8 @@ 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} from '@tanstack/react-table'
+
 const meta: Meta = {
   title: 'Components/Table',
   argTypes: {
@@ -55,7 +57,7 @@ function statusVariant(status: string) {
 
 export const Default: Story = {
   render: () => (
-    <Table.Root columns={4}>
+    <Table.Root>
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>Service</Table.HeaderCell>
@@ -108,7 +110,7 @@ export const Default: Story = {
 
 export const Striped: Story = {
   render: () => (
-    <Table.Root variant="striped" columns={4}>
+    <Table.Root variant="striped">
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>Service</Table.HeaderCell>
@@ -141,7 +143,7 @@ export const Striped: Story = {
 
 export const Bordered: Story = {
   render: () => (
-    <Table.Root variant="bordered" columns={4}>
+    <Table.Root variant="bordered">
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>Service</Table.HeaderCell>
@@ -175,7 +177,7 @@ export const Bordered: Story = {
 
 export const Compact: Story = {
   render: () => (
-    <Table.Root size="sm" columns={4}>
+    <Table.Root size="sm">
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>Service</Table.HeaderCell>
@@ -248,7 +250,7 @@ function CheckboxTableDemo() {
 
   return (
     <>
-      <Table.Root columns={5}>
+      <Table.Root>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell aria-label="Select all">
@@ -316,7 +318,7 @@ export const AllVariants: Story = {
     <html.div style={storyStyles.stack}>
       <html.div>
         <html.span style={storyStyles.label}>Default</html.span>
-        <Table.Root columns={3}>
+        <Table.Root>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Name</Table.HeaderCell>
@@ -341,7 +343,7 @@ export const AllVariants: Story = {
 
       <html.div>
         <html.span style={storyStyles.label}>Striped</html.span>
-        <Table.Root variant="striped" columns={3}>
+        <Table.Root variant="striped">
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Name</Table.HeaderCell>
@@ -371,7 +373,7 @@ export const AllVariants: Story = {
 
       <html.div>
         <html.span style={storyStyles.label}>Bordered</html.span>
-        <Table.Root variant="bordered" columns={3}>
+        <Table.Root variant="bordered">
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Name</Table.HeaderCell>
@@ -396,7 +398,7 @@ export const AllVariants: Story = {
 
       <html.div>
         <html.span style={storyStyles.label}>Compact (sm)</html.span>
-        <Table.Root size="sm" columns={3}>
+        <Table.Root size="sm">
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Name</Table.HeaderCell>
@@ -426,3 +428,347 @@ export const AllVariants: Story = {
     await expect(tables.length).toBe(4)
   },
 }
+
+
+// --- Sorting: demonstrates click-to-sort with hover indicators ---
+
+function SortingDemo() {
+  const data = [
+    {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 cols = [
+    createColumnHelper<typeof data[0]>().accessor('name', {header: 'Name', enableSorting: true}),
+    createColumnHelper<typeof data[0]>().accessor('role', {header: 'Role', enableSorting: true}),
+    createColumnHelper<typeof data[0]>().accessor('port', {header: 'Port', enableSorting: true}),
+    createColumnHelper<typeof data[0]>().accessor('uptime', {header: 'Uptime', enableSorting: true}),
+  ]
+
+  const [sorting, setSorting] = useState<SortingState>([])
+
+  const table = useReactTable({
+    data,
+    columns: cols,
+    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)
+  },
+}
+
+// --- Pagination: demonstrates page navigation ---
+
+function PaginationDemo() {
+  const data = generateUsers(35)
+
+  const cols = [
+    createColumnHelper<User>().accessor('name', {header: 'Name'}),
+    createColumnHelper<User>().accessor('role', {header: 'Role'}),
+    createColumnHelper<User>().accessor('email', {header: 'Email'}),
+  ]
+
+  const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10})
+
+  const table = useReactTable({
+    data,
+    columns: cols,
+    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 ---
+
+function FilteringDemo() {
+  const data = generateUsers(20)
+
+  const cols = [
+    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}),
+  ]
+
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+  const table = useReactTable({
+    data,
+    columns: cols,
+    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 ---
+
+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`,
+    }
+  })
+}
+
+const fakeUsers = generateUsers(50)
+
+const columnHelper = createColumnHelper<User>()
+
+const fullFeaturedColumns = [
+  columnHelper.accessor('name', {
+    header: 'Name',
+    enableSorting: true,
+    enableColumnFilter: true,
+  }),
+  columnHelper.accessor('role', {
+    header: 'Role',
+    enableSorting: true,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    enableSorting: true,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor('email', {
+    header: 'Email',
+    enableSorting: true,
+    enableColumnFilter: true,
+  }),
+]
+
+const fullFeaturedStyles = css.create({
+  wrapper: {display: 'flex', flexDirection: 'column', gap: 0},
+  headerContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    cursor: 'pointer',
+    userSelect: 'none',
+  },
+})
+
+function FullFeaturedDemo() {
+  const table = useDataTable(fakeUsers, fullFeaturedColumns, {
+    pagination: {pageSize: 10},
+    enableSorting: true,
+    enableFiltering: true,
+  })
+
+  return (
+    <html.div style={fullFeaturedStyles.wrapper}>
+      <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>
+                  {(header.column.id === 'name' || header.column.id === 'email') && (
+                    <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>
+      <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,9 @@
-import {type ReactNode, createContext, useContext, Children} 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,8 +15,8 @@ export type TableSize = 'sm' | 'md'
 interface TableContextValue {
   variant: TableVariant
   size: TableSize
-  columns: number
-  isHeader: boolean
+  /** Mutable ref: header Row writes inferred template, Root reads it */
+  inferredTemplateRef: MutableRefObject<string | null>
 }
 
 const TableContext = createContext<TableContextValue | null>(null)
@@ -24,23 +27,65 @@ function useTable() {
   return ctx
 }
 
-// --- HeaderContext (to distinguish header vs body rowgroup) ---
+// --- HeaderContext ---
 
 const HeaderContext = createContext(false)
 
+// --- Template context: set after first render pass ---
+
+const TemplateContext = createContext<string | null>(null)
+
 // --- Root ---
 
 interface RootProps {
   children: ReactNode
   variant?: TableVariant
   size?: TableSize
-  columns: number
 }
 
-function Root({children, variant = 'default', size = 'md', columns}: RootProps) {
+/**
+ * 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, columns, isHeader: false}}>
-      <html.div role="table" style={styles.root}>
+    <TableContext.Provider value={{variant, size, inferredTemplateRef}}>
+      <html.div
+        role="table"
+        style={[
+          styles.root,
+          template ? styles.gridColumns(template) : undefined,
+        ]}
+      >
         {children}
       </html.div>
     </TableContext.Provider>
@@ -67,7 +112,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 (
@@ -83,13 +128,12 @@ function Body({children}: {children: ReactNode}) {
   )
 }
 
-// Row index context for striped variant
 const RowIndexContext = createContext<number>(-1)
 
 // --- Row ---
 
 function Row({children}: {children: ReactNode}) {
-  const {variant, columns} = useTable()
+  const {variant} = useTable()
   const isHeader = useContext(HeaderContext)
   const rowIndex = useContext(RowIndexContext)
   const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
@@ -100,7 +144,6 @@ function Row({children}: {children: ReactNode}) {
       role="row"
       style={[
         styles.row,
-        styles.gridColumns(columns),
         !isHeader && styles.bodyRow,
         !isHeader && variant === 'striped' && isEvenRow && styles.stripedEven,
       ]}
@@ -116,19 +159,18 @@ function Row({children}: {children: ReactNode}) {
   )
 }
 
-// Cell index context for bordered variant
-const CellIndexContext = createContext<{index: number; total: number}>({
-  index: 0,
-  total: 0,
-})
+const CellIndexContext = createContext<{index: number; total: number}>({index: 0, total: 0})
 
 // --- HeaderCell ---
 
 function HeaderCell({
   children,
+  width: _width,
   'aria-label': ariaLabel,
 }: {
   children?: ReactNode
+  /** Column width: CSS value like '40px', '2fr', 'max-content'. Defaults to '1fr'. */
+  width?: string
   'aria-label'?: string
 }) {
   const {size, variant} = useTable()
@@ -182,4 +224,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,8 +100,8 @@ export const styles = css.create({
     borderRightWidth: 0,
   },
 
-  // Dynamic styles — simple identifier params only (StyleX constraint)
-  gridColumns: (columns: number) => ({
-    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+  // Dynamic: grid columns applied on Root
+  gridColumns: (template: string) => ({
+    gridTemplateColumns: template,
   }),
 })