Table ↔ spreadsheet

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

const columns: ColumnSetting<ProductRow>[] = [
  { id: "id", title: "ID", width: 80, align: "right", pinned: "left" },
  { id: "sku", title: "SKU", width: 120, editor: "text" },
  { id: "product", title: "Product", width: 220, editor: "text" },
  { id: "brand", title: "Brand", width: 110, editor: "text" },
  { id: "category", title: "Category", width: 130 },
  { id: "stock", title: "Stock", width: 90, align: "right", editor: "number" },
  { id: "price", title: "Price", width: 110, align: "right", editor: "number" },
  { id: "status", title: "Status", width: 110, pinned: "right" },
];

export default function ModeToggleExample({ theme }: ExampleProps) {
  const [rows, setRows] = useState<ProductRow[]>(() => [...initialProducts]);
  const [mode, setMode] = useState<DataTableMode>("table");

  return (
    <div>
      <div className="example-demo-toolbar" aria-describedby="mode-toggle-help">
        <p id="mode-toggle-help" className="example-demo-toolbar__help">
          {mode === "spreadsheet"
            ? "Spreadsheet mode adds sheet chrome such as the formula bar while keeping the same rows."
            : "Table mode keeps compact product chrome. Switch to spreadsheet for sheet-style editing."}
        </p>
        <div className="example-demo-toolbar__actions" role="group" aria-label="Table mode">
          <div className="example-demo-toolbar__segment">
            <button
              type="button"
              className={mode === "table" ? "is-active" : undefined}
              aria-pressed={mode === "table"}
              onClick={() => setMode("table")}
            >
              Table
            </button>
            <button
              type="button"
              className={mode === "spreadsheet" ? "is-active" : undefined}
              aria-pressed={mode === "spreadsheet"}
              onClick={() => setMode("spreadsheet")}
            >
              Spreadsheet
            </button>
          </div>
        </div>
      </div>
      <DataTable
        theme={theme}
        mode={mode}
        title={mode === "spreadsheet" ? "Product sheet" : "Product table"}
        dataSource={rows}
        onChange={setRows}
        columnSettings={columns}
        maxHeight={480}
        enableEditing
        enableColumnResizing
        showGlobalSearch={mode === "table"}
        enablePagination={mode === "table"}
      />
    </div>
  );
}