Table

1"use client";2
3// Adapted from HeroUI v3.2.6 table-basic (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Table } from "@lenso/ui";6
7const rows = [8  { key: "kate", name: "Kate Moore", role: "CEO", status: "Active", email: "kate@acme.com" },9  { key: "john", name: "John Smith", role: "CTO", status: "Active", email: "john@acme.com" },10  { key: "sara", name: "Sara Johnson", role: "CMO", status: "On Leave", email: "sara@acme.com" },11  {12    key: "michael",13    name: "Michael Brown",14    role: "CFO",15    status: "Active",16    email: "michael@acme.com",17  },18] as const;19const styles = stylex.create({ content: { minWidth: 600 } });20
21export function Basic() {22  return (23    <Table>24      <Table.ScrollContainer>25        <Table.Content aria-label="Team members" xstyle={styles.content}>26          <Table.Header>27            <Table.Column columnKey="name">Name</Table.Column>28            <Table.Column columnKey="role">Role</Table.Column>29            <Table.Column columnKey="status">Status</Table.Column>30            <Table.Column columnKey="email">Email</Table.Column>31          </Table.Header>32          <Table.Body>33            <Table.Collection items={rows}>34              {(row) => (35                <Table.Row itemKey={row.key}>36                  <Table.Cell>{row.name}</Table.Cell>37                  <Table.Cell>{row.role}</Table.Cell>38                  <Table.Cell>{row.status}</Table.Cell>39                  <Table.Cell>{row.email}</Table.Cell>40                </Table.Row>41              )}42            </Table.Collection>43          </Table.Body>44        </Table.Content>45      </Table.ScrollContainer>46    </Table>47  );48}

1"use client";2// HeroUI v3.2.6 secondary-variant adaptation (Apache-2.0).3import { Table } from "@lenso/ui";4import { Headers, Rows, styles, users } from "./data";5export function SecondaryVariant() {6  return (7    <Table variant="secondary">8      <Table.ScrollContainer>9        <Table.Content aria-label="Team members" xstyle={styles.content}>10          <Headers />11          <Table.Body>12            <Rows items={users.slice(0, 4)} />13          </Table.Body>14        </Table.Content>15      </Table.ScrollContainer>16    </Table>17  );18}

1"use client";2// HeroUI v3.2.6 async-loading adaptation (Apache-2.0).3import { useCallback, useEffect, useRef, useState } from "react";4import { Spinner, Table } from "@lenso/ui";5import { Rows, styles, users } from "./data";6export function AsyncLoading() {7  const [count, setCount] = useState(6);8  const [loading, setLoading] = useState(false);9  const request = useRef<ReturnType<typeof setTimeout> | null>(null);10  useEffect(11    () => () => {12      if (request.current) clearTimeout(request.current);13    },14    [],15  );16  const loadMore = useCallback(() => {17    if (request.current || count >= users.length) return;18    setLoading(true);19    request.current = setTimeout(() => {20      request.current = null;21      setCount((previous) => previous + 6);22      setLoading(false);23    }, 1500);24  }, [count]);25  return (26    <Table>27      <Table.ScrollContainer xstyle={styles.viewport}>28        <Table.Content aria-label="Async loading table" xstyle={styles.content}>29          <Table.Header xstyle={styles.sticky}>30            {["name", "role", "status", "email"].map((column) => (31              <Table.Column key={column} columnKey={column}>32                {column[0]!.toUpperCase() + column.slice(1)}33              </Table.Column>34            ))}35          </Table.Header>36          <Table.Body>37            <Rows items={users.slice(0, count)} chips />38            {count < users.length && (39              <Table.LoadMore colSpan={4} loading={loading} hasMore onLoadMore={loadMore}>40                <Table.LoadMoreContent>41                  <Spinner size="md" />42                </Table.LoadMoreContent>43              </Table.LoadMore>44            )}45          </Table.Body>46        </Table.Content>47      </Table.ScrollContainer>48    </Table>49  );50}

