Skip to main content

Tables

Display and manage structured data.

Overview​

LibreApps Desktop uses TanStack Table (formerly React Table) to provide powerful, flexible, and highly performant tables. These tables support sorting, filtering, pagination, and custom cell rendering.

Usage​

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const data = [
  { id: 1, name: "John Doe", email: "john@example.com" },
  { id: 2, name: "Jane Smith", email: "jane@example.com" },
]

export function MyTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.email}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Advanced Features​

For more complex tables, we recommend using the DataTable component pattern, which integrates TanStack Table's logic with shadcn/ui's styling. This allows for:

  • Sorting: Click on column headers to sort data.
  • Filtering: Add a search input to filter rows.
  • Pagination: Navigate through large datasets.
  • Selection: Select one or more rows for bulk actions.

Best Practices​

  • ✅ Do this: Use tables for displaying structured data that needs to be compared or scanned.
  • ✅ Do this: Provide clear column headers.
  • ❌ Don't do this: Use tables for page layout; use CSS Grid or Flexbox instead.