padding

Padding on columns (flex children) affects the inner content area of each cell. Padding on the Grid (container) adds space around all columns.

Grid API — Canvas (WASM/Taffy)

Code

import { Grid, columnHelper } from "@ohah/react-wasm-table";

const helper = columnHelper<Person>();
const columns = [
  helper.accessor("name", { size: 180, padding: 8 }),
  helper.accessor("dept", { size: 120, padding: 8 }),
  helper.accessor("salary", { size: 100 }),
];

<Grid padding={16} columns={columns} data={data} height={520} />;

Table API Code

import {
  Table,
  useReactTable,
  flexRender,
  getCoreRowModel,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
} from "@ohah/react-wasm-table";

const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });

<Table table={table} width={800} height={520} padding={16}>
  <Thead>
    {table.getHeaderGroups().map((hg) => (
      <Tr key={hg.id}>
        {hg.headers.map((h) => (
          <Th key={h.id} colSpan={h.colSpan}>
            {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
          </Th>
        ))}
      </Tr>
    ))}
  </Thead>
  <Tbody>
    {table.getRowModel().rows.map((row) => (
      <Tr key={row.id}>
        {row.getVisibleCells().map((cell) => (
          <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
        ))}
      </Tr>
    ))}
  </Tbody>
</Table>;