Column controls

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

const columns: ColumnSetting<ProductRow>[] = [
  { id: "id", title: "ID", width: 80, pinned: "left", align: "right", headerAlign: "center", enableReordering: false },
  { id: "sku", title: "SKU", width: 110, pinned: "left", enableReordering: false },
  { id: "product", title: "Product", width: 220 },
  { id: "brand", title: "Brand", width: 110 },
  { id: "category", title: "Category", width: 120 },
  { id: "subcategory", title: "Line", width: 100 },
  { id: "owner", title: "Owner", width: 140 },
  { id: "region", title: "Region", width: 100 },
  { id: "warehouse", title: "Warehouse", width: 120 },
  { id: "stock", title: "Stock", width: 90, align: "right", filterType: "number" },
  { id: "price", title: "Price", width: 100, align: "right", filterType: "number" },
  { id: "cost", title: "Cost", width: 100, align: "right", filterType: "number" },
  { id: "margin", title: "Margin %", width: 100, align: "right" },
  { id: "rating", title: "Rating", width: 90, align: "right" },
  { id: "updatedAt", title: "Updated", width: 110 },
  { id: "status", title: "Status", width: 110, pinned: "right" },
];

export default function ColumnsExample({ theme }: ExampleProps) {
  const [, setLayout] = useState<ColumnLayoutSettings>();

  return (
    <DataTable
      theme={theme}
      title="Column workspace"
      dataSource={products}
      columnSettings={columns}
      maxHeight={510}
      enablePagination={false}
      enableColumnResizing
      enableColumnReorder
      enableColumnPinning
      enableColumnSettings
      showGlobalSearch
      onColumnSettingsChange={setLayout}
    />
  );
}