1"use client";2// HeroUI v3.2.6 sorting adaptation (Apache-2.0).3import { useState } from "react";4import { Table, type SortDescriptor } from "@lenso/ui";5import { Headers, Rows, styles, users, type User } from "./data";6export function Sorting() {7  const [sort, setSort] = useState<SortDescriptor>({ column: "name", direction: "ascending" });8  const sorted = users9    .slice(0, 5)10    .sort(11      (a, b) =>12        String(a[sort.column as keyof User]).localeCompare(String(b[sort.column as keyof User])) *13        (sort.direction === "ascending" ? 1 : -1),14    );15  return (16    <Table>17      <Table.ScrollContainer>18        <Table.Content19          aria-label="Sortable table"20          xstyle={styles.content}21          sortDescriptor={sort}22          onSortChange={setSort}23        >24          <Headers sorting />25          <Table.Body>26            <Rows items={sorted} />27          </Table.Body>28        </Table.Content>29      </Table.ScrollContainer>30    </Table>31  );32}

1"use client";2// HeroUI v3.2.6 selection adaptation (Apache-2.0).3import { useState, type Key } from "react";4import * as stylex from "@stylexjs/stylex";5import { Table } from "@lenso/ui";6import { Headers, Rows, styles, users } from "./data";7export function SelectionDemo() {8  const [selected, setSelected] = useState<Set<Key>>(new Set());9  return (10    <div {...stylex.props(styles.stack)}>11      <Table>12        <Table.ScrollContainer>13          <Table.Content14            aria-label="Table with selection"15            xstyle={styles.content}16            selectionMode="multiple"17            selectedKeys={selected}18            onSelectionChange={setSelected}19          >20            <Headers selection />21            <Table.Body>22              <Rows items={users.slice(0, 4)} selection />23            </Table.Body>24          </Table.Content>25        </Table.ScrollContainer>26      </Table>27      <p {...stylex.props(styles.muted)}>28        Selected: {selected.size ? [...selected].join(", ") : "None"}29      </p>30    </div>31  );32}

1"use client";2// HeroUI v3.2.6 expandable-rows adaptation (Apache-2.0).3import { useState, type Key } from "react";4import * as stylex from "@stylexjs/stylex";5import { Icon } from "@iconify/react";6import { Table } from "@lenso/ui";7type Row = { key: string; title: string; type: string; date: string; children: Row[] };8const file = (key: string, title: string, date: string, children: Row[] = []): Row => ({9  key,10  title,11  date,12  children,13  type: children.length ? "Directory" : "File",14});15const rows = [16  file("1", "Documents", "10/20/2025", [17    file("2", "Project", "8/2/2025", [18      file("3", "Weekly Report", "7/10/2025"),19      file("4", "Budget", "8/20/2025"),20    ]),21  ]),22  file("5", "Photos", "2/3/2026", [23    file("6", "Image 1", "1/23/2026"),24    file("7", "Image 2", "2/3/2026"),25  ]),26];27const styles = stylex.create({28  content: { minWidth: 520 },29  title: { display: "flex", alignItems: "center", gap: 4 },30  chevron: { transform: "rotate(90deg)" },31  collapsed: { transform: { default: "none", ":dir(rtl)": "rotate(180deg)" } },32});33export function ExpandableRows() {34  const [expanded, setExpanded] = useState<Set<Key>>(new Set(["1"]));35  const renderRow = (item: Row): React.ReactNode => (36    <Table.Row itemKey={item.key} textValue={item.title}>37      <Table.Cell columnKey="name">38        {({ hasChildItems, isExpanded, isTreeColumn }) => (39          <span {...stylex.props(styles.title)}>40            {hasChildItems && isTreeColumn && (41              <Table.ExpandButton aria-label={`Toggle ${item.title}`}>42                <Icon43                  icon="gravity-ui:chevron-right"44                  width={16}45                  aria-hidden="true"46                  {...stylex.props(isExpanded ? styles.chevron : styles.collapsed)}47                />48              </Table.ExpandButton>49            )}50            <span>{item.title}</span>51          </span>52        )}53      </Table.Cell>54      <Table.Cell>{item.type}</Table.Cell>55      <Table.Cell>{item.date}</Table.Cell>56      <Table.Collection items={item.children}>{renderRow}</Table.Collection>57    </Table.Row>58  );59  return (60    <Table>61      <Table.ScrollContainer>62        <Table.Content63          aria-label="Files"64          xstyle={styles.content}65          treeColumn="name"66          expandedKeys={expanded}67          onExpandedChange={setExpanded}68        >69          <Table.Header>70            <Table.Column columnKey="name">Name</Table.Column>71            <Table.Column columnKey="type">Type</Table.Column>72            <Table.Column columnKey="date">Date Modified</Table.Column>73          </Table.Header>74          <Table.Body items={rows}>{renderRow}</Table.Body>75        </Table.Content>76      </Table.ScrollContainer>77    </Table>78  );79}

