Selection & pagination

import { useState } from "react";
import { DataTable } from "../../Datatable";
import type { ColumnSetting } from "../../Datatable";
import { products, type ProductRow } from "./exampleData";
import type { ExampleProps } from "./types";

const columns: ColumnSetting<ProductRow>[] = [
  { id: "id", title: "ID", width: 80, align: "right", filterType: "number" },
  { id: "sku", title: "SKU", width: 110 },
  { id: "product", title: "Product", width: 200 },
  { id: "brand", title: "Brand", width: 100 },
  { id: "owner", title: "Owner", width: 140 },
  { id: "category", title: "Category", width: 120 },
  { id: "subcategory", title: "Line", width: 100 },
  { id: "region", title: "Region", width: 90 },
  { id: "warehouse", title: "Warehouse", width: 110 },
  { id: "stock", title: "Stock", width: 90, align: "right", filterType: "number" },
  { id: "price", title: "Price", width: 100, align: "right" },
  { id: "status", title: "Status", width: 110 },
  { id: "rating", title: "Rating", width: 90, align: "right" },
  { id: "reviews", title: "Reviews", width: 100, align: "right" },
  { id: "updatedAt", title: "Updated", width: 110 },
];

export default function SelectionExample({ theme }: ExampleProps) {
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });

  return (
    <DataTable
      theme={theme}
      dataSource={products}
      columnSettings={columns}
      maxHeight={480}
      enablePagination
      pagination={pagination}
      onPaginationChange={setPagination}
      enableRowSelection
      enableMultiRowSelection
      enableRowIndex
      enableRowActions
      undoLimit={20}
    />
  );
}