Row add & delete

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

type TeamRow = {
  id: number | "";
  name: string;
  role: string;
  location: string;
  status: "" | "Active" | "Away" | "Onboarding";
};

const initialRows: TeamRow[] = [
  { id: 101, name: "Maya Chen", role: "Design lead", location: "Singapore", status: "Active" },
  { id: 102, name: "Jon Bell", role: "Frontend engineer", location: "London", status: "Active" },
  { id: 103, name: "Priya Nair", role: "Product manager", location: "Bengaluru", status: "Away" },
  { id: 104, name: "Luis Santos", role: "Data analyst", location: "Manila", status: "Active" },
  { id: 105, name: "Amara Okafor", role: "QA engineer", location: "Lagos", status: "Onboarding" },
  { id: 106, name: "Noah Kim", role: "Support lead", location: "Seoul", status: "Active" },
];

const columns: ColumnSetting<TeamRow>[] = [
  { id: "id", title: "ID", width: 80, align: "right" },
  { id: "name", title: "Name", width: 190, editor: "text" },
  { id: "role", title: "Role", width: 180, editor: "text" },
  { id: "location", title: "Location", width: 140, editor: "text" },
  {
    id: "status",
    title: "Status",
    width: 140,
    editor: {
      type: "select",
      options: ["Active", "Away", "Onboarding"].map((value) => ({ value, label: value })),
    },
  },
];

export default function RowActionsExample({ theme }: ExampleProps) {
  const [rows, setRows] = useState<TeamRow[]>(initialRows);

  return (
    <div>
      <div className="example-demo-toolbar" aria-describedby="row-actions-help">
        <p id="row-actions-help" className="example-demo-toolbar__help">
          Right-click a row to insert, duplicate, or delete above or below. Select multiple rows to reveal the bulk-delete action in the table header.
        </p>
      </div>
      <DataTable
        theme={theme}
        title="Team rows"
        dataSource={rows}
        onChange={setRows}
        columnSettings={columns}
        maxHeight={420}
        enableEditing
        enableRowIndex
        enableRowSelection
        enableMultiRowSelection
        enableRowActions
        undoLimit={20}
        redoLimit={20}
        createEmptyRow={(): TeamRow => ({
          id: "",
          name: "",
          role: "",
          location: "",
          status: "",
        })}
      />
    </div>
  );
}