1"use client";2// HeroUI v3.2.6 pagination adaptation (Apache-2.0).3import { useState } from "react";4import { Table } from "@lenso/ui";5import { Headers, Pages, Rows, styles, users } from "./data";6export function PaginationDemo() {7  const [page, setPage] = useState(1);8  return (9    <Table>10      <Table.ScrollContainer>11        <Table.Content aria-label="Table with pagination" xstyle={styles.content}>12          <Headers />13          <Table.Body>14            <Rows items={users.slice((page - 1) * 4, page * 4)} />15          </Table.Body>16        </Table.Content>17      </Table.ScrollContainer>18      <Table.Footer>19        <Pages page={page} count={2} total={8} setPage={setPage} />20      </Table.Footer>21    </Table>22  );23}

1"use client";2// HeroUI v3.2.6 column-resizing adaptation (Apache-2.0).3import { Table } from "@lenso/ui";4import { Headers, Rows, styles, users } from "./data";5export function ColumnResizing() {6  return (7    <Table>8      <Table.ResizableContainer>9        <Table.Content aria-label="Table with resizable columns" xstyle={styles.resizing}>10          <Headers resizing />11          <Table.Body>12            <Rows items={users.slice(0, 5)} chips />13          </Table.Body>14        </Table.Content>15      </Table.ResizableContainer>16    </Table>17  );18}

1"use client";2// HeroUI v3.2.6 empty-state adaptation (Apache-2.0).3import * as stylex from "@stylexjs/stylex";4import { Icon } from "@iconify/react";5import { EmptyState, Table } from "@lenso/ui";6import { Headers, styles } from "./data";7const empty = stylex.create({8  root: { minHeight: 200 },9  content: {10    minHeight: 140,11    display: "flex",12    flexDirection: "column",13    alignItems: "center",14    justifyContent: "center",15    gap: 16,16    textAlign: "center",17    color: "var(--muted)",18  },19});20export function EmptyStateDemo() {21  return (22    <Table xstyle={empty.root}>23      <Table.ScrollContainer>24        <Table.Content aria-label="Empty table" xstyle={styles.content}>25          <Headers />26          <Table.Body>27            <tr>28              <td colSpan={4}>29                <EmptyState xstyle={empty.content}>30                  <Icon icon="gravity-ui:tray" width={24} aria-hidden="true" />31                  <span>No results found</span>32                </EmptyState>33              </td>34            </tr>35          </Table.Body>36        </Table.Content>37      </Table.ScrollContainer>38    </Table>39  );40}

1"use client";2// HeroUI v3.2.6 virtualization adaptation (Apache-2.0); native row spacers.3import { Table } from "@lenso/ui";4import { styles } from "./data";5const first = [6  "Emma",7  "Liam",8  "Olivia",9  "Noah",10  "Ava",11  "James",12  "Sophia",13  "Oliver",14  "Isabella",15  "Lucas",16  "Mia",17  "Ethan",18  "Charlotte",19  "Mason",20  "Amelia",21  "Logan",22  "Harper",23  "Alexander",24  "Ella",25  "Benjamin",26];27const last = [28  "Smith",29  "Johnson",30  "Williams",31  "Brown",32  "Jones",33  "Garcia",34  "Miller",35  "Davis",36  "Rodriguez",37  "Martinez",38  "Anderson",39  "Taylor",40  "Thomas",41  "Jackson",42  "White",43  "Harris",44  "Clark",45  "Lewis",46  "Robinson",47  "Walker",48];49const roles = [50  "Software Engineer",51  "Senior Engineer",52  "Staff Engineer",53  "Product Manager",54  "Designer",55  "Data Analyst",56  "QA Engineer",57  "DevOps Engineer",58  "Marketing Manager",59  "Sales Representative",60];61const users = Array.from({ length: 1000 }, (_, index) => ({62  key: index + 1,63  name: `${first[index % 20]} ${last[Math.floor(index / 20) % 20]}`,64  role: roles[index % 10],65  email: `${first[index % 20]!.toLowerCase()}.${last[Math.floor(index / 20) % 20]!.toLowerCase()}@acme.com`,66}));67export function Virtualization() {68  return (69    <Table>70      <Table.ScrollContainer xstyle={styles.virtualViewport}>71        <Table.Content aria-label="Virtualized table with 1000 rows" xstyle={styles.resizing}>72          <Table.Header xstyle={styles.sticky}>73            <Table.Column columnKey="name" minWidth={160}>74              Name75            </Table.Column>76            <Table.Column columnKey="role" minWidth={220}>77              Role78            </Table.Column>79            <Table.Column columnKey="email" minWidth={240}>80              Email81            </Table.Column>82          </Table.Header>83          <Table.Body items={users} virtualized={{ height: 300, rowHeight: 42 }}>84            {(user) => (85              <Table.Row itemKey={user.key}>86                <Table.Cell>{user.name}</Table.Cell>87                <Table.Cell>{user.role}</Table.Cell>88                <Table.Cell>{user.email}</Table.Cell>89              </Table.Row>90            )}91          </Table.Body>92        </Table.Content>93      </Table.ScrollContainer>94    </Table>95  );96}

