@multiplatform.one/table 6.0.0

package/dist/esm/components/DataTable/DataTable.stories.mjs

@@ -0,0 +1,2672 @@
+import { fn } from "storybook/test";
+import { createColumnHelper } from "@tanstack/react-table";
+import React, { useMemo } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { Avatar, Text, View, YStack } from "tamagui";
+import { DataTableFilters, DataTablePagination, DataTableToolbar } from "../../index.mjs";
+import { DataTable } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Table/DataTable",
+  component: DataTable,
+  parameters: {
+    layout: "fullscreen"
+  },
+  // Storybook 10 errors when callback args are used implicitly during render.
+  // Provide explicit spies for all on* callbacks the component fires.
+  args: {
+    onStateChange: fn(),
+    onCellChange: fn(),
+    onDataChange: fn()
+  },
+  decorators: [Story => /* @__PURE__ */jsx(View, {
+    flex: 1,
+    padding: "$4",
+    width: "100%",
+    children: /* @__PURE__ */jsx(Story, {})
+  })]
+};
+var DataTable_stories_default = meta;
+const generateUsers = count => {
+  const departments = ["Engineering", "Marketing", "Sales", "HR", "Finance"];
+  const roles = ["Developer", "Manager", "Analyst", "Designer", "Coordinator"];
+  const statuses = ["active", "inactive", "pending"];
+  return Array.from({
+    length: count
+  }, (_, i) => ({
+    id: `user-${i + 1}`,
+    avatar: `https://i.pravatar.cc/150?img=${i % 70 + 1}`,
+    firstName: `User${i + 1}`,
+    lastName: `Last${i + 1}`,
+    email: `user${i + 1}@company.com`,
+    age: 20 + i % 40,
+    department: departments[i % departments.length],
+    role: roles[i % roles.length],
+    salary: 5e4 + i % 1e5,
+    status: statuses[i % statuses.length],
+    joinDate: new Date(2020, i % 12, i % 28 + 1).toISOString().split("T")[0],
+    lastLogin: new Date(Date.now() - i % 30 * 24 * 60 * 60 * 1e3).toISOString().split("T")[0]
+  }));
+};
+const columnHelper = createColumnHelper();
+const columns = [
+// Avatar Column
+columnHelper.accessor("avatar", {
+  header: "Avatar",
+  cell: info => /* @__PURE__ */jsxs(Avatar, {
+    circular: true,
+    size: "$3",
+    children: [/* @__PURE__ */jsx(Avatar.Image, {
+      accessibilityLabel: "User avatar",
+      src: info.getValue()
+    }), /* @__PURE__ */jsx(Avatar.Fallback, {
+      backgroundColor: "$gray6"
+    })]
+  }),
+  enableSorting: false,
+  enableColumnFilter: false,
+  size: 60
+}),
+// Name Column
+columnHelper.accessor(row => `${row.firstName} ${row.lastName}`, {
+  id: "fullName",
+  header: "Full Name",
+  cell: info => {
+    const user = info.row.original;
+    return /* @__PURE__ */jsxs(YStack, {
+      gap: "$1",
+      children: [/* @__PURE__ */jsx(Text, {
+        fontWeight: "600",
+        children: `${user.firstName} ${user.lastName}`
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$2",
+        color: "$gray11",
+        children: user.email
+      })]
+    });
+  },
+  filterFn: (row, _id, value) => {
+    const fullName = `${row.original.firstName} ${row.original.lastName}`.toLowerCase();
+    return fullName.includes(value.toLowerCase());
+  }
+}),
+// Age Column
+columnHelper.accessor("age", {
+  header: "Age",
+  cell: info => /* @__PURE__ */jsx(Text, {
+    children: info.getValue()
+  }),
+  filterFn: "inNumberRange"
+}),
+// Department Column
+columnHelper.accessor("department", {
+  header: "Department",
+  cell: info => /* @__PURE__ */jsx(View, {
+    backgroundColor: "$blue5",
+    paddingHorizontal: "$2",
+    paddingVertical: "$1",
+    borderRadius: "$2",
+    children: /* @__PURE__ */jsx(Text, {
+      color: "$blue11",
+      fontSize: "$2",
+      children: info.getValue()
+    })
+  })
+}),
+// Role Column
+columnHelper.accessor("role", {
+  header: "Role",
+  cell: info => /* @__PURE__ */jsx(Text, {
+    children: info.getValue()
+  })
+}),
+// Salary Column
+columnHelper.accessor("salary", {
+  header: "Salary",
+  cell: info => /* @__PURE__ */jsxs(Text, {
+    children: ["$", info.getValue().toLocaleString()]
+  }),
+  filterFn: "inNumberRange"
+}),
+// Status Column
+columnHelper.accessor("status", {
+  header: "Status",
+  cell: info => {
+    const status = info.getValue();
+    return /* @__PURE__ */jsx(View, {
+      backgroundColor: status === "active" ? "$green5" : status === "inactive" ? "$red5" : "$yellow5",
+      paddingHorizontal: "$2",
+      paddingVertical: "$1",
+      borderRadius: "$2",
+      children: /* @__PURE__ */jsx(Text, {
+        color: status === "active" ? "$green11" : status === "inactive" ? "$red11" : "$yellow11",
+        fontSize: "$2",
+        fontWeight: "600",
+        textTransform: "capitalize",
+        children: status
+      })
+    });
+  }
+}),
+// Join Date Column
+columnHelper.accessor("joinDate", {
+  header: "Join Date",
+  cell: info => /* @__PURE__ */jsx(Text, {
+    children: new Date(info.getValue()).toLocaleDateString()
+  }),
+  filterFn: "includesString"
+}),
+// Last Login Column
+columnHelper.accessor("lastLogin", {
+  header: "Last Login",
+  cell: info => /* @__PURE__ */jsx(Text, {
+    children: new Date(info.getValue()).toLocaleDateString()
+  }),
+  filterFn: "includesString"
+}),
+// Actions Column
+columnHelper.display({
+  id: "actions",
+  header: "Actions",
+  cell: _info => /* @__PURE__ */jsx(Button, {
+    size: "$2",
+    variant: "outlined",
+    children: "Edit"
+  }),
+  enableSorting: false,
+  enableColumnFilter: false
+})];
+const availableColumns = [{
+  id: "fullName",
+  label: "Full Name",
+  type: "text"
+}, {
+  id: "age",
+  label: "Age",
+  type: "number"
+}, {
+  id: "department",
+  label: "Department",
+  type: "select",
+  options: [{
+    label: "Engineering",
+    value: "Engineering",
+    count: 0
+  }, {
+    label: "Marketing",
+    value: "Marketing",
+    count: 0
+  }, {
+    label: "Sales",
+    value: "Sales",
+    count: 0
+  }, {
+    label: "HR",
+    value: "HR",
+    count: 0
+  }, {
+    label: "Finance",
+    value: "Finance",
+    count: 0
+  }]
+}, {
+  id: "role",
+  label: "Role",
+  type: "select",
+  options: [{
+    label: "Developer",
+    value: "Developer",
+    count: 0
+  }, {
+    label: "Manager",
+    value: "Manager",
+    count: 0
+  }, {
+    label: "Analyst",
+    value: "Analyst",
+    count: 0
+  }, {
+    label: "Designer",
+    value: "Designer",
+    count: 0
+  }, {
+    label: "Coordinator",
+    value: "Coordinator",
+    count: 0
+  }]
+}, {
+  id: "salary",
+  label: "Salary",
+  type: "number"
+}, {
+  id: "status",
+  label: "Status",
+  type: "select",
+  options: [{
+    label: "Active",
+    value: "active",
+    count: 0
+  }, {
+    label: "Inactive",
+    value: "inactive",
+    count: 0
+  }, {
+    label: "Pending",
+    value: "pending",
+    count: 0
+  }]
+}, {
+  id: "joinDate",
+  label: "Join Date",
+  type: "date"
+}, {
+  id: "lastLogin",
+  label: "Last Login",
+  type: "date"
+}];
+const AdvancedTableStory = () => {
+  const data = useMemo(() => generateUsers(1e3), []);
+  const columnsWithCounts = useMemo(() => {
+    return availableColumns.map(column => {
+      if (column.options) {
+        const counts = column.options.map(option => {
+          const count = data.filter(item => {
+            const value = item[column.id];
+            return String(value).toLowerCase() === option.value.toLowerCase();
+          }).length;
+          return {
+            ...option,
+            count
+          };
+        });
+        return {
+          ...column,
+          options: counts
+        };
+      }
+      return column;
+    });
+  }, [data]);
+  return /* @__PURE__ */jsx(View, {
+    flex: 1,
+    padding: "$4",
+    children: /* @__PURE__ */jsxs(YStack, {
+      gap: "$6",
+      children: [/* @__PURE__ */jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(Text, {
+          fontSize: "$6",
+          fontWeight: "bold",
+          children: "Advanced User Management Table"
+        }), /* @__PURE__ */jsx(Text, {
+          fontSize: "$4",
+          color: "$gray11",
+          children: "Powerful filtering, sorting, and pagination with URL state management"
+        })]
+      }), /* @__PURE__ */jsx(DataTable, {
+        data,
+        columns,
+        syncWithUrl: true,
+        enableFiltering: true,
+        enableSorting: true,
+        enablePagination: true,
+        enableColumnVisibility: true,
+        enableColumnResizing: true,
+        enableGlobalSearch: true,
+        enableViews: true,
+        renderToolbar: props => /* @__PURE__ */jsx(DataTableToolbar, {
+          ...props,
+          customActions: /* @__PURE__ */jsx(Button, {
+            size: "$3",
+            variant: "outlined",
+            children: "Export CSV"
+          })
+        }),
+        renderFilters: props => /* @__PURE__ */jsx(DataTableFilters, {
+          ...props,
+          availableColumns: columnsWithCounts,
+          maxFilters: 5
+        }),
+        renderPagination: props => /* @__PURE__ */jsx(DataTablePagination, {
+          ...props,
+          compact: true
+        }),
+        size: "md",
+        "aria-label": "User management table"
+      })]
+    })
+  });
+};
+const SimpleTableStory = () => {
+  const data = useMemo(() => generateUsers(50), []);
+  const simpleColumns = columns.slice(1, 6);
+  return /* @__PURE__ */jsx(View, {
+    flex: 1,
+    padding: "$4",
+    children: /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: simpleColumns,
+      enableFiltering: false,
+      enableSorting: true,
+      enablePagination: true,
+      enableGlobalSearch: true,
+      size: "sm"
+    })
+  });
+};
+const sampleData = [{
+  id: 1,
+  firstName: "John",
+  lastName: "Doe",
+  age: 28,
+  email: "john.doe@example.com",
+  status: "active"
+}, {
+  id: 2,
+  firstName: "Jane",
+  lastName: "Smith",
+  age: 32,
+  email: "jane.smith@example.com",
+  status: "active"
+}, {
+  id: 3,
+  firstName: "Bob",
+  lastName: "Johnson",
+  age: 45,
+  email: "bob.johnson@example.com",
+  status: "inactive"
+}, {
+  id: 4,
+  firstName: "Alice",
+  lastName: "Williams",
+  age: 29,
+  email: "alice.williams@example.com",
+  status: "active"
+}, {
+  id: 5,
+  firstName: "Charlie",
+  lastName: "Brown",
+  age: 35,
+  email: "charlie.brown@example.com",
+  status: "inactive"
+}];
+const personColumnHelper = createColumnHelper();
+const basicColumns = [personColumnHelper.accessor("id", {
+  header: "ID",
+  cell: info => info.getValue()
+}), personColumnHelper.accessor("firstName", {
+  header: "First Name",
+  cell: info => info.getValue()
+}), personColumnHelper.accessor("lastName", {
+  header: "Last Name",
+  cell: info => info.getValue()
+}), personColumnHelper.accessor("age", {
+  header: "Age",
+  cell: info => info.getValue()
+}), personColumnHelper.accessor("email", {
+  header: "Email",
+  cell: info => info.getValue()
+}), personColumnHelper.accessor("status", {
+  header: "Status",
+  cell: info => {
+    const status = info.getValue();
+    return /* @__PURE__ */jsx(Text, {
+      style: {
+        color: status === "active" ? "green" : "red",
+        fontWeight: "bold"
+      },
+      children: status
+    });
+  }
+})];
+const Advanced = {
+  name: "Main",
+  render: () => /* @__PURE__ */jsx(AdvancedTableStory, {})
+};
+const Simple = {
+  render: () => /* @__PURE__ */jsx(SimpleTableStory, {})
+};
+const Basic = {
+  args: {
+    data: sampleData,
+    columns: basicColumns
+  }
+};
+const WithPagination = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enablePagination: true,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 2
+      }
+    }
+  }
+};
+const WithSorting = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enableSorting: true
+  }
+};
+const WithFiltering = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enableFiltering: true
+  }
+};
+const FullFeatured = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enableFiltering: true,
+    enableSorting: true,
+    enablePagination: true,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 3
+      }
+    }
+  }
+};
+const Compact = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    size: "sm"
+  }
+};
+const Large = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    size: "lg"
+  }
+};
+const WithColumnResizing = {
+  args: {
+    data: sampleData,
+    columns: basicColumns.map(col => ({
+      ...col,
+      minSize: 80,
+      maxSize: 300
+    })),
+    enableColumnResizing: true
+  }
+};
+const largeData = Array.from({
+  length: 1e4
+}, (_, i) => ({
+  ...sampleData[i % sampleData.length],
+  id: i + 1,
+  firstName: `User${i + 1}`,
+  lastName: `Last${i + 1}`,
+  email: `user${i + 1}@example.com`
+}));
+const WithVirtualization = {
+  args: {
+    data: largeData,
+    columns: basicColumns,
+    enableVirtualization: true,
+    virtualizationHeight: 400,
+    virtualizationOverscan: 5
+  }
+};
+const WithColumnPinning = {
+  args: {
+    data: sampleData,
+    columns: basicColumns.map(col => ({
+      ...col,
+      minSize: 80,
+      maxSize: 300
+    })),
+    enableColumnPinning: true,
+    maxPinnedColumns: 2,
+    enableColumnResizing: true
+  }
+};
+const WithKeyboardNavigation = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enableKeyboardNavigation: true
+  }
+};
+const expandableData = sampleData.map((p, i) => ({
+  ...p,
+  subRows: i < 2 ? [{
+    ...p,
+    id: -i - 1,
+    firstName: `Detail ${i}`
+  }] : void 0
+}));
+const WithRowExpansion = {
+  args: {
+    data: expandableData,
+    columns: basicColumns,
+    enableRowExpansion: true,
+    renderSubComponent: row => /* @__PURE__ */jsx(View, {
+      padding: "$4",
+      backgroundColor: "$color2",
+      children: /* @__PURE__ */jsxs(Text, {
+        children: ["Expanded: ", row.original.firstName, " ", row.original.lastName]
+      })
+    })
+  }
+};
+const Empty = {
+  args: {
+    data: [],
+    columns: basicColumns
+  }
+};
+const ReadOnly = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const WithRowNumbers = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    showRowNumbers: true
+  }
+};
+const editableColumns = [{
+  accessorKey: "name",
+  header: "Name",
+  field: "input"
+}, {
+  accessorKey: "quantity",
+  header: "Quantity",
+  field: "stepper",
+  fieldProps: {
+    min: 0,
+    max: 100
+  }
+}, {
+  accessorKey: "category",
+  header: "Category",
+  field: "select",
+  fieldProps: {
+    options: [{
+      label: "Electronics",
+      value: "electronics"
+    }, {
+      label: "Clothing",
+      value: "clothing"
+    }, {
+      label: "Food",
+      value: "food"
+    }]
+  }
+}, {
+  accessorKey: "active",
+  header: "Active",
+  field: "checkbox"
+}];
+const editableData = [{
+  id: 1,
+  name: "Product A",
+  quantity: 10,
+  category: "electronics",
+  active: true
+}, {
+  id: 2,
+  name: "Product B",
+  quantity: 5,
+  category: "clothing",
+  active: false
+}, {
+  id: 3,
+  name: "Product C",
+  quantity: 20,
+  category: "food",
+  active: true
+}];
+const EditableTableStory = () => {
+  const [data, setData] = React.useState(editableData);
+  return /* @__PURE__ */jsx(View, {
+    flex: 1,
+    padding: "$4",
+    children: /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: editableColumns,
+      onDataChange: setData,
+      showAddRow: true,
+      showDeleteRow: true,
+      showRowNumbers: true,
+      defaultRow: {
+        id: Date.now(),
+        name: "",
+        quantity: 0,
+        category: "electronics",
+        active: false
+      }
+    })
+  });
+};
+const EditableTable = {
+  render: () => /* @__PURE__ */jsx(EditableTableStory, {})
+};
+const WithFieldTypes = {
+  render: () => /* @__PURE__ */jsx(EditableTableStory, {})
+};
+const allFieldsData = [{
+  id: 1,
+  textField: "Hello World",
+  numberField: 42,
+  selectField: "option1",
+  comboboxField: "choice1",
+  checkboxField: true,
+  switchField: false,
+  dateField: "2024-03-15",
+  datetimeField: "2024-03-15 14:30",
+  timeField: "14:30",
+  durationField: 3600,
+  colorField: "#FF5733",
+  ratingField: 4,
+  phoneField: "+1234567890",
+  currencyField: 1250.5,
+  percentField: 75.5,
+  linkField: "DOC-001"
+}, {
+  id: 2,
+  textField: "Test Row",
+  numberField: 100,
+  selectField: "option2",
+  comboboxField: "choice2",
+  checkboxField: false,
+  switchField: true,
+  dateField: "2024-06-20",
+  datetimeField: "2024-06-20 09:00",
+  timeField: "09:00",
+  durationField: 7200,
+  colorField: "#33FF57",
+  ratingField: 5,
+  phoneField: "+0987654321",
+  currencyField: 2500,
+  percentField: 100,
+  linkField: "DOC-002"
+}, {
+  id: 3,
+  textField: "Another Entry",
+  numberField: 0,
+  selectField: "option3",
+  comboboxField: "choice3",
+  checkboxField: true,
+  switchField: true,
+  dateField: "2024-01-01",
+  datetimeField: "2024-01-01 00:00",
+  timeField: "00:00",
+  durationField: 0,
+  colorField: "#3357FF",
+  ratingField: 1,
+  phoneField: "+1111111111",
+  currencyField: 0,
+  percentField: 0,
+  linkField: "DOC-003"
+}];
+const selectOptions = [{
+  label: "Option 1",
+  value: "option1"
+}, {
+  label: "Option 2",
+  value: "option2"
+}, {
+  label: "Option 3",
+  value: "option3"
+}];
+const comboboxOptions = [{
+  label: "Choice 1",
+  value: "choice1"
+}, {
+  label: "Choice 2",
+  value: "choice2"
+}, {
+  label: "Choice 3",
+  value: "choice3"
+}, {
+  label: "Choice 4",
+  value: "choice4"
+}];
+const linkOptions = [{
+  label: "Document 001",
+  value: "DOC-001"
+}, {
+  label: "Document 002",
+  value: "DOC-002"
+}, {
+  label: "Document 003",
+  value: "DOC-003"
+}];
+const allFieldsColumns = [{
+  accessorKey: "textField",
+  header: "Text",
+  field: "input",
+  fieldProps: {
+    placeholder: "Enter text..."
+  }
+}, {
+  accessorKey: "numberField",
+  header: "Number",
+  field: "stepper",
+  fieldProps: {
+    min: 0,
+    max: 1e3,
+    placeholder: "0"
+  }
+}, {
+  accessorKey: "selectField",
+  header: "Select",
+  field: "select",
+  fieldProps: {
+    options: selectOptions,
+    placeholder: "Select..."
+  }
+}, {
+  accessorKey: "comboboxField",
+  header: "Combobox",
+  field: "combobox",
+  fieldProps: {
+    options: comboboxOptions,
+    placeholder: "Search..."
+  }
+}, {
+  accessorKey: "checkboxField",
+  header: "Checkbox",
+  field: "checkbox"
+}, {
+  accessorKey: "switchField",
+  header: "Switch",
+  field: "switch"
+}, {
+  accessorKey: "dateField",
+  header: "Date",
+  field: "datepicker",
+  fieldProps: {
+    placeholder: "YYYY-MM-DD"
+  }
+}, {
+  accessorKey: "datetimeField",
+  header: "DateTime",
+  field: "datetimepicker",
+  fieldProps: {
+    placeholder: "YYYY-MM-DD HH:MM"
+  }
+}, {
+  accessorKey: "timeField",
+  header: "Time",
+  field: "timepicker",
+  fieldProps: {
+    placeholder: "HH:MM"
+  }
+}, {
+  accessorKey: "durationField",
+  header: "Duration",
+  field: "duration",
+  fieldProps: {
+    placeholder: "Seconds"
+  }
+}, {
+  accessorKey: "colorField",
+  header: "Color",
+  field: "colorpicker",
+  fieldProps: {
+    placeholder: "#000000"
+  }
+}, {
+  accessorKey: "ratingField",
+  header: "Rating",
+  field: "rating"
+}, {
+  accessorKey: "phoneField",
+  header: "Phone",
+  field: "phoneinput",
+  fieldProps: {
+    placeholder: "+1234567890"
+  }
+}, {
+  accessorKey: "currencyField",
+  header: "Currency",
+  field: "stepper",
+  fieldProps: {
+    currency: "$",
+    placeholder: "0.00"
+  }
+}, {
+  accessorKey: "percentField",
+  header: "Percent",
+  field: "stepper",
+  fieldProps: {
+    placeholder: "0"
+  }
+}, {
+  accessorKey: "linkField",
+  header: "Link",
+  field: "combobox",
+  fieldProps: {
+    options: linkOptions,
+    placeholder: "Search document..."
+  }
+}];
+const AllFieldTypesEditableStory = () => {
+  const [data, setData] = React.useState(allFieldsData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsxs(YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */jsx(Text, {
+        fontSize: "$6",
+        fontWeight: "bold",
+        children: "All Field Types - Editable"
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$3",
+        color: "$gray11",
+        children: "Testing all 17 DataTable field types in editable mode"
+      })]
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: allFieldsColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      showAddRow: true,
+      showDeleteRow: true,
+      defaultRow: {
+        id: Date.now(),
+        textField: "",
+        numberField: 0,
+        selectField: "",
+        comboboxField: "",
+        checkboxField: false,
+        switchField: false,
+        dateField: "",
+        datetimeField: "",
+        timeField: "",
+        durationField: 0,
+        colorField: "",
+        ratingField: 0,
+        phoneField: "",
+        currencyField: 0,
+        percentField: 0,
+        linkField: ""
+      },
+      "aria-label": "All field types editable table"
+    })]
+  });
+};
+const AllFieldTypesEditable = {
+  render: () => /* @__PURE__ */jsx(AllFieldTypesEditableStory, {})
+};
+const AllFieldTypesReadOnlyStory = () => {
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsxs(YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */jsx(Text, {
+        fontSize: "$6",
+        fontWeight: "bold",
+        children: "All Field Types - Read Only"
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$3",
+        color: "$gray11",
+        children: "Testing all 17 DataTable field types in read-only mode"
+      })]
+    }), /* @__PURE__ */jsx(DataTable, {
+      data: allFieldsData,
+      columns: allFieldsColumns,
+      readOnly: true,
+      showRowNumbers: true,
+      "aria-label": "All field types read-only table"
+    })]
+  });
+};
+const AllFieldTypesReadOnly = {
+  render: () => /* @__PURE__ */jsx(AllFieldTypesReadOnlyStory, {})
+};
+const textFieldData = [{
+  id: 1,
+  title: "First Item",
+  description: "Description for first item",
+  notes: "Some notes"
+}, {
+  id: 2,
+  title: "Second Item",
+  description: "Another description",
+  notes: "More notes here"
+}, {
+  id: 3,
+  title: "Third Item",
+  description: "Final description",
+  notes: "Final notes"
+}];
+const textFieldColumns = [{
+  accessorKey: "title",
+  header: "Title",
+  field: "input"
+}, {
+  accessorKey: "description",
+  header: "Description",
+  field: "input"
+}, {
+  accessorKey: "notes",
+  header: "Notes",
+  field: "input"
+}];
+const TextFieldStory = () => {
+  const [data, setData] = React.useState(textFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Text Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: textFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Text field type table"
+    })]
+  });
+};
+const TextField = {
+  render: () => /* @__PURE__ */jsx(TextFieldStory, {})
+};
+const TextFieldReadOnly = {
+  args: {
+    data: textFieldData,
+    columns: textFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const numberFieldData = [{
+  id: 1,
+  quantity: 10,
+  price: 99.99,
+  weight: 2.5
+}, {
+  id: 2,
+  quantity: 25,
+  price: 149.99,
+  weight: 5
+}, {
+  id: 3,
+  quantity: 100,
+  price: 9.99,
+  weight: 0.1
+}];
+const numberFieldColumns = [{
+  accessorKey: "quantity",
+  header: "Quantity",
+  field: "stepper",
+  fieldProps: {
+    min: 0
+  }
+}, {
+  accessorKey: "price",
+  header: "Price",
+  field: "stepper",
+  fieldProps: {
+    min: 0,
+    step: 0.01
+  }
+}, {
+  accessorKey: "weight",
+  header: "Weight (kg)",
+  field: "stepper",
+  fieldProps: {
+    min: 0
+  }
+}];
+const NumberFieldStory = () => {
+  const [data, setData] = React.useState(numberFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Number Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: numberFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Number field type table"
+    })]
+  });
+};
+const NumberField = {
+  render: () => /* @__PURE__ */jsx(NumberFieldStory, {})
+};
+const NumberFieldReadOnly = {
+  args: {
+    data: numberFieldData,
+    columns: numberFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const selectFieldData = [{
+  id: 1,
+  category: "electronics",
+  priority: "high",
+  status: "active"
+}, {
+  id: 2,
+  category: "clothing",
+  priority: "medium",
+  status: "pending"
+}, {
+  id: 3,
+  category: "food",
+  priority: "low",
+  status: "inactive"
+}];
+const selectFieldColumns = [{
+  accessorKey: "category",
+  header: "Category",
+  field: "select",
+  fieldProps: {
+    options: [{
+      label: "Electronics",
+      value: "electronics"
+    }, {
+      label: "Clothing",
+      value: "clothing"
+    }, {
+      label: "Food",
+      value: "food"
+    }]
+  }
+}, {
+  accessorKey: "priority",
+  header: "Priority",
+  field: "select",
+  fieldProps: {
+    options: [{
+      label: "High",
+      value: "high"
+    }, {
+      label: "Medium",
+      value: "medium"
+    }, {
+      label: "Low",
+      value: "low"
+    }]
+  }
+}, {
+  accessorKey: "status",
+  header: "Status",
+  field: "select",
+  fieldProps: {
+    options: [{
+      label: "Active",
+      value: "active"
+    }, {
+      label: "Pending",
+      value: "pending"
+    }, {
+      label: "Inactive",
+      value: "inactive"
+    }]
+  }
+}];
+const SelectFieldStory = () => {
+  const [data, setData] = React.useState(selectFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Select Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: selectFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Select field type table"
+    })]
+  });
+};
+const SelectField = {
+  render: () => /* @__PURE__ */jsx(SelectFieldStory, {})
+};
+const SelectFieldReadOnly = {
+  args: {
+    data: selectFieldData,
+    columns: selectFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const checkboxFieldData = [{
+  id: 1,
+  isActive: true,
+  isVerified: true,
+  hasSubscription: false
+}, {
+  id: 2,
+  isActive: false,
+  isVerified: true,
+  hasSubscription: true
+}, {
+  id: 3,
+  isActive: true,
+  isVerified: false,
+  hasSubscription: true
+}];
+const checkboxFieldColumns = [{
+  accessorKey: "isActive",
+  header: "Active",
+  field: "checkbox"
+}, {
+  accessorKey: "isVerified",
+  header: "Verified",
+  field: "checkbox"
+}, {
+  accessorKey: "hasSubscription",
+  header: "Subscription",
+  field: "checkbox"
+}];
+const CheckboxFieldStory = () => {
+  const [data, setData] = React.useState(checkboxFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Checkbox Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: checkboxFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Checkbox field type table"
+    })]
+  });
+};
+const CheckboxField = {
+  render: () => /* @__PURE__ */jsx(CheckboxFieldStory, {})
+};
+const CheckboxFieldReadOnly = {
+  args: {
+    data: checkboxFieldData,
+    columns: checkboxFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const switchFieldData = [{
+  id: 1,
+  enabled: true,
+  notifications: false,
+  darkMode: true
+}, {
+  id: 2,
+  enabled: false,
+  notifications: true,
+  darkMode: false
+}, {
+  id: 3,
+  enabled: true,
+  notifications: true,
+  darkMode: true
+}];
+const switchFieldColumns = [{
+  accessorKey: "enabled",
+  header: "Enabled",
+  field: "switch"
+}, {
+  accessorKey: "notifications",
+  header: "Notifications",
+  field: "switch"
+}, {
+  accessorKey: "darkMode",
+  header: "Dark Mode",
+  field: "switch"
+}];
+const SwitchFieldStory = () => {
+  const [data, setData] = React.useState(switchFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Switch Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: switchFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Switch field type table"
+    })]
+  });
+};
+const SwitchField = {
+  render: () => /* @__PURE__ */jsx(SwitchFieldStory, {})
+};
+const SwitchFieldReadOnly = {
+  args: {
+    data: switchFieldData,
+    columns: switchFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const dateTimeFieldData = [{
+  id: 1,
+  date: "2024-03-15",
+  datetime: "2024-03-15 14:30",
+  time: "14:30"
+}, {
+  id: 2,
+  date: "2024-06-20",
+  datetime: "2024-06-20 09:00",
+  time: "09:00"
+}, {
+  id: 3,
+  date: "2024-12-25",
+  datetime: "2024-12-25 00:00",
+  time: "00:00"
+}];
+const dateTimeFieldColumns = [{
+  accessorKey: "date",
+  header: "Date",
+  field: "datepicker"
+}, {
+  accessorKey: "datetime",
+  header: "DateTime",
+  field: "datetimepicker"
+}, {
+  accessorKey: "time",
+  header: "Time",
+  field: "timepicker"
+}];
+const DateTimeFieldStory = () => {
+  const [data, setData] = React.useState(dateTimeFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Date/Time Field Types"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: dateTimeFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Date time field types table"
+    })]
+  });
+};
+const DateTimeField = {
+  render: () => /* @__PURE__ */jsx(DateTimeFieldStory, {})
+};
+const DateTimeFieldReadOnly = {
+  args: {
+    data: dateTimeFieldData,
+    columns: dateTimeFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const durationFieldData = [{
+  id: 1,
+  taskDuration: 3600,
+  breakTime: 900,
+  totalTime: 4500
+}, {
+  id: 2,
+  taskDuration: 7200,
+  breakTime: 1800,
+  totalTime: 9e3
+}, {
+  id: 3,
+  taskDuration: 1800,
+  breakTime: 300,
+  totalTime: 2100
+}];
+const durationFieldColumns = [{
+  accessorKey: "taskDuration",
+  header: "Task Duration (s)",
+  field: "duration"
+}, {
+  accessorKey: "breakTime",
+  header: "Break Time (s)",
+  field: "duration"
+}, {
+  accessorKey: "totalTime",
+  header: "Total Time (s)",
+  field: "duration"
+}];
+const DurationFieldStory = () => {
+  const [data, setData] = React.useState(durationFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Duration Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: durationFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Duration field type table"
+    })]
+  });
+};
+const DurationField = {
+  render: () => /* @__PURE__ */jsx(DurationFieldStory, {})
+};
+const DurationFieldReadOnly = {
+  args: {
+    data: durationFieldData,
+    columns: durationFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const colorFieldData = [{
+  id: 1,
+  primaryColor: "#FF5733",
+  secondaryColor: "#33FF57",
+  accentColor: "#3357FF"
+}, {
+  id: 2,
+  primaryColor: "#E91E63",
+  secondaryColor: "#9C27B0",
+  accentColor: "#673AB7"
+}, {
+  id: 3,
+  primaryColor: "#00BCD4",
+  secondaryColor: "#009688",
+  accentColor: "#4CAF50"
+}];
+const colorFieldColumns = [{
+  accessorKey: "primaryColor",
+  header: "Primary Color",
+  field: "colorpicker"
+}, {
+  accessorKey: "secondaryColor",
+  header: "Secondary Color",
+  field: "colorpicker"
+}, {
+  accessorKey: "accentColor",
+  header: "Accent Color",
+  field: "colorpicker"
+}];
+const ColorFieldStory = () => {
+  const [data, setData] = React.useState(colorFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Color Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: colorFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Color field type table"
+    })]
+  });
+};
+const ColorField = {
+  render: () => /* @__PURE__ */jsx(ColorFieldStory, {})
+};
+const ColorFieldReadOnly = {
+  args: {
+    data: colorFieldData,
+    columns: colorFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const ratingFieldData = [{
+  id: 1,
+  productRating: 5,
+  serviceRating: 4,
+  overallRating: 5
+}, {
+  id: 2,
+  productRating: 3,
+  serviceRating: 5,
+  overallRating: 4
+}, {
+  id: 3,
+  productRating: 4,
+  serviceRating: 3,
+  overallRating: 3
+}];
+const ratingFieldColumns = [{
+  accessorKey: "productRating",
+  header: "Product",
+  field: "rating"
+}, {
+  accessorKey: "serviceRating",
+  header: "Service",
+  field: "rating"
+}, {
+  accessorKey: "overallRating",
+  header: "Overall",
+  field: "rating"
+}];
+const RatingFieldStory = () => {
+  const [data, setData] = React.useState(ratingFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Rating Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: ratingFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Rating field type table"
+    })]
+  });
+};
+const RatingField = {
+  render: () => /* @__PURE__ */jsx(RatingFieldStory, {})
+};
+const RatingFieldReadOnly = {
+  args: {
+    data: ratingFieldData,
+    columns: ratingFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const phoneFieldData = [{
+  id: 1,
+  mobile: "+1234567890",
+  work: "+0987654321",
+  home: "+1111111111"
+}, {
+  id: 2,
+  mobile: "+4455667788",
+  work: "+9988776655",
+  home: "+2233445566"
+}, {
+  id: 3,
+  mobile: "+1122334455",
+  work: "+6677889900",
+  home: "+3344556677"
+}];
+const phoneFieldColumns = [{
+  accessorKey: "mobile",
+  header: "Mobile",
+  field: "phoneinput"
+}, {
+  accessorKey: "work",
+  header: "Work",
+  field: "phoneinput"
+}, {
+  accessorKey: "home",
+  header: "Home",
+  field: "phoneinput"
+}];
+const PhoneFieldStory = () => {
+  const [data, setData] = React.useState(phoneFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Phone Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: phoneFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Phone field type table"
+    })]
+  });
+};
+const PhoneField = {
+  render: () => /* @__PURE__ */jsx(PhoneFieldStory, {})
+};
+const PhoneFieldReadOnly = {
+  args: {
+    data: phoneFieldData,
+    columns: phoneFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const currencyFieldData = [{
+  id: 1,
+  priceUSD: 99.99,
+  priceEUR: 89.99,
+  priceGBP: 79.99
+}, {
+  id: 2,
+  priceUSD: 199.5,
+  priceEUR: 179.5,
+  priceGBP: 159.5
+}, {
+  id: 3,
+  priceUSD: 49,
+  priceEUR: 44,
+  priceGBP: 39
+}];
+const currencyFieldColumns = [{
+  accessorKey: "priceUSD",
+  header: "Price (USD)",
+  field: "stepper",
+  fieldProps: {
+    currency: "$"
+  }
+}, {
+  accessorKey: "priceEUR",
+  header: "Price (EUR)",
+  field: "stepper",
+  fieldProps: {
+    currency: "\u20AC"
+  }
+}, {
+  accessorKey: "priceGBP",
+  header: "Price (GBP)",
+  field: "stepper",
+  fieldProps: {
+    currency: "\xA3"
+  }
+}];
+const CurrencyFieldStory = () => {
+  const [data, setData] = React.useState(currencyFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Currency Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: currencyFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Currency field type table"
+    })]
+  });
+};
+const CurrencyField = {
+  render: () => /* @__PURE__ */jsx(CurrencyFieldStory, {})
+};
+const CurrencyFieldReadOnly = {
+  args: {
+    data: currencyFieldData,
+    columns: currencyFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const percentFieldData = [{
+  id: 1,
+  progress: 75,
+  completion: 100,
+  discount: 10
+}, {
+  id: 2,
+  progress: 50,
+  completion: 80,
+  discount: 25
+}, {
+  id: 3,
+  progress: 25,
+  completion: 60,
+  discount: 5
+}];
+const percentFieldColumns = [{
+  accessorKey: "progress",
+  header: "Progress",
+  field: "stepper"
+}, {
+  accessorKey: "completion",
+  header: "Completion",
+  field: "stepper"
+}, {
+  accessorKey: "discount",
+  header: "Discount",
+  field: "stepper"
+}];
+const PercentFieldStory = () => {
+  const [data, setData] = React.useState(percentFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Percent Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: percentFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Percent field type table"
+    })]
+  });
+};
+const PercentField = {
+  render: () => /* @__PURE__ */jsx(PercentFieldStory, {})
+};
+const PercentFieldReadOnly = {
+  args: {
+    data: percentFieldData,
+    columns: percentFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const countryOptions = [{
+  label: "United States",
+  value: "us"
+}, {
+  label: "United Kingdom",
+  value: "uk"
+}, {
+  label: "Germany",
+  value: "de"
+}, {
+  label: "France",
+  value: "fr"
+}, {
+  label: "Japan",
+  value: "jp"
+}];
+const cityOptions = [{
+  label: "New York",
+  value: "nyc"
+}, {
+  label: "London",
+  value: "london"
+}, {
+  label: "Berlin",
+  value: "berlin"
+}, {
+  label: "Paris",
+  value: "paris"
+}, {
+  label: "Tokyo",
+  value: "tokyo"
+}];
+const languageOptions = [{
+  label: "English",
+  value: "en"
+}, {
+  label: "German",
+  value: "de"
+}, {
+  label: "French",
+  value: "fr"
+}, {
+  label: "Japanese",
+  value: "ja"
+}, {
+  label: "Spanish",
+  value: "es"
+}];
+const comboboxFieldData = [{
+  id: 1,
+  country: "us",
+  city: "nyc",
+  language: "en"
+}, {
+  id: 2,
+  country: "uk",
+  city: "london",
+  language: "en"
+}, {
+  id: 3,
+  country: "de",
+  city: "berlin",
+  language: "de"
+}];
+const comboboxFieldColumns = [{
+  accessorKey: "country",
+  header: "Country",
+  field: "combobox",
+  fieldProps: {
+    options: countryOptions
+  }
+}, {
+  accessorKey: "city",
+  header: "City",
+  field: "combobox",
+  fieldProps: {
+    options: cityOptions
+  }
+}, {
+  accessorKey: "language",
+  header: "Language",
+  field: "combobox",
+  fieldProps: {
+    options: languageOptions
+  }
+}];
+const ComboboxFieldStory = () => {
+  const [data, setData] = React.useState(comboboxFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Combobox Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: comboboxFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Combobox field type table"
+    })]
+  });
+};
+const ComboboxField = {
+  render: () => /* @__PURE__ */jsx(ComboboxFieldStory, {})
+};
+const ComboboxFieldReadOnly = {
+  args: {
+    data: comboboxFieldData,
+    columns: comboboxFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const customerOptions = [{
+  label: "CUST-001: John Doe",
+  value: "CUST-001"
+}, {
+  label: "CUST-002: Jane Smith",
+  value: "CUST-002"
+}, {
+  label: "CUST-003: Bob Johnson",
+  value: "CUST-003"
+}];
+const productOptions = [{
+  label: "PROD-001: Widget A",
+  value: "PROD-001"
+}, {
+  label: "PROD-002: Widget B",
+  value: "PROD-002"
+}, {
+  label: "PROD-003: Widget C",
+  value: "PROD-003"
+}];
+const orderOptions = [{
+  label: "ORD-001",
+  value: "ORD-001"
+}, {
+  label: "ORD-002",
+  value: "ORD-002"
+}, {
+  label: "ORD-003",
+  value: "ORD-003"
+}];
+const linkFieldData = [{
+  id: 1,
+  customer: "CUST-001",
+  product: "PROD-001",
+  order: "ORD-001"
+}, {
+  id: 2,
+  customer: "CUST-002",
+  product: "PROD-002",
+  order: "ORD-002"
+}, {
+  id: 3,
+  customer: "CUST-003",
+  product: "PROD-003",
+  order: "ORD-003"
+}];
+const linkFieldColumns = [{
+  accessorKey: "customer",
+  header: "Customer",
+  field: "combobox",
+  fieldProps: {
+    options: customerOptions
+  }
+}, {
+  accessorKey: "product",
+  header: "Product",
+  field: "combobox",
+  fieldProps: {
+    options: productOptions
+  }
+}, {
+  accessorKey: "order",
+  header: "Order",
+  field: "combobox",
+  fieldProps: {
+    options: orderOptions
+  }
+}];
+const LinkFieldStory = () => {
+  const [data, setData] = React.useState(linkFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Link Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: linkFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Link field type table"
+    })]
+  });
+};
+const LinkField = {
+  render: () => /* @__PURE__ */jsx(LinkFieldStory, {})
+};
+const LinkFieldReadOnly = {
+  args: {
+    data: linkFieldData,
+    columns: linkFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const customFieldData = [{
+  id: 1,
+  customRender: {
+    name: "John",
+    role: "Admin"
+  },
+  customBadge: "premium"
+}, {
+  id: 2,
+  customRender: {
+    name: "Jane",
+    role: "User"
+  },
+  customBadge: "standard"
+}, {
+  id: 3,
+  customRender: {
+    name: "Bob",
+    role: "Guest"
+  },
+  customBadge: "trial"
+}];
+const customFieldColumns = [{
+  accessorKey: "customRender",
+  header: "Custom User",
+  field: "custom",
+  fieldProps: {
+    render: value => /* @__PURE__ */jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: "$2",
+      children: [/* @__PURE__ */jsx(View, {
+        backgroundColor: "$blue5",
+        padding: "$1",
+        borderRadius: "$2",
+        children: /* @__PURE__ */jsx(Text, {
+          fontSize: "$2",
+          color: "$blue11",
+          children: value?.role || "N/A"
+        })
+      }), /* @__PURE__ */jsx(Text, {
+        children: value?.name || "Unknown"
+      })]
+    })
+  }
+}, {
+  accessorKey: "customBadge",
+  header: "Badge",
+  field: "custom",
+  fieldProps: {
+    render: (value, _row, onChange) => /* @__PURE__ */jsx(View, {
+      flexDirection: "row",
+      gap: "$1",
+      children: ["premium", "standard", "trial"].map(badge => /* @__PURE__ */jsx(View, {
+        backgroundColor: value === badge ? "$green5" : "$gray3",
+        padding: "$1",
+        borderRadius: "$2",
+        onPress: () => onChange(badge),
+        cursor: "pointer",
+        children: /* @__PURE__ */jsx(Text, {
+          fontSize: "$2",
+          color: value === badge ? "$green11" : "$gray11",
+          children: badge
+        })
+      }, badge))
+    })
+  }
+}];
+const CustomFieldStory = () => {
+  const [data, setData] = React.useState(customFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Custom Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: customFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Custom field type table"
+    })]
+  });
+};
+const CustomField = {
+  render: () => /* @__PURE__ */jsx(CustomFieldStory, {})
+};
+const searchableData = [{
+  id: 1,
+  name: "John Doe",
+  email: "john@example.com",
+  department: "Engineering"
+}, {
+  id: 2,
+  name: "Jane Smith",
+  email: "jane@example.com",
+  department: "Marketing"
+}, {
+  id: 3,
+  name: "Bob Johnson",
+  email: "bob@example.com",
+  department: "Sales"
+}, {
+  id: 4,
+  name: "Alice Williams",
+  email: "alice@example.com",
+  department: "HR"
+}, {
+  id: 5,
+  name: "Charlie Brown",
+  email: "charlie@example.com",
+  department: "Finance"
+}];
+const searchableColumns = [{
+  accessorKey: "id",
+  header: "ID",
+  field: "stepper"
+}, {
+  accessorKey: "name",
+  header: "Name",
+  field: "input"
+}, {
+  accessorKey: "email",
+  header: "Email",
+  field: "input"
+}, {
+  accessorKey: "department",
+  header: "Department",
+  field: "select",
+  fieldProps: {
+    options: [{
+      label: "Engineering",
+      value: "Engineering"
+    }, {
+      label: "Marketing",
+      value: "Marketing"
+    }, {
+      label: "Sales",
+      value: "Sales"
+    }, {
+      label: "HR",
+      value: "HR"
+    }, {
+      label: "Finance",
+      value: "Finance"
+    }]
+  }
+}];
+const GlobalSearchStory = () => {
+  const [data] = React.useState(searchableData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsxs(YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */jsx(Text, {
+        fontSize: "$5",
+        fontWeight: "bold",
+        children: "Global Search"
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$3",
+        color: "$gray11",
+        children: "Search across all visible columns"
+      })]
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: searchableColumns,
+      enableGlobalSearch: true,
+      enableFiltering: true,
+      enableSorting: true,
+      showRowNumbers: true,
+      "aria-label": "Global search table"
+    })]
+  });
+};
+const GlobalSearch = {
+  render: () => /* @__PURE__ */jsx(GlobalSearchStory, {})
+};
+const ServerSideSearchStory = () => {
+  const [data, setData] = React.useState(searchableData);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const handleSearch = React.useCallback(searchTerm => {
+    setIsLoading(true);
+    setTimeout(() => {
+      if (!searchTerm) {
+        setData(searchableData);
+      } else {
+        const filtered = searchableData.filter(row => row.name.toLowerCase().includes(searchTerm.toLowerCase()) || row.email.toLowerCase().includes(searchTerm.toLowerCase()) || row.department.toLowerCase().includes(searchTerm.toLowerCase()));
+        setData(filtered);
+      }
+      setIsLoading(false);
+    }, 500);
+  }, []);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsxs(YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */jsx(Text, {
+        fontSize: "$5",
+        fontWeight: "bold",
+        children: "Server-Side Search (Simulated)"
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$3",
+        color: "$gray11",
+        children: "Search triggers server callback with debouncing"
+      })]
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: searchableColumns,
+      enableGlobalSearch: true,
+      manualFiltering: true,
+      renderToolbar: props => /* @__PURE__ */jsx(DataTableToolbar, {
+        ...props,
+        onGlobalFilterChange: value => {
+          props.onGlobalFilterChange(value);
+          handleSearch(value);
+        }
+      }),
+      initialState: {
+        isLoading
+      },
+      showRowNumbers: true,
+      "aria-label": "Server-side search table"
+    })]
+  });
+};
+const ServerSideSearch = {
+  render: () => /* @__PURE__ */jsx(ServerSideSearchStory, {})
+};
+const textareaFieldData = [{
+  id: 1,
+  description: "This is a longer description that spans multiple lines.",
+  notes: "Important notes here",
+  comments: "User feedback"
+}, {
+  id: 2,
+  description: "Another description with more details about the item.",
+  notes: "Additional notes",
+  comments: "More comments"
+}];
+const textareaFieldColumns = [{
+  accessorKey: "description",
+  header: "Description",
+  field: "textarea"
+}, {
+  accessorKey: "notes",
+  header: "Notes",
+  field: "textarea"
+}, {
+  accessorKey: "comments",
+  header: "Comments",
+  field: "textarea"
+}];
+const TextareaFieldStory = () => {
+  const [data, setData] = React.useState(textareaFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Textarea Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: textareaFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Textarea field type table"
+    })]
+  });
+};
+const TextareaField = {
+  render: () => /* @__PURE__ */jsx(TextareaFieldStory, {})
+};
+const TextareaFieldReadOnly = {
+  args: {
+    data: textareaFieldData,
+    columns: textareaFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const signatureFieldData = [{
+  id: 1,
+  customerSignature: "sig_data_1",
+  managerSignature: null,
+  witnessSignature: "sig_data_3"
+}, {
+  id: 2,
+  customerSignature: null,
+  managerSignature: "sig_data_2",
+  witnessSignature: null
+}, {
+  id: 3,
+  customerSignature: "sig_data_4",
+  managerSignature: "sig_data_5",
+  witnessSignature: "sig_data_6"
+}];
+const signatureFieldColumns = [{
+  accessorKey: "customerSignature",
+  header: "Customer",
+  field: "signature"
+}, {
+  accessorKey: "managerSignature",
+  header: "Manager",
+  field: "signature"
+}, {
+  accessorKey: "witnessSignature",
+  header: "Witness",
+  field: "signature"
+}];
+const SignatureFieldStory = () => {
+  const [data, setData] = React.useState(signatureFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Signature Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: signatureFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Signature field type table"
+    })]
+  });
+};
+const SignatureField = {
+  render: () => /* @__PURE__ */jsx(SignatureFieldStory, {})
+};
+const SignatureFieldReadOnly = {
+  args: {
+    data: signatureFieldData,
+    columns: signatureFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const fileFieldData = [{
+  id: 1,
+  document: "report_2024.pdf",
+  attachment: null,
+  report: "analysis.docx"
+}, {
+  id: 2,
+  document: null,
+  attachment: "invoice.pdf",
+  report: null
+}, {
+  id: 3,
+  document: "contract.pdf",
+  attachment: "receipt.jpg",
+  report: "summary.xlsx"
+}];
+const fileFieldColumns = [{
+  accessorKey: "document",
+  header: "Document",
+  field: "fileupload"
+}, {
+  accessorKey: "attachment",
+  header: "Attachment",
+  field: "fileupload"
+}, {
+  accessorKey: "report",
+  header: "Report",
+  field: "fileupload"
+}];
+const FileFieldStory = () => {
+  const [data, setData] = React.useState(fileFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "File Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: fileFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "File field type table"
+    })]
+  });
+};
+const FileField = {
+  render: () => /* @__PURE__ */jsx(FileFieldStory, {})
+};
+const FileFieldReadOnly = {
+  args: {
+    data: fileFieldData,
+    columns: fileFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const imageFieldData = [{
+  id: 1,
+  avatar: "user1.jpg",
+  productImage: "product1.png",
+  thumbnail: null
+}, {
+  id: 2,
+  avatar: null,
+  productImage: "product2.png",
+  thumbnail: "thumb2.jpg"
+}, {
+  id: 3,
+  avatar: "user3.jpg",
+  productImage: null,
+  thumbnail: "thumb3.jpg"
+}];
+const imageFieldColumns = [{
+  accessorKey: "avatar",
+  header: "Avatar",
+  field: "image"
+}, {
+  accessorKey: "productImage",
+  header: "Product Image",
+  field: "image"
+}, {
+  accessorKey: "thumbnail",
+  header: "Thumbnail",
+  field: "image"
+}];
+const ImageFieldStory = () => {
+  const [data, setData] = React.useState(imageFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Image Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: imageFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Image field type table"
+    })]
+  });
+};
+const ImageField = {
+  render: () => /* @__PURE__ */jsx(ImageFieldStory, {})
+};
+const ImageFieldReadOnly = {
+  args: {
+    data: imageFieldData,
+    columns: imageFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const geolocationFieldData = [{
+  id: 1,
+  storeLocation: {
+    lat: 40.7128,
+    lng: -74.006
+  },
+  deliveryAddress: "123 Main St, NYC",
+  pickupPoint: null
+}, {
+  id: 2,
+  storeLocation: null,
+  deliveryAddress: null,
+  pickupPoint: {
+    lat: 34.0522,
+    lng: -118.2437
+  }
+}, {
+  id: 3,
+  storeLocation: {
+    lat: 51.5074,
+    lng: -0.1278
+  },
+  deliveryAddress: "456 High St, London",
+  pickupPoint: {
+    lat: 48.8566,
+    lng: 2.3522
+  }
+}];
+const geolocationFieldColumns = [{
+  accessorKey: "storeLocation",
+  header: "Store Location",
+  field: "geolocation"
+}, {
+  accessorKey: "deliveryAddress",
+  header: "Delivery Address",
+  field: "geolocation"
+}, {
+  accessorKey: "pickupPoint",
+  header: "Pickup Point",
+  field: "geolocation"
+}];
+const GeolocationFieldStory = () => {
+  const [data, setData] = React.useState(geolocationFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Geolocation Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: geolocationFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Geolocation field type table"
+    })]
+  });
+};
+const GeolocationField = {
+  render: () => /* @__PURE__ */jsx(GeolocationFieldStory, {})
+};
+const GeolocationFieldReadOnly = {
+  args: {
+    data: geolocationFieldData,
+    columns: geolocationFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const barcodeFieldData = [{
+  id: 1,
+  sku: "SKU-001234",
+  upc: "012345678901",
+  serialNumber: "SN-ABC123"
+}, {
+  id: 2,
+  sku: "SKU-005678",
+  upc: "098765432109",
+  serialNumber: "SN-DEF456"
+}, {
+  id: 3,
+  sku: "SKU-009012",
+  upc: "111222333444",
+  serialNumber: "SN-GHI789"
+}];
+const barcodeFieldColumns = [{
+  accessorKey: "sku",
+  header: "SKU",
+  field: "barcode"
+}, {
+  accessorKey: "upc",
+  header: "UPC",
+  field: "barcode"
+}, {
+  accessorKey: "serialNumber",
+  header: "Serial Number",
+  field: "barcode"
+}];
+const BarcodeFieldStory = () => {
+  const [data, setData] = React.useState(barcodeFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Barcode Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: barcodeFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Barcode field type table"
+    })]
+  });
+};
+const BarcodeField = {
+  render: () => /* @__PURE__ */jsx(BarcodeFieldStory, {})
+};
+const BarcodeFieldReadOnly = {
+  args: {
+    data: barcodeFieldData,
+    columns: barcodeFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const sliderFieldData = [{
+  id: 1,
+  volume: 75,
+  brightness: 100,
+  opacity: 50
+}, {
+  id: 2,
+  volume: 30,
+  brightness: 60,
+  opacity: 80
+}, {
+  id: 3,
+  volume: 100,
+  brightness: 25,
+  opacity: 100
+}];
+const sliderFieldColumns = [{
+  accessorKey: "volume",
+  header: "Volume",
+  field: "slider",
+  fieldProps: {
+    max: 100
+  }
+}, {
+  accessorKey: "brightness",
+  header: "Brightness",
+  field: "slider",
+  fieldProps: {
+    max: 100
+  }
+}, {
+  accessorKey: "opacity",
+  header: "Opacity",
+  field: "slider",
+  fieldProps: {
+    max: 100
+  }
+}];
+const SliderFieldStory = () => {
+  const [data, setData] = React.useState(sliderFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Slider Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: sliderFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Slider field type table"
+    })]
+  });
+};
+const SliderField = {
+  render: () => /* @__PURE__ */jsx(SliderFieldStory, {})
+};
+const SliderFieldReadOnly = {
+  args: {
+    data: sliderFieldData,
+    columns: sliderFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const progressFieldData = [{
+  id: 1,
+  taskProgress: 75,
+  downloadProgress: 100,
+  completionRate: 50
+}, {
+  id: 2,
+  taskProgress: 30,
+  downloadProgress: 60,
+  completionRate: 80
+}, {
+  id: 3,
+  taskProgress: 100,
+  downloadProgress: 25,
+  completionRate: 100
+}];
+const progressFieldColumns = [{
+  accessorKey: "taskProgress",
+  header: "Task Progress",
+  field: "progress"
+}, {
+  accessorKey: "downloadProgress",
+  header: "Download",
+  field: "progress"
+}, {
+  accessorKey: "completionRate",
+  header: "Completion",
+  field: "progress"
+}];
+const ProgressFieldStory = () => {
+  const [data, setData] = React.useState(progressFieldData);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    flex: 1,
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$5",
+      fontWeight: "bold",
+      children: "Progress Field Type"
+    }), /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns: progressFieldColumns,
+      onDataChange: setData,
+      showRowNumbers: true,
+      "aria-label": "Progress field type table"
+    })]
+  });
+};
+const ProgressField = {
+  render: () => /* @__PURE__ */jsx(ProgressFieldStory, {})
+};
+const ProgressFieldReadOnly = {
+  args: {
+    data: progressFieldData,
+    columns: progressFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+const ColumnLayoutEqual = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    columnLayout: "equal",
+    enablePagination: true
+  }
+};
+const ColumnLayoutAuto = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    columnLayout: "auto",
+    enablePagination: true
+  }
+};
+const ScrollLayoutStory = () => {
+  const data = useMemo(() => generateUsers(20), []);
+  return /* @__PURE__ */jsx(View, {
+    padding: "$4",
+    children: /* @__PURE__ */jsx(DataTable, {
+      data,
+      columns,
+      columnLayout: "scroll",
+      enablePagination: true,
+      "aria-label": "Scroll layout table"
+    })
+  });
+};
+const ColumnLayoutScroll = {
+  render: () => /* @__PURE__ */jsx(ScrollLayoutStory, {})
+};
+export { Advanced, AllFieldTypesEditable, AllFieldTypesReadOnly, BarcodeField, BarcodeFieldReadOnly, Basic, CheckboxField, CheckboxFieldReadOnly, ColorField, ColorFieldReadOnly, ColumnLayoutAuto, ColumnLayoutEqual, ColumnLayoutScroll, ComboboxField, ComboboxFieldReadOnly, Compact, CurrencyField, CurrencyFieldReadOnly, CustomField, DateTimeField, DateTimeFieldReadOnly, DurationField, DurationFieldReadOnly, EditableTable, Empty, FileField, FileFieldReadOnly, FullFeatured, GeolocationField, GeolocationFieldReadOnly, GlobalSearch, ImageField, ImageFieldReadOnly, Large, LinkField, LinkFieldReadOnly, NumberField, NumberFieldReadOnly, PercentField, PercentFieldReadOnly, PhoneField, PhoneFieldReadOnly, ProgressField, ProgressFieldReadOnly, RatingField, RatingFieldReadOnly, ReadOnly, SelectField, SelectFieldReadOnly, ServerSideSearch, SignatureField, SignatureFieldReadOnly, Simple, SliderField, SliderFieldReadOnly, SwitchField, SwitchFieldReadOnly, TextField, TextFieldReadOnly, TextareaField, TextareaFieldReadOnly, WithColumnPinning, WithColumnResizing, WithFieldTypes, WithFiltering, WithKeyboardNavigation, WithPagination, WithRowExpansion, WithRowNumbers, WithSorting, WithVirtualization, DataTable_stories_default as default };
+//# sourceMappingURL=DataTable.stories.mjs.map