@multiplatform.one/table 6.0.0

package/dist/esm/components/DataTable/DataTable.stories.native.js

@@ -0,0 +1,2802 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.native.js";
+import { DataTable } from "./index.native.js";
+var 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: [function (Story) {
+    return /* @__PURE__ */_jsx(View, {
+      flex: 1,
+      padding: "$4",
+      width: "100%",
+      children: /* @__PURE__ */_jsx(Story, {})
+    });
+  }]
+};
+var DataTable_stories_default = meta;
+var generateUsers = function generateUsers2(count) {
+  var departments = ["Engineering", "Marketing", "Sales", "HR", "Finance"];
+  var roles = ["Developer", "Manager", "Analyst", "Designer", "Coordinator"];
+  var statuses = ["active", "inactive", "pending"];
+  return Array.from({
+    length: count
+  }, function (_, i) {
+    return {
+      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]
+    };
+  });
+};
+var columnHelper = createColumnHelper();
+var columns = [
+// Avatar Column
+columnHelper.accessor("avatar", {
+  header: "Avatar",
+  cell: function cell(info) {
+    return /* @__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(function (row) {
+  return `${row.firstName} ${row.lastName}`;
+}, {
+  id: "fullName",
+  header: "Full Name",
+  cell: function cell2(info) {
+    var 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: function filterFn(row, _id, value) {
+    var fullName = `${row.original.firstName} ${row.original.lastName}`.toLowerCase();
+    return fullName.includes(value.toLowerCase());
+  }
+}),
+// Age Column
+columnHelper.accessor("age", {
+  header: "Age",
+  cell: function cell3(info) {
+    return /* @__PURE__ */_jsx(Text, {
+      children: info.getValue()
+    });
+  },
+  filterFn: "inNumberRange"
+}),
+// Department Column
+columnHelper.accessor("department", {
+  header: "Department",
+  cell: function cell4(info) {
+    return /* @__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: function cell5(info) {
+    return /* @__PURE__ */_jsx(Text, {
+      children: info.getValue()
+    });
+  }
+}),
+// Salary Column
+columnHelper.accessor("salary", {
+  header: "Salary",
+  cell: function cell6(info) {
+    return /* @__PURE__ */_jsxs(Text, {
+      children: ["$", info.getValue().toLocaleString()]
+    });
+  },
+  filterFn: "inNumberRange"
+}),
+// Status Column
+columnHelper.accessor("status", {
+  header: "Status",
+  cell: function cell7(info) {
+    var 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: function cell8(info) {
+    return /* @__PURE__ */_jsx(Text, {
+      children: new Date(info.getValue()).toLocaleDateString()
+    });
+  },
+  filterFn: "includesString"
+}),
+// Last Login Column
+columnHelper.accessor("lastLogin", {
+  header: "Last Login",
+  cell: function cell9(info) {
+    return /* @__PURE__ */_jsx(Text, {
+      children: new Date(info.getValue()).toLocaleDateString()
+    });
+  },
+  filterFn: "includesString"
+}),
+// Actions Column
+columnHelper.display({
+  id: "actions",
+  header: "Actions",
+  cell: function cell10(_info) {
+    return /* @__PURE__ */_jsx(Button, {
+      size: "$2",
+      variant: "outlined",
+      children: "Edit"
+    });
+  },
+  enableSorting: false,
+  enableColumnFilter: false
+})];
+var 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"
+}];
+var AdvancedTableStory = function AdvancedTableStory2() {
+  var data = useMemo(function () {
+    return generateUsers(1e3);
+  }, []);
+  var columnsWithCounts = useMemo(function () {
+    return availableColumns.map(function (column) {
+      if (column.options) {
+        var counts = column.options.map(function (option) {
+          var count = data.filter(function (item) {
+            var 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: function renderToolbar(props) {
+          return /* @__PURE__ */_jsx(DataTableToolbar, {
+            ...props,
+            customActions: /* @__PURE__ */_jsx(Button, {
+              size: "$3",
+              variant: "outlined",
+              children: "Export CSV"
+            })
+          });
+        },
+        renderFilters: function renderFilters(props) {
+          return /* @__PURE__ */_jsx(DataTableFilters, {
+            ...props,
+            availableColumns: columnsWithCounts,
+            maxFilters: 5
+          });
+        },
+        renderPagination: function renderPagination(props) {
+          return /* @__PURE__ */_jsx(DataTablePagination, {
+            ...props,
+            compact: true
+          });
+        },
+        size: "md",
+        "aria-label": "User management table"
+      })]
+    })
+  });
+};
+var SimpleTableStory = function SimpleTableStory2() {
+  var data = useMemo(function () {
+    return generateUsers(50);
+  }, []);
+  var 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"
+    })
+  });
+};
+var 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"
+}];
+var personColumnHelper = createColumnHelper();
+var basicColumns = [personColumnHelper.accessor("id", {
+  header: "ID",
+  cell: function cell11(info) {
+    return info.getValue();
+  }
+}), personColumnHelper.accessor("firstName", {
+  header: "First Name",
+  cell: function cell12(info) {
+    return info.getValue();
+  }
+}), personColumnHelper.accessor("lastName", {
+  header: "Last Name",
+  cell: function cell13(info) {
+    return info.getValue();
+  }
+}), personColumnHelper.accessor("age", {
+  header: "Age",
+  cell: function cell14(info) {
+    return info.getValue();
+  }
+}), personColumnHelper.accessor("email", {
+  header: "Email",
+  cell: function cell15(info) {
+    return info.getValue();
+  }
+}), personColumnHelper.accessor("status", {
+  header: "Status",
+  cell: function cell16(info) {
+    var status = info.getValue();
+    return /* @__PURE__ */_jsx(Text, {
+      style: {
+        color: status === "active" ? "green" : "red",
+        fontWeight: "bold"
+      },
+      children: status
+    });
+  }
+})];
+var Advanced = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */_jsx(AdvancedTableStory, {});
+  }
+};
+var Simple = {
+  render: function render2() {
+    return /* @__PURE__ */_jsx(SimpleTableStory, {});
+  }
+};
+var Basic = {
+  args: {
+    data: sampleData,
+    columns: basicColumns
+  }
+};
+var WithPagination = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enablePagination: true,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 2
+      }
+    }
+  }
+};
+var WithSorting = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enableSorting: true
+  }
+};
+var WithFiltering = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enableFiltering: true
+  }
+};
+var FullFeatured = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enableFiltering: true,
+    enableSorting: true,
+    enablePagination: true,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 3
+      }
+    }
+  }
+};
+var Compact = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    size: "sm"
+  }
+};
+var Large = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    size: "lg"
+  }
+};
+var WithColumnResizing = {
+  args: {
+    data: sampleData,
+    columns: basicColumns.map(function (col) {
+      return {
+        ...col,
+        minSize: 80,
+        maxSize: 300
+      };
+    }),
+    enableColumnResizing: true
+  }
+};
+var largeData = Array.from({
+  length: 1e4
+}, function (_, i) {
+  return {
+    ...sampleData[i % sampleData.length],
+    id: i + 1,
+    firstName: `User${i + 1}`,
+    lastName: `Last${i + 1}`,
+    email: `user${i + 1}@example.com`
+  };
+});
+var WithVirtualization = {
+  args: {
+    data: largeData,
+    columns: basicColumns,
+    enableVirtualization: true,
+    virtualizationHeight: 400,
+    virtualizationOverscan: 5
+  }
+};
+var WithColumnPinning = {
+  args: {
+    data: sampleData,
+    columns: basicColumns.map(function (col) {
+      return {
+        ...col,
+        minSize: 80,
+        maxSize: 300
+      };
+    }),
+    enableColumnPinning: true,
+    maxPinnedColumns: 2,
+    enableColumnResizing: true
+  }
+};
+var WithKeyboardNavigation = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    enableKeyboardNavigation: true
+  }
+};
+var expandableData = sampleData.map(function (p, i) {
+  return {
+    ...p,
+    subRows: i < 2 ? [{
+      ...p,
+      id: -i - 1,
+      firstName: `Detail ${i}`
+    }] : void 0
+  };
+});
+var WithRowExpansion = {
+  args: {
+    data: expandableData,
+    columns: basicColumns,
+    enableRowExpansion: true,
+    renderSubComponent: function renderSubComponent(row) {
+      return /* @__PURE__ */_jsx(View, {
+        padding: "$4",
+        backgroundColor: "$color2",
+        children: /* @__PURE__ */_jsxs(Text, {
+          children: ["Expanded: ", row.original.firstName, " ", row.original.lastName]
+        })
+      });
+    }
+  }
+};
+var Empty = {
+  args: {
+    data: [],
+    columns: basicColumns
+  }
+};
+var ReadOnly = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var WithRowNumbers = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var 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
+}];
+var EditableTableStory = function EditableTableStory2() {
+  var [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
+      }
+    })
+  });
+};
+var EditableTable = {
+  render: function render3() {
+    return /* @__PURE__ */_jsx(EditableTableStory, {});
+  }
+};
+var WithFieldTypes = {
+  render: function render4() {
+    return /* @__PURE__ */_jsx(EditableTableStory, {});
+  }
+};
+var 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"
+}];
+var selectOptions = [{
+  label: "Option 1",
+  value: "option1"
+}, {
+  label: "Option 2",
+  value: "option2"
+}, {
+  label: "Option 3",
+  value: "option3"
+}];
+var comboboxOptions = [{
+  label: "Choice 1",
+  value: "choice1"
+}, {
+  label: "Choice 2",
+  value: "choice2"
+}, {
+  label: "Choice 3",
+  value: "choice3"
+}, {
+  label: "Choice 4",
+  value: "choice4"
+}];
+var linkOptions = [{
+  label: "Document 001",
+  value: "DOC-001"
+}, {
+  label: "Document 002",
+  value: "DOC-002"
+}, {
+  label: "Document 003",
+  value: "DOC-003"
+}];
+var 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..."
+  }
+}];
+var AllFieldTypesEditableStory = function AllFieldTypesEditableStory2() {
+  var [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"
+    })]
+  });
+};
+var AllFieldTypesEditable = {
+  render: function render5() {
+    return /* @__PURE__ */_jsx(AllFieldTypesEditableStory, {});
+  }
+};
+var AllFieldTypesReadOnlyStory = function AllFieldTypesReadOnlyStory2() {
+  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"
+    })]
+  });
+};
+var AllFieldTypesReadOnly = {
+  render: function render6() {
+    return /* @__PURE__ */_jsx(AllFieldTypesReadOnlyStory, {});
+  }
+};
+var 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"
+}];
+var textFieldColumns = [{
+  accessorKey: "title",
+  header: "Title",
+  field: "input"
+}, {
+  accessorKey: "description",
+  header: "Description",
+  field: "input"
+}, {
+  accessorKey: "notes",
+  header: "Notes",
+  field: "input"
+}];
+var TextFieldStory = function TextFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var TextField = {
+  render: function render7() {
+    return /* @__PURE__ */_jsx(TextFieldStory, {});
+  }
+};
+var TextFieldReadOnly = {
+  args: {
+    data: textFieldData,
+    columns: textFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var 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
+  }
+}];
+var NumberFieldStory = function NumberFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var NumberField = {
+  render: function render8() {
+    return /* @__PURE__ */_jsx(NumberFieldStory, {});
+  }
+};
+var NumberFieldReadOnly = {
+  args: {
+    data: numberFieldData,
+    columns: numberFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var 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"
+    }]
+  }
+}];
+var SelectFieldStory = function SelectFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var SelectField = {
+  render: function render9() {
+    return /* @__PURE__ */_jsx(SelectFieldStory, {});
+  }
+};
+var SelectFieldReadOnly = {
+  args: {
+    data: selectFieldData,
+    columns: selectFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var checkboxFieldColumns = [{
+  accessorKey: "isActive",
+  header: "Active",
+  field: "checkbox"
+}, {
+  accessorKey: "isVerified",
+  header: "Verified",
+  field: "checkbox"
+}, {
+  accessorKey: "hasSubscription",
+  header: "Subscription",
+  field: "checkbox"
+}];
+var CheckboxFieldStory = function CheckboxFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var CheckboxField = {
+  render: function render10() {
+    return /* @__PURE__ */_jsx(CheckboxFieldStory, {});
+  }
+};
+var CheckboxFieldReadOnly = {
+  args: {
+    data: checkboxFieldData,
+    columns: checkboxFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var switchFieldColumns = [{
+  accessorKey: "enabled",
+  header: "Enabled",
+  field: "switch"
+}, {
+  accessorKey: "notifications",
+  header: "Notifications",
+  field: "switch"
+}, {
+  accessorKey: "darkMode",
+  header: "Dark Mode",
+  field: "switch"
+}];
+var SwitchFieldStory = function SwitchFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var SwitchField = {
+  render: function render11() {
+    return /* @__PURE__ */_jsx(SwitchFieldStory, {});
+  }
+};
+var SwitchFieldReadOnly = {
+  args: {
+    data: switchFieldData,
+    columns: switchFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var dateTimeFieldColumns = [{
+  accessorKey: "date",
+  header: "Date",
+  field: "datepicker"
+}, {
+  accessorKey: "datetime",
+  header: "DateTime",
+  field: "datetimepicker"
+}, {
+  accessorKey: "time",
+  header: "Time",
+  field: "timepicker"
+}];
+var DateTimeFieldStory = function DateTimeFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var DateTimeField = {
+  render: function render12() {
+    return /* @__PURE__ */_jsx(DateTimeFieldStory, {});
+  }
+};
+var DateTimeFieldReadOnly = {
+  args: {
+    data: dateTimeFieldData,
+    columns: dateTimeFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var 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"
+}];
+var DurationFieldStory = function DurationFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var DurationField = {
+  render: function render13() {
+    return /* @__PURE__ */_jsx(DurationFieldStory, {});
+  }
+};
+var DurationFieldReadOnly = {
+  args: {
+    data: durationFieldData,
+    columns: durationFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var colorFieldColumns = [{
+  accessorKey: "primaryColor",
+  header: "Primary Color",
+  field: "colorpicker"
+}, {
+  accessorKey: "secondaryColor",
+  header: "Secondary Color",
+  field: "colorpicker"
+}, {
+  accessorKey: "accentColor",
+  header: "Accent Color",
+  field: "colorpicker"
+}];
+var ColorFieldStory = function ColorFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var ColorField = {
+  render: function render14() {
+    return /* @__PURE__ */_jsx(ColorFieldStory, {});
+  }
+};
+var ColorFieldReadOnly = {
+  args: {
+    data: colorFieldData,
+    columns: colorFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var ratingFieldColumns = [{
+  accessorKey: "productRating",
+  header: "Product",
+  field: "rating"
+}, {
+  accessorKey: "serviceRating",
+  header: "Service",
+  field: "rating"
+}, {
+  accessorKey: "overallRating",
+  header: "Overall",
+  field: "rating"
+}];
+var RatingFieldStory = function RatingFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var RatingField = {
+  render: function render15() {
+    return /* @__PURE__ */_jsx(RatingFieldStory, {});
+  }
+};
+var RatingFieldReadOnly = {
+  args: {
+    data: ratingFieldData,
+    columns: ratingFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var phoneFieldColumns = [{
+  accessorKey: "mobile",
+  header: "Mobile",
+  field: "phoneinput"
+}, {
+  accessorKey: "work",
+  header: "Work",
+  field: "phoneinput"
+}, {
+  accessorKey: "home",
+  header: "Home",
+  field: "phoneinput"
+}];
+var PhoneFieldStory = function PhoneFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var PhoneField = {
+  render: function render16() {
+    return /* @__PURE__ */_jsx(PhoneFieldStory, {});
+  }
+};
+var PhoneFieldReadOnly = {
+  args: {
+    data: phoneFieldData,
+    columns: phoneFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var 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"
+  }
+}];
+var CurrencyFieldStory = function CurrencyFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var CurrencyField = {
+  render: function render17() {
+    return /* @__PURE__ */_jsx(CurrencyFieldStory, {});
+  }
+};
+var CurrencyFieldReadOnly = {
+  args: {
+    data: currencyFieldData,
+    columns: currencyFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var percentFieldColumns = [{
+  accessorKey: "progress",
+  header: "Progress",
+  field: "stepper"
+}, {
+  accessorKey: "completion",
+  header: "Completion",
+  field: "stepper"
+}, {
+  accessorKey: "discount",
+  header: "Discount",
+  field: "stepper"
+}];
+var PercentFieldStory = function PercentFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var PercentField = {
+  render: function render18() {
+    return /* @__PURE__ */_jsx(PercentFieldStory, {});
+  }
+};
+var PercentFieldReadOnly = {
+  args: {
+    data: percentFieldData,
+    columns: percentFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var countryOptions = [{
+  label: "United States",
+  value: "us"
+}, {
+  label: "United Kingdom",
+  value: "uk"
+}, {
+  label: "Germany",
+  value: "de"
+}, {
+  label: "France",
+  value: "fr"
+}, {
+  label: "Japan",
+  value: "jp"
+}];
+var cityOptions = [{
+  label: "New York",
+  value: "nyc"
+}, {
+  label: "London",
+  value: "london"
+}, {
+  label: "Berlin",
+  value: "berlin"
+}, {
+  label: "Paris",
+  value: "paris"
+}, {
+  label: "Tokyo",
+  value: "tokyo"
+}];
+var languageOptions = [{
+  label: "English",
+  value: "en"
+}, {
+  label: "German",
+  value: "de"
+}, {
+  label: "French",
+  value: "fr"
+}, {
+  label: "Japanese",
+  value: "ja"
+}, {
+  label: "Spanish",
+  value: "es"
+}];
+var 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"
+}];
+var 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
+  }
+}];
+var ComboboxFieldStory = function ComboboxFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var ComboboxField = {
+  render: function render19() {
+    return /* @__PURE__ */_jsx(ComboboxFieldStory, {});
+  }
+};
+var ComboboxFieldReadOnly = {
+  args: {
+    data: comboboxFieldData,
+    columns: comboboxFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var 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"
+}];
+var orderOptions = [{
+  label: "ORD-001",
+  value: "ORD-001"
+}, {
+  label: "ORD-002",
+  value: "ORD-002"
+}, {
+  label: "ORD-003",
+  value: "ORD-003"
+}];
+var 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"
+}];
+var 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
+  }
+}];
+var LinkFieldStory = function LinkFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var LinkField = {
+  render: function render20() {
+    return /* @__PURE__ */_jsx(LinkFieldStory, {});
+  }
+};
+var LinkFieldReadOnly = {
+  args: {
+    data: linkFieldData,
+    columns: linkFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var customFieldColumns = [{
+  accessorKey: "customRender",
+  header: "Custom User",
+  field: "custom",
+  fieldProps: {
+    render: function render21(value) {
+      return /* @__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 === null || value === void 0 ? void 0 : value.role) || "N/A"
+          })
+        }), /* @__PURE__ */_jsx(Text, {
+          children: (value === null || value === void 0 ? void 0 : value.name) || "Unknown"
+        })]
+      });
+    }
+  }
+}, {
+  accessorKey: "customBadge",
+  header: "Badge",
+  field: "custom",
+  fieldProps: {
+    render: function render22(value, _row, onChange) {
+      return /* @__PURE__ */_jsx(View, {
+        flexDirection: "row",
+        gap: "$1",
+        children: ["premium", "standard", "trial"].map(function (badge) {
+          return /* @__PURE__ */_jsx(View, {
+            backgroundColor: value === badge ? "$green5" : "$gray3",
+            padding: "$1",
+            borderRadius: "$2",
+            onPress: function onPress() {
+              return onChange(badge);
+            },
+            cursor: "pointer",
+            children: /* @__PURE__ */_jsx(Text, {
+              fontSize: "$2",
+              color: value === badge ? "$green11" : "$gray11",
+              children: badge
+            })
+          }, badge);
+        })
+      });
+    }
+  }
+}];
+var CustomFieldStory = function CustomFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var CustomField = {
+  render: function render23() {
+    return /* @__PURE__ */_jsx(CustomFieldStory, {});
+  }
+};
+var 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"
+}];
+var 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"
+    }]
+  }
+}];
+var GlobalSearchStory = function GlobalSearchStory2() {
+  var [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"
+    })]
+  });
+};
+var GlobalSearch = {
+  render: function render24() {
+    return /* @__PURE__ */_jsx(GlobalSearchStory, {});
+  }
+};
+var ServerSideSearchStory = function ServerSideSearchStory2() {
+  var [data, setData] = React.useState(searchableData);
+  var [isLoading, setIsLoading] = React.useState(false);
+  var handleSearch = React.useCallback(function (searchTerm) {
+    setIsLoading(true);
+    setTimeout(function () {
+      if (!searchTerm) {
+        setData(searchableData);
+      } else {
+        var filtered = searchableData.filter(function (row) {
+          return 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: function renderToolbar(props) {
+        return /* @__PURE__ */_jsx(DataTableToolbar, {
+          ...props,
+          onGlobalFilterChange: function onGlobalFilterChange(value) {
+            props.onGlobalFilterChange(value);
+            handleSearch(value);
+          }
+        });
+      },
+      initialState: {
+        isLoading
+      },
+      showRowNumbers: true,
+      "aria-label": "Server-side search table"
+    })]
+  });
+};
+var ServerSideSearch = {
+  render: function render25() {
+    return /* @__PURE__ */_jsx(ServerSideSearchStory, {});
+  }
+};
+var 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"
+}];
+var textareaFieldColumns = [{
+  accessorKey: "description",
+  header: "Description",
+  field: "textarea"
+}, {
+  accessorKey: "notes",
+  header: "Notes",
+  field: "textarea"
+}, {
+  accessorKey: "comments",
+  header: "Comments",
+  field: "textarea"
+}];
+var TextareaFieldStory = function TextareaFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var TextareaField = {
+  render: function render26() {
+    return /* @__PURE__ */_jsx(TextareaFieldStory, {});
+  }
+};
+var TextareaFieldReadOnly = {
+  args: {
+    data: textareaFieldData,
+    columns: textareaFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var signatureFieldColumns = [{
+  accessorKey: "customerSignature",
+  header: "Customer",
+  field: "signature"
+}, {
+  accessorKey: "managerSignature",
+  header: "Manager",
+  field: "signature"
+}, {
+  accessorKey: "witnessSignature",
+  header: "Witness",
+  field: "signature"
+}];
+var SignatureFieldStory = function SignatureFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var SignatureField = {
+  render: function render27() {
+    return /* @__PURE__ */_jsx(SignatureFieldStory, {});
+  }
+};
+var SignatureFieldReadOnly = {
+  args: {
+    data: signatureFieldData,
+    columns: signatureFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var fileFieldColumns = [{
+  accessorKey: "document",
+  header: "Document",
+  field: "fileupload"
+}, {
+  accessorKey: "attachment",
+  header: "Attachment",
+  field: "fileupload"
+}, {
+  accessorKey: "report",
+  header: "Report",
+  field: "fileupload"
+}];
+var FileFieldStory = function FileFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var FileField = {
+  render: function render28() {
+    return /* @__PURE__ */_jsx(FileFieldStory, {});
+  }
+};
+var FileFieldReadOnly = {
+  args: {
+    data: fileFieldData,
+    columns: fileFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var imageFieldColumns = [{
+  accessorKey: "avatar",
+  header: "Avatar",
+  field: "image"
+}, {
+  accessorKey: "productImage",
+  header: "Product Image",
+  field: "image"
+}, {
+  accessorKey: "thumbnail",
+  header: "Thumbnail",
+  field: "image"
+}];
+var ImageFieldStory = function ImageFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var ImageField = {
+  render: function render29() {
+    return /* @__PURE__ */_jsx(ImageFieldStory, {});
+  }
+};
+var ImageFieldReadOnly = {
+  args: {
+    data: imageFieldData,
+    columns: imageFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+  }
+}];
+var geolocationFieldColumns = [{
+  accessorKey: "storeLocation",
+  header: "Store Location",
+  field: "geolocation"
+}, {
+  accessorKey: "deliveryAddress",
+  header: "Delivery Address",
+  field: "geolocation"
+}, {
+  accessorKey: "pickupPoint",
+  header: "Pickup Point",
+  field: "geolocation"
+}];
+var GeolocationFieldStory = function GeolocationFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var GeolocationField = {
+  render: function render30() {
+    return /* @__PURE__ */_jsx(GeolocationFieldStory, {});
+  }
+};
+var GeolocationFieldReadOnly = {
+  args: {
+    data: geolocationFieldData,
+    columns: geolocationFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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"
+}];
+var barcodeFieldColumns = [{
+  accessorKey: "sku",
+  header: "SKU",
+  field: "barcode"
+}, {
+  accessorKey: "upc",
+  header: "UPC",
+  field: "barcode"
+}, {
+  accessorKey: "serialNumber",
+  header: "Serial Number",
+  field: "barcode"
+}];
+var BarcodeFieldStory = function BarcodeFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var BarcodeField = {
+  render: function render31() {
+    return /* @__PURE__ */_jsx(BarcodeFieldStory, {});
+  }
+};
+var BarcodeFieldReadOnly = {
+  args: {
+    data: barcodeFieldData,
+    columns: barcodeFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var 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
+  }
+}];
+var SliderFieldStory = function SliderFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var SliderField = {
+  render: function render32() {
+    return /* @__PURE__ */_jsx(SliderFieldStory, {});
+  }
+};
+var SliderFieldReadOnly = {
+  args: {
+    data: sliderFieldData,
+    columns: sliderFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var 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
+}];
+var progressFieldColumns = [{
+  accessorKey: "taskProgress",
+  header: "Task Progress",
+  field: "progress"
+}, {
+  accessorKey: "downloadProgress",
+  header: "Download",
+  field: "progress"
+}, {
+  accessorKey: "completionRate",
+  header: "Completion",
+  field: "progress"
+}];
+var ProgressFieldStory = function ProgressFieldStory2() {
+  var [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"
+    })]
+  });
+};
+var ProgressField = {
+  render: function render33() {
+    return /* @__PURE__ */_jsx(ProgressFieldStory, {});
+  }
+};
+var ProgressFieldReadOnly = {
+  args: {
+    data: progressFieldData,
+    columns: progressFieldColumns,
+    readOnly: true,
+    showRowNumbers: true
+  }
+};
+var ColumnLayoutEqual = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    columnLayout: "equal",
+    enablePagination: true
+  }
+};
+var ColumnLayoutAuto = {
+  args: {
+    data: sampleData,
+    columns: basicColumns,
+    columnLayout: "auto",
+    enablePagination: true
+  }
+};
+var ScrollLayoutStory = function ScrollLayoutStory2() {
+  var data = useMemo(function () {
+    return generateUsers(20);
+  }, []);
+  return /* @__PURE__ */_jsx(View, {
+    padding: "$4",
+    children: /* @__PURE__ */_jsx(DataTable, {
+      data,
+      columns,
+      columnLayout: "scroll",
+      enablePagination: true,
+      "aria-label": "Scroll layout table"
+    })
+  });
+};
+var ColumnLayoutScroll = {
+  render: function render34() {
+    return /* @__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.native.js.map