1"use client";2// HeroUI v3.2.6 tanstack-table adaptation (Apache-2.0); retains the v9 data model.3import { useState } from "react";4import { Table, type SortDescriptor } from "@lenso/ui";5import {6  createColumnHelper,7  createPaginatedRowModel,8  createSortedRowModel,9  flexRender,10  rowPaginationFeature,11  rowSortingFeature,12  sortFn_alphanumeric,13  tableFeatures,14  useTable,15  type SortingState,16} from "@tanstack/react-table";17import { Pages, Status, styles, users, type User } from "./data";18const features = tableFeatures({19  paginatedRowModel: createPaginatedRowModel(),20  rowPaginationFeature,21  rowSortingFeature,22  sortFns: { alphanumeric: sortFn_alphanumeric },23  sortedRowModel: createSortedRowModel(),24});25const helper = createColumnHelper<typeof features, User>();26const columns = helper.columns([27  helper.accessor("name", { header: "Name" }),28  helper.accessor("role", { header: "Role" }),29  helper.accessor("status", {30    header: "Status",31    cell: (info) => <Status status={info.getValue()} />,32  }),33  helper.accessor("email", { header: "Email" }),34]);35const data = users.slice(0, 8);36export function TanstackTable() {37  const [sorting, setSorting] = useState<SortingState>([]);38  const table = useTable({39    columns,40    data,41    features,42    initialState: { pagination: { pageIndex: 0, pageSize: 4 } },43    onSortingChange: setSorting,44    state: { sorting },45  });46  const first = sorting[0];47  const descriptor: SortDescriptor | undefined = first48    ? { column: first.id, direction: first.desc ? "descending" : "ascending" }49    : undefined;50  return (51    <Table>52      <Table.ScrollContainer>53        <Table.Content54          aria-label="TanStack Table example"55          xstyle={styles.content}56          sortDescriptor={descriptor}57          onSortChange={(next) =>58            setSorting([{ id: String(next.column), desc: next.direction === "descending" }])59          }60        >61          <Table.Header>62            {table.getHeaderGroups()[0]?.headers.map((header) => (63              <Table.Column64                key={header.id}65                columnKey={header.id}66                allowsSorting={header.column.getCanSort()}67              >68                {({ sortDirection }) => (69                  <Table.SortableColumnHeader sortDirection={sortDirection}>70                    {flexRender(header.column.columnDef.header, header.getContext())}71                  </Table.SortableColumnHeader>72                )}73              </Table.Column>74            ))}75          </Table.Header>76          <Table.Body>77            {table.getRowModel().rows.map((row) => (78              <Table.Row key={row.id} itemKey={row.id}>79                {row.getAllCells().map((cell) => (80                  <Table.Cell key={cell.id}>81                    {flexRender(cell.column.columnDef.cell, cell.getContext())}82                  </Table.Cell>83                ))}84              </Table.Row>85            ))}86          </Table.Body>87        </Table.Content>88      </Table.ScrollContainer>89      <Table.Footer>90        <Pages91          page={table.state.pagination.pageIndex + 1}92          count={table.getPageCount()}93          total={8}94          setPage={(page) => table.setPageIndex(page - 1)}95        />96      </Table.Footer>97    </Table>98  );99}

