Skip to main content
components

Table

Virtualized tables for large datasets, complex interactions, and aligned records.

Package@g4rcez/componentsSectionDisplay Components

Examples

Virtual and fast by default

The table component uses the react-virtuoso to guarantee a fast and virtualized table, avoiding problems with large datasets

NomeIDTypeDocument
tsx
import { Table, Checkbox } from "@g4rcez/components";
function SelectionTable() {
  return (
    <Table
      cols={cols}
      rows={data}
      Aside={({ row }) => (
        <Checkbox 
          checked={isSelected(row.id)} 
          onChange={handleSelect} 
        />
      )}
      getRowProps={(item) => 
        item.type === "pf" ? { 
          style: { background: "hsla(0, 0%, 14%, 0.5)" } 
        } : {}
      }
    />
  );
}

Grouped rows

Set the initial groups to split related rows into separate tables. Use the Group control to change or clear the grouping.

Companies

NomeIDTypeDocument

Individuals

NomeIDTypeDocument
tsx
const groups = ["pj", "pf"].map((type, index) => ({
  ...cols.find((column) => column.id === "type"),
  groupId: `client-type-${type}`,
  groupKey: "type",
  groupName: type,
  groupTitle: <span>{type === "pj" ? "Companies" : "Individuals"}</span>,
  index,
  rows: clients.filter((client) => client.type === type),
}));

function GroupedTable() {
  const preferences = useTablePreferences("clients-by-type", cols, { groups });

  return <Table {...preferences} name="clients-by-type" rows={clients} />;
}

When to use Table

Use when

Use Table for related records that benefit from aligned columns, sorting, grouping, or selection.

Avoid when

Avoid a table when each record needs a different layout or when a short list is easier to scan as cards.

Accessibility

Keep native table semantics, provide a caption or accessible name, and keep row and column actions keyboard reachable.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.