Import & export

import { useState } from "react";
import { DataTable } from "../../Datatable";
import type { ColumnSetting } 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" },
  { id: "sku", title: "SKU", width: 120 },
  { id: "product", title: "Product", width: 220 },
  { id: "brand", title: "Brand", width: 110 },
  { id: "category", title: "Category", width: 130 },
  { id: "region", title: "Region", width: 100 },
  { id: "stock", title: "Stock", width: 90, align: "right", filterType: "number" },
  {
    id: "price",
    title: "Price",
    width: 110,
    align: "right",
    filterType: "number",
    exportValue: (row) => row.price,
  },
  { id: "status", title: "Status", width: 110 },
  { id: "owner", title: "Owner", width: 140 },
];

export default function ImportExportExample({ theme }: ExampleProps) {
  const [rows, setRows] = useState<ProductRow[]>(() => [...initialProducts]);

  return (
    <DataTable
      theme={theme}
      title="Catalog files"
      dataSource={rows}
      onChange={setRows}
      columnSettings={columns}
      maxHeight={480}
      enablePagination
      enableDownload
      enableUpload
      defaultFileName="product-catalog"
      showGlobalSearch
    />
  );
}