@progress/kendo-themes-html 6.2.1-dev.1 → 6.2.1-dev.44

package/dist/action-sheet/tests/action-sheet-data-table.js

@@ -645,6 +645,386 @@
   // src/action-sheet/actionsheet-item.tsx
   var React19 = __toESM(__require("react"));
 
+  // src/table/data-table.tsx
+  var React20 = __toESM(__require("react"));
+  var DataTable = class extends React20.Component {
+    render() {
+      const {
+        children,
+        className,
+        size
+      } = this.props;
+      return /* @__PURE__ */ React20.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-data-table",
+            {
+              [`k-table-${kendoThemeMaps.sizeMap[size] || size}`]: size
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+  DataTable.defaultProps = {
+    size: "medium"
+  };
+
+  // src/table/table-header.tsx
+  var React22 = __toESM(__require("react"));
+
+  // src/table/table.tsx
+  var React21 = __toESM(__require("react"));
+  var Table = class extends React21.Component {
+    render() {
+      const {
+        children,
+        className,
+        size
+      } = this.props;
+      return /* @__PURE__ */ React21.createElement(
+        "table",
+        {
+          className: classNames(
+            className,
+            "k-table",
+            {
+              [`k-table-${kendoThemeMaps.sizeMap[size]}`]: size
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-header.tsx
+  var TableHeader = class extends React22.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React22.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-table-header"
+          )
+        },
+        /* @__PURE__ */ React22.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ React22.createElement(Table, null, children))
+      );
+    }
+  };
+
+  // src/table/table-body.tsx
+  var React23 = __toESM(__require("react"));
+  var TableBody = class extends React23.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React23.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-table-body",
+            "k-table-scroller"
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-footer.tsx
+  var React24 = __toESM(__require("react"));
+  var TableFooter = class extends React24.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React24.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-table-footer"
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-list.tsx
+  var React25 = __toESM(__require("react"));
+  var TableList = class extends React25.Component {
+    render() {
+      const {
+        children,
+        className,
+        size,
+        virtualization
+      } = this.props;
+      return /* @__PURE__ */ React25.createElement(
+        "ul",
+        {
+          className: classNames(
+            className,
+            "k-table",
+            "k-table-list",
+            {
+              [`k-table-${kendoThemeMaps.sizeMap[size]}`]: size,
+              "k-virtual-table": virtualization
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-thead.tsx
+  var React26 = __toESM(__require("react"));
+  var TableThead = class extends React26.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React26.createElement(
+        "thead",
+        {
+          className: classNames(
+            className,
+            "k-table-thead"
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-tbody.tsx
+  var React27 = __toESM(__require("react"));
+
+  // src/table/table-tfoot.tsx
+  var React28 = __toESM(__require("react"));
+
+  // src/table/table-row.tsx
+  var React29 = __toESM(__require("react"));
+  var TableRow = class extends React29.Component {
+    render() {
+      const {
+        children,
+        className,
+        alt,
+        hover,
+        focus,
+        selected,
+        disabled
+      } = this.props;
+      return /* @__PURE__ */ React29.createElement(
+        "tr",
+        {
+          className: classNames(
+            className,
+            "k-table-row",
+            {
+              "k-table-alt-row": alt,
+              "k-hover": hover,
+              "k-focus": focus,
+              "k-selected": selected,
+              "k-disabled": disabled
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-list-row.tsx
+  var React30 = __toESM(__require("react"));
+  var TableListRow = class extends React30.Component {
+    render() {
+      const {
+        children,
+        className,
+        alt,
+        hover,
+        focus,
+        selected,
+        disabled
+      } = this.props;
+      return /* @__PURE__ */ React30.createElement(
+        "li",
+        {
+          className: classNames(
+            className,
+            "k-table-row",
+            {
+              "k-table-alt-row": alt,
+              "k-hover": hover,
+              "k-focus": focus,
+              "k-selected": selected,
+              "k-disabled": disabled
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-th.tsx
+  var React31 = __toESM(__require("react"));
+  var TableTh = class extends React31.Component {
+    render() {
+      const _a = this.props, {
+        children,
+        className,
+        text,
+        colspan
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "text",
+        "colspan"
+      ]);
+      const textOrChildren = text ? text : children;
+      return /* @__PURE__ */ React31.createElement(
+        "th",
+        __spreadProps(__spreadValues({
+          colSpan: colspan
+        }, htmlAttributes), {
+          className: classNames(
+            className,
+            "k-table-th"
+          )
+        }),
+        textOrChildren
+      );
+    }
+  };
+
+  // src/table/table-list-th.tsx
+  var React32 = __toESM(__require("react"));
+  var TableListTh = class extends React32.Component {
+    render() {
+      const _a = this.props, {
+        children,
+        className,
+        text
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "text"
+      ]);
+      const textOrChildren = text ? text : children;
+      return /* @__PURE__ */ React32.createElement(
+        "span",
+        __spreadProps(__spreadValues({
+          style: this.props.style
+        }, htmlAttributes), {
+          className: classNames(
+            className,
+            "k-table-th"
+          )
+        }),
+        textOrChildren
+      );
+    }
+  };
+
+  // src/table/table-td.tsx
+  var React33 = __toESM(__require("react"));
+
+  // src/table/table-list-td.tsx
+  var React34 = __toESM(__require("react"));
+  var TableListTd = class extends React34.Component {
+    render() {
+      const _a = this.props, {
+        children,
+        className,
+        text
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "text"
+      ]);
+      const textOrChildren = text ? text : children;
+      return /* @__PURE__ */ React34.createElement(
+        "span",
+        __spreadProps(__spreadValues({
+          style: this.props.style
+        }, htmlAttributes), {
+          className: classNames(
+            className,
+            "k-table-td"
+          )
+        }),
+        textOrChildren
+      );
+    }
+  };
+
+  // src/table/table-group-header.tsx
+  var React35 = __toESM(__require("react"));
+
+  // src/table/table-group-sticky-header.tsx
+  var React36 = __toESM(__require("react"));
+  var TableGroupStickyHeader = class extends React36.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React36.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-table-group-sticky-header"
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-group-row.tsx
+  var React37 = __toESM(__require("react"));
+
+  // src/table/table-list-group-row.tsx
+  var React38 = __toESM(__require("react"));
+  var TableListGroupRow = class extends React38.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React38.createElement(
+        "li",
+        {
+          className: classNames(
+            className,
+            "k-table-group-row"
+          )
+        },
+        children
+      );
+    }
+  };
+
   // src/action-sheet/tests/action-sheet-data-table.tsx
   var root = import_client.default.createRoot(
     document.getElementById("app")
@@ -670,14 +1050,14 @@
         filter: true,
         title: "Select Item"
       }
-    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-data-table k-table-lg" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "ID"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Name"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Job Title")))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-group-sticky-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-th" }, "Initial group")), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-scroller" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-table k-table-list" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 1.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 1.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 2.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 2.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "3"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 3.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 3.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-group-row" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-th" }, "Group")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "4"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 4.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 4.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "5"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 5.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 5.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "6"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 6.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 6.3")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-footer" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "30 records in total")))), /* @__PURE__ */ import_react.default.createElement(ActionSheetFooter, { actions: ["!Apply", "Cancel"] }))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement(ActionSheet, { adaptive: true, fullscreen: true }, /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ import_react.default.createElement(DataTable, { size: "large" }, /* @__PURE__ */ import_react.default.createElement(TableHeader, null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement(TableThead, null, /* @__PURE__ */ import_react.default.createElement(TableRow, null, /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "ID" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Name" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Job Title" })))), /* @__PURE__ */ import_react.default.createElement(TableGroupStickyHeader, null, /* @__PURE__ */ import_react.default.createElement(TableListTh, { text: "Initial group" })), /* @__PURE__ */ import_react.default.createElement(TableBody, null, /* @__PURE__ */ import_react.default.createElement(TableList, null, /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "1", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.3" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "2", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.3" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "3", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.3" })), /* @__PURE__ */ import_react.default.createElement(TableListGroupRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTh, { text: "Group" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "4", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.3" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "5", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.3" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "6", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.3" })))), /* @__PURE__ */ import_react.default.createElement(TableFooter, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "30 records in total" })))), /* @__PURE__ */ import_react.default.createElement(ActionSheetFooter, { actions: ["!Apply", "Cancel"] }))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement(ActionSheet, { adaptive: true, fullscreen: true }, /* @__PURE__ */ import_react.default.createElement(
       ActionSheetHeader,
       {
         actions: ["x"],
         filter: true,
         title: "Select Item"
       }
-    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-data-table k-table-lg" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "ID"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Name"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Job Title")))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-group-sticky-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-th" }, "Initial group")), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-scroller" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-table k-table-list" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 1.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 1.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 2.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 2.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "3"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 3.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 3.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-group-row" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-th" }, "Group")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "4"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 4.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 4.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "5"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 5.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 5.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "6"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 6.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 6.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-group-row" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-th" }, "Group")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "4"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 4.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 4.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "5"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 5.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 5.3")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "6"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 6.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 6.3")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-footer" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "30 records in total")))), /* @__PURE__ */ import_react.default.createElement(ActionSheetFooter, { actions: ["!Apply", "Cancel"] })))))
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ import_react.default.createElement(DataTable, { size: "large" }, /* @__PURE__ */ import_react.default.createElement(TableHeader, null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement(TableThead, null, /* @__PURE__ */ import_react.default.createElement(TableRow, null, /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "ID" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Name" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Job Title" })))), /* @__PURE__ */ import_react.default.createElement(TableGroupStickyHeader, null, /* @__PURE__ */ import_react.default.createElement(TableListTh, { text: "Initial group" })), /* @__PURE__ */ import_react.default.createElement(TableBody, null, /* @__PURE__ */ import_react.default.createElement(TableList, null, /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "1", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.3" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "2", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.3" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "3", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.3" })), /* @__PURE__ */ import_react.default.createElement(TableListGroupRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTh, { text: "Group" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "4", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.3" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "5", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.3" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "6", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.3" })))), /* @__PURE__ */ import_react.default.createElement(TableFooter, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "30 records in total" })))), /* @__PURE__ */ import_react.default.createElement(ActionSheetFooter, { actions: ["!Apply", "Cancel"] })))))
   );
 })();
 //# sourceMappingURL=action-sheet-data-table.js.map