1"use client";2// HeroUI v3.2.6 custom-cells adaptation (Apache-2.0).3import { useState, type Key } from "react";4import * as stylex from "@stylexjs/stylex";5import { Icon } from "@iconify/react";6import { Avatar, Button, Table, type SortDescriptor } from "@lenso/ui";7import { Status, styles, users, type User } from "./data";8const workers = users.slice(0, 5).map((user, index) => ({9  ...user,10  key: [4586932, 5273849, 7492836, 8293746, 1234567][index]!,11  role: [12    "Chief Executive Officer",13    "Chief Technology Officer",14    "Chief Marketing Officer",15    "Chief Financial Officer",16    "Product Manager",17  ][index]!,18  color: ["red", "green", "blue", "purple", "orange"][index],19}));20export function CustomCells() {21  const [selected, setSelected] = useState<Set<Key>>(new Set());22  const [sort, setSort] = useState<SortDescriptor>({ column: "name", direction: "ascending" });23  const sorted = [...workers].sort(24    (a, b) =>25      String(a[sort.column as keyof User]).localeCompare(String(b[sort.column as keyof User])) *26      (sort.direction === "ascending" ? 1 : -1),27  );28  return (29    <Table>30      <Table.ScrollContainer>31        <Table.Content32          aria-label="Table with custom cells"33          xstyle={styles.customCells}34          selectionMode="multiple"35          selectedKeys={selected}36          onSelectionChange={setSelected}37          sortDescriptor={sort}38          onSortChange={setSort}39        >40          <Table.Header>41            <Table.Column columnKey="selection" width={48}>42              <Table.SelectionCheckbox />43            </Table.Column>44            {[45              ["key", "Worker ID"],46              ["name", "Member"],47              ["role", "Role"],48              ["status", "Status"],49            ].map(([key, title]) => (50              <Table.Column key={key} columnKey={key!} allowsSorting>51                {({ sortDirection }) => (52                  <Table.SortableColumnHeader sortDirection={sortDirection}>53                    {title}54                  </Table.SortableColumnHeader>55                )}56              </Table.Column>57            ))}58            <Table.Column columnKey="actions">Actions</Table.Column>59          </Table.Header>60          <Table.Body>61            {sorted.map((user) => (62              <Table.Row key={user.key} itemKey={user.key}>63                <Table.Cell>64                  <Table.SelectionCheckbox aria-label={`Select ${user.name}`} />65                </Table.Cell>66                <Table.Cell>67                  <div {...stylex.props(styles.row)}>68                    #{user.key}69                    <Button70                      isIconOnly71                      aria-label={`Copy ID #${user.key}`}72                      size="sm"73                      variant="ghost"74                    >75                      <Icon icon="gravity-ui:copy" width={16} aria-hidden="true" />76                    </Button>77                  </div>78                </Table.Cell>79                <Table.Cell>80                  <div {...stylex.props(styles.row)}>81                    <Avatar size="sm">82                      <Avatar.Image83                        alt={user.name}84                        src={`https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/${user.color}.jpg`}85                      />86                      <Avatar.Fallback>87                        {user.name88                          .split(" ")89                          .map((name) => name[0])90                          .join("")}91                      </Avatar.Fallback>92                    </Avatar>93                    <div {...stylex.props(styles.detail)}>94                      <span>{user.name}</span>95                      <span {...stylex.props(styles.muted)}>{user.email}</span>96                    </div>97                  </div>98                </Table.Cell>99                <Table.Cell>{user.role}</Table.Cell>100                <Table.Cell>101                  <Status status={user.status} />102                </Table.Cell>103                <Table.Cell>104                  <div {...stylex.props(styles.row)}>105                    {(["View", "Edit", "Delete"] as const).map((action, index) => (106                      <Button107                        key={action}108                        isIconOnly109                        aria-label={`${action} ${user.name}`}110                        size="sm"111                        variant={action === "Delete" ? "danger-soft" : "tertiary"}112                      >113                        <Icon114                          icon={`gravity-ui:${["eye", "pencil", "trash-bin"][index]}`}115                          width={16}116                          aria-hidden="true"117                        />118                      </Button>119                    ))}120                  </div>121                </Table.Cell>122              </Table.Row>123            ))}124          </Table.Body>125        </Table.Content>126      </Table.ScrollContainer>127    </Table>128  );129}

1"use client";2// HeroUI v3.2.6 custom-styles adaptation (Apache-2.0).3import { Table } from "@lenso/ui";4import { Headers, Rows, styles, users } from "./data";5export function CustomStyles() {6  return (7    <Table xstyle={styles.customRoot}>8      <Table.ScrollContainer>9        <Table.Content aria-label="Team members" xstyle={styles.content}>10          <Headers custom email={false} />11          <Table.Body>12            <Rows items={users.slice(0, 3)} custom email={false} />13          </Table.Body>14        </Table.Content>15      </Table.ScrollContainer>16    </Table>17  );18}