جدول البيانات: الفرز والتحديد

هذه الصفحة غير مترجمة بعد، وهي معروضة بالإنجليزية.

The data table sorts when you click a column header and selects rows with a checkbox column. Sorting is on by default; pass enableRowSelection to add the checkboxes, and selection with onSelectionChange to read the selected rows.

			Status
Lena Park	Engineer	Platform	Active
Omar Haddad	Designer	Product	Active
Sofia Reyes	Engineer	Payments	Away
Yuki Tanaka	Manager	Platform	Active
Amir Nasser	Analyst	Growth	Active
Chloe Martin	Engineer	Payments	On leave

Not sorted.

No rows selected.

import { useState } from "react";
import { DataTable, type DataTableColumnDef, type DataTableSortingState } from "slotsmith/data-table";
import { people, type Person } from "../shared/people";

const columns: DataTableColumnDef<Person>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "role", header: "Role" },
  { accessorKey: "team", header: "Team" },
  // A column that should not sort opts out.
  { accessorKey: "status", header: "Status", enableSorting: false },
];

const rows = people.slice(0, 6);

export default function SortingAndSelection() {
  const [sorting, setSorting] = useState<DataTableSortingState>([]);
  const [selection, setSelection] = useState<Person[]>([]);
  return (
    <>
      <DataTable
        data={rows}
        columns={columns}
        getRowId={(person) => person.id}
        sorting={sorting}
        onSortingChange={setSorting}
        // Shift-click a second header to sort by both columns.
        enableMultiSort
        // People on leave cannot be selected: their checkbox is disabled.
        enableRowSelection={(row) => row.original.status !== "On leave"}
        selection={selection}
        onSelectionChange={setSelection}
        enablePagination={false}
      />
      <p>
        {sorting.length === 0
          ? "Not sorted."
          : `Sorted by: ${sorting.map((sort) => `${sort.id} ${sort.desc ? "descending" : "ascending"}`).join(", ")}`}
      </p>
      <p>{selection.length === 0 ? "No rows selected." : `Selected: ${selection.map((person) => person.name).join(", ")}`}</p>
    </>
  );
}

import type { DataTableColumnDef } from "slotsmith/data-table";

export type Person = { id: string; name: string; role: string; team: string; status: string; joined: string };

export const people: Person[] = [
  { id: "1", name: "Lena Park", role: "Engineer", team: "Platform", status: "Active", joined: "2021-03-08" },
  { id: "2", name: "Omar Haddad", role: "Designer", team: "Product", status: "Active", joined: "2020-11-16" },
  { id: "3", name: "Sofia Reyes", role: "Engineer", team: "Payments", status: "Away", joined: "2022-01-24" },
  { id: "4", name: "Yuki Tanaka", role: "Manager", team: "Platform", status: "Active", joined: "2019-06-03" },
  { id: "5", name: "Amir Nasser", role: "Analyst", team: "Growth", status: "Active", joined: "2023-02-13" },
  { id: "6", name: "Chloe Martin", role: "Engineer", team: "Payments", status: "On leave", joined: "2021-09-27" },
  { id: "7", name: "Jonas Weber", role: "Support", team: "Care", status: "Active", joined: "2022-07-11" },
  { id: "8", name: "Priya Nair", role: "Designer", team: "Product", status: "Away", joined: "2020-04-20" },
  { id: "9", name: "Diego Alvarez", role: "Engineer", team: "Growth", status: "Active", joined: "2023-05-30" },
  { id: "10", name: "Hana Kim", role: "Manager", team: "Care", status: "Active", joined: "2018-10-01" },
  { id: "11", name: "Tomas Novak", role: "Analyst", team: "Payments", status: "On leave", joined: "2022-12-05" },
  { id: "12", name: "Nadia Farouk", role: "Support", team: "Care", status: "Active", joined: "2024-01-15" },
];

export const columns: DataTableColumnDef<Person>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "role", header: "Role" },
  { accessorKey: "team", header: "Team" },
  { accessorKey: "status", header: "Status" },
  { accessorKey: "joined", header: "Joined" },
];

Click a header to sort it ascending; click again for descending, and a third time to clear. Shift-click a second header to add it to the sort. Tick rows to select them: the text under the table lists them. Chloe Martin is on leave, so her checkbox is disabled.

Sorting

Every data column, one with an accessorKey or accessorFn, sorts unless its definition sets enableSorting: false, as the Status column does. A display column, such as one that only holds buttons, has no value to sort by and never sorts. The header holds a button, and its <th> carries aria-sort, so screen readers announce the order.

sorting and onSortingChange control the sort. The state is a list of { id, desc }, one per sorted column, in priority order. Leave them out and use defaultSorting for a starting sort the table keeps itself.
enableMultiSort lets shift-click add columns to the sort.
Each column sorts ascending first. Set sortDescFirst: true in a column definition to start that column descending, as you might for numbers and dates.
manualSorting says the rows arrive already sorted, for sorting on the server; the table then only reports the clicks. The server data guide sorts this way.

The header button and the arrow are the SortTrigger and SortIcon slots, so a design system’s own can replace them.

Selection

enableRowSelection adds a checkbox to each row and a select-all checkbox to the header. Given a function, it decides per row: here, rows whose status is “On leave” cannot be selected.

selection and onSelectionChange control the selection as row objects, matched to rows by getRowId. defaultSelection sets a starting selection instead.
The header checkbox selects every selectable row on the current page, and is indeterminate while only some are selected.
resetSelectionOnPageChange clears the selection when the page or the page size changes.

Give rows a stable id with getRowId, so a selection survives re-sorting and new data. The checkboxes are the Checkbox slot, named by the selectRow and selectAll labels.