justify-content
Controls distribution of columns along the main axis.
justify-content:
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 }),
helper.accessor("dept", { size: 120 }),
helper.accessor("salary", { size: 100 }),
];
<Grid justifyContent="center" width={800} 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} justifyContent="center">
<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>;