@multiplatform.one/table 7.34.3 → 7.35.0

package/dist/cjs/components/SimpleTable/index.cjs

@@ -31,6 +31,8 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
+var import_columnSizing = require("./columnSizing.cjs");
+var import_ScrollFrame = require("./ScrollFrame.cjs");
 var import_table_primitives = require("@multiplatform.one/table-primitives");
 var import_rowPress = require("../../utils/rowPress.cjs");
 var import_withInterp = require("../../utils/withInterp.cjs");
@@ -249,7 +251,7 @@ function SimpleTableMobileCards({
   const tableZebraOn = knobProps.tableZebra === "on";
   const [titleCol, ...detailCols] = columns;
   const typeSize = knobProps.label.fontSize;
-  const motion = (0, import_theme.transitionProps)(knobProps.transition);
+  const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
   if (data.length === 0) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
       flexDirection: "column",
@@ -260,7 +262,7 @@ function SimpleTableMobileCards({
         color: knobProps.textAccentColor,
         children: caption
       }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
-        compact: true,
+        size: "$3",
         "aria-live": "polite",
         title: t("No data available")
       })]
@@ -341,12 +343,13 @@ function SimpleTableMobileCards({
 }
 function SimpleTableDesktop({
   data,
-  columns,
+  columns: columnDefinitions,
   caption,
   onRowPress,
   rowLabel,
   getRowId,
   disabled,
+  onLayout,
   ...props
 }) {
   const {
@@ -355,6 +358,9 @@ function SimpleTableDesktop({
   } = (0, import_theme.useResolvedKnobs)({
     component: "SimpleTable"
   });
+  const [viewportWidth, setViewportWidth] = (0, import_react.useState)(0);
+  const columns = (0, import_columnSizing.resolveSimpleTableColumns)(columnDefinitions, data, viewportWidth, token => Number((0, import_tamagui.getTokenValue)(token, "size")));
+  const tableWidth = columns.reduce((sum, column) => sum + column.width, 0);
   const {
     t
   } = (0, import_react_i18next.useTranslation)();
@@ -371,108 +377,155 @@ function SimpleTableDesktop({
   const tableZebraOn = knobProps.tableZebra === "on";
   const ariaLabel = caption ? void 0 : props["aria-label"];
   const typeSize = knobProps.label.fontSize;
-  const motion = (0, import_theme.transitionProps)(knobProps.transition);
+  const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
   const pad = cellPad(knobProps.gap.gap);
   const frameBorder = knobProps.surface.borderWidth;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
-    ...props,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     minWidth: 0,
-    ...{
-      overflow: "auto",
-      "data-simple-table-frame": "true",
-      "data-border-width": String(frameBorder),
-      "data-animation": knobProps.transition ? "on" : "none"
-    },
-    ...disabledChrome(Boolean(disabled), disabledState),
-    "aria-label": ariaLabel,
-    ...{
-      "aria-rowcount": data.length + 1
+    onLayout: event => {
+      setViewportWidth(Math.max(0, event.nativeEvent.layout.width - frameBorder * 2));
+      onLayout?.(event);
     },
-    children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Caption, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        ...knobProps.label,
-        color: knobProps.textAccentColor,
-        children: caption
-      })
-    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
-      borderBottomWidth: frameBorder,
-      borderBottomColor: "$borderColor",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
-        children: columns.map((col, colIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
-          justifyContent: alignToFlex(col.align),
-          cellLocation: cellLocationFor(colIndex, columns.length),
-          "data-align": col.align ?? "left",
-          "data-cell-pad": knobProps.gap.gap,
-          borderRadius: 0,
-          ...pad,
+    ...props,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.ScrollFrame, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
+        displayMode: "flex",
+        width: tableWidth,
+        minWidth: tableWidth,
+        ...{
+          overflow: "visible",
+          "data-simple-table-frame": "true",
+          "data-border-width": String(frameBorder),
+          "data-animation": knobProps.motion.control.transition ? "on" : "none"
+        },
+        ...disabledChrome(Boolean(disabled), disabledState),
+        "aria-label": ariaLabel,
+        ...{
+          "aria-rowcount": data.length + 1
+        },
+        children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Caption, {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             ...knobProps.label,
             color: knobProps.textAccentColor,
-            display: "block",
-            width: "100%",
-            textAlign: col.align ?? "left",
-            numberOfLines: 1,
-            ellipsizeMode: "tail",
-            ...(col.align === "right" ? {
-              fontVariant: ["tabular-nums"]
-            } : {}),
-            children: col.header
+            children: caption
           })
-        }, col.accessorKey))
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Body, {
-      ...(rowPressActive ? {
-        "data-row-press-scope": "true"
-      } : {}),
-      children: data.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
-          cellWidth: "auto",
-          borderRadius: 0,
-          ...{
-            colSpan: Math.max(columns.length, 1)
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
-            compact: true,
-            "aria-live": "polite",
-            title: t("No data available")
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
+          borderBottomWidth: frameBorder,
+          borderBottomColor: "$borderColor",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+            alignItems: "stretch",
+            children: columns.map((col, colIndex) => {
+              const cell = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+                cellWidth: col.width,
+                flexShrink: 0,
+                justifyContent: alignToFlex(col.align),
+                cellLocation: cellLocationFor(colIndex, columns.length),
+                "data-align": col.align ?? "left",
+                "data-cell-pad": knobProps.gap.gap,
+                borderRadius: 0,
+                ...pad,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  ...knobProps.label,
+                  color: knobProps.textAccentColor,
+                  display: "block",
+                  width: "100%",
+                  textAlign: col.align ?? "left",
+                  numberOfLines: 1,
+                  ellipsizeMode: "tail",
+                  ...(col.align === "right" ? {
+                    fontVariant: ["tabular-nums"]
+                  } : {}),
+                  children: col.header
+                })
+              }, col.accessorKey);
+              return colIndex === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.PinnedCell, {
+                width: col.width,
+                children: cell
+              }, col.accessorKey) : cell;
+            })
           })
-        })
-      }) : data.map((row, rowIndex) => {
-        const intent = row._intent;
-        const intentProps = intent ? {
-          [intent]: true
-        } : {};
-        const isLast = rowIndex === data.length - 1;
-        const zebraFill = !intent && tableZebraOn && rowIndex % 2 === 1 ? {
-          backgroundColor: (0, import_table_primitives.tableZebraFill)(knobProps.surface.backgroundColor)
-        } : {};
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
-          rowLocation: rowLocationFor(rowIndex, data.length),
-          ...(disabled ? {} : {
-            hoverStyle: {
-              backgroundColor: "$backgroundHover"
-            }
-          }),
-          ...motion,
-          ...zebraFill,
-          ...intentProps,
-          ...{
-            "data-table-zebra": tableZebraOn ? rowIndex % 2 === 0 ? "even" : "odd" : "off"
-          },
-          ...getRowPressProps(row, rowIndex),
-          children: columns.map((col, colIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
-            justifyContent: alignToFlex(col.align),
-            cellLocation: cellLocationFor(colIndex, columns.length),
-            "data-align": col.align ?? "left",
-            "data-cell-pad": knobProps.gap.gap,
-            borderRadius: 0,
-            ...pad,
-            ...gridRule(frameBorder, !isLast),
-            children: renderCellContent(col, row, rowIndex, knobProps.body, typeSize)
-          }, col.accessorKey))
-        }, resolveRowId(row, rowIndex, getRowId));
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Body, {
+          overflow: "visible",
+          overflowX: "visible",
+          overflowY: "visible",
+          ...(rowPressActive ? {
+            "data-row-press-scope": "true"
+          } : {}),
+          children: data.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+              cellWidth: "auto",
+              borderRadius: 0,
+              ...{
+                colSpan: Math.max(columns.length, 1)
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+                size: "$3",
+                "aria-live": "polite",
+                title: t("No data available")
+              })
+            })
+          }) : data.map((row, rowIndex) => {
+            const intent = row._intent;
+            const intentProps = intent ? {
+              [intent]: true
+            } : {};
+            const isLast = rowIndex === data.length - 1;
+            const zebraFill = !intent && tableZebraOn && rowIndex % 2 === 1 ? {
+              backgroundColor: (0, import_table_primitives.tableZebraFill)(knobProps.surface.backgroundColor)
+            } : {};
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+              rowLocation: rowLocationFor(rowIndex, data.length),
+              alignItems: "stretch",
+              group: "simpleTableRow",
+              backgroundColor: intent ? "$color3" : zebraFill.backgroundColor ?? "$background",
+              ...(disabled ? {} : {
+                hoverStyle: {
+                  backgroundColor: "$backgroundHover"
+                }
+              }),
+              ...motion,
+              ...zebraFill,
+              ...intentProps,
+              ...{
+                "data-table-zebra": tableZebraOn ? rowIndex % 2 === 0 ? "even" : "odd" : "off"
+              },
+              ...getRowPressProps(row, rowIndex),
+              children: columns.map((col, colIndex) => {
+                const cell = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                  cellWidth: col.width,
+                  flexShrink: 0,
+                  ...(colIndex === 0 ? {
+                    backgroundColor: import_tamagui.isWeb ? "inherit" : intent ? "$color3" : zebraFill.backgroundColor ?? "$background",
+                    ...(!import_tamagui.isWeb && !disabled ? {
+                      "$group-simpleTableRow-hover": {
+                        backgroundColor: "$backgroundHover"
+                      },
+                      ...(rowPressActive ? {
+                        "$group-simpleTableRow-press": {
+                          backgroundColor: "$backgroundPress"
+                        }
+                      } : {})
+                    } : {})
+                  } : {}),
+                  justifyContent: alignToFlex(col.align),
+                  cellLocation: cellLocationFor(colIndex, columns.length),
+                  "data-align": col.align ?? "left",
+                  "data-cell-pad": knobProps.gap.gap,
+                  borderRadius: 0,
+                  ...pad,
+                  ...gridRule(frameBorder, !isLast),
+                  children: renderCellContent(col, row, rowIndex, knobProps.body, typeSize)
+                }, col.accessorKey);
+                return colIndex === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.PinnedCell, {
+                  width: col.width,
+                  children: cell
+                }, col.accessorKey) : cell;
+              })
+            }, resolveRowId(row, rowIndex, getRowId));
+          })
+        })]
       })
-    })]
+    })
   });
 }
 function SimpleTable({
@@ -502,7 +555,7 @@ function SimpleTable({
       ...{
         "data-simple-table-frame": "true",
         "data-border-width": String(knobProps.surface.borderWidth),
-        "data-animation": knobProps.transition ? "on" : "none"
+        "data-animation": knobProps.motion.control.transition ? "on" : "none"
       },
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleTableMobileCards, {
         data,

package/dist/cjs/components/SimpleTable/index.native.js

@@ -34,6 +34,8 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
+var import_columnSizing = require("./columnSizing.native.js");
+var import_ScrollFrame = require("./ScrollFrame.native.js");
 var import_table_primitives = require("@multiplatform.one/table-primitives");
 var import_rowPress = require("../../utils/rowPress.native.js");
 var import_withInterp = require("../../utils/withInterp.native.js");
@@ -269,7 +271,7 @@ function SimpleTableMobileCards(param) {
   var tableZebraOn = knobProps.tableZebra === "on";
   var [titleCol, ...detailCols] = columns;
   var typeSize = knobProps.label.fontSize;
-  var motion = (0, import_theme.transitionProps)(knobProps.transition);
+  var motion = (0, import_theme.transitionProps)(knobProps.motion.control);
   if (data.length === 0) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
       flexDirection: "column",
@@ -280,7 +282,7 @@ function SimpleTableMobileCards(param) {
         color: knobProps.textAccentColor,
         children: caption
       }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
-        compact: true,
+        size: "$3",
         "aria-live": "polite",
         title: t("No data available")
       })]
@@ -364,12 +366,13 @@ function SimpleTableMobileCards(param) {
 function SimpleTableDesktop(param) {
   var {
     data,
-    columns,
+    columns: columnDefinitions,
     caption,
     onRowPress,
     rowLabel,
     getRowId,
     disabled,
+    onLayout,
     ...props
   } = param;
   var {
@@ -378,6 +381,13 @@ function SimpleTableDesktop(param) {
   } = (0, import_theme.useResolvedKnobs)({
     component: "SimpleTable"
   });
+  var [viewportWidth, setViewportWidth] = (0, import_react.useState)(0);
+  var columns = (0, import_columnSizing.resolveSimpleTableColumns)(columnDefinitions, data, viewportWidth, function (token) {
+    return Number((0, import_tamagui.getTokenValue)(token, "size"));
+  });
+  var tableWidth = columns.reduce(function (sum, column) {
+    return sum + column.width;
+  }, 0);
   var {
     t
   } = (0, import_react_i18next.useTranslation)();
@@ -394,119 +404,163 @@ function SimpleTableDesktop(param) {
   var tableZebraOn = knobProps.tableZebra === "on";
   var ariaLabel = caption ? void 0 : props["aria-label"];
   var typeSize = knobProps.label.fontSize;
-  var motion = (0, import_theme.transitionProps)(knobProps.transition);
+  var motion = (0, import_theme.transitionProps)(knobProps.motion.control);
   var pad = cellPad(knobProps.gap.gap);
   var frameBorder = knobProps.surface.borderWidth;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
-    ...props,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     minWidth: 0,
-    ...{
-      overflow: "auto",
-      "data-simple-table-frame": "true",
-      "data-border-width": String(frameBorder),
-      "data-animation": knobProps.transition ? "on" : "none"
-    },
-    ...disabledChrome(Boolean(disabled), disabledState),
-    "aria-label": ariaLabel,
-    ...{
-      "aria-rowcount": data.length + 1
+    onLayout: function onLayout1(event) {
+      setViewportWidth(Math.max(0, event.nativeEvent.layout.width - frameBorder * 2));
+      onLayout === null || onLayout === void 0 ? void 0 : onLayout(event);
     },
-    children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Caption, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        ...knobProps.label,
-        color: knobProps.textAccentColor,
-        children: caption
-      })
-    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
-      borderBottomWidth: frameBorder,
-      borderBottomColor: "$borderColor",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
-        children: columns.map(function (col, colIndex) {
-          var _col_align, _col_align1;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
-            justifyContent: alignToFlex(col.align),
-            cellLocation: cellLocationFor(colIndex, columns.length),
-            "data-align": (_col_align = col.align) !== null && _col_align !== void 0 ? _col_align : "left",
-            "data-cell-pad": knobProps.gap.gap,
-            borderRadius: 0,
-            ...pad,
-            children: (
-            /* Block text filling the cell + textAlign: alignment that
-            works in the real <th> (display:table-cell — flex props
-            are inert there) and in the flex displayMode alike. */
-            /* @__PURE__ */
-            (0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              ...knobProps.label,
-              color: knobProps.textAccentColor,
-              display: "block",
-              width: "100%",
-              textAlign: (_col_align1 = col.align) !== null && _col_align1 !== void 0 ? _col_align1 : "left",
-              numberOfLines: 1,
-              ellipsizeMode: "tail",
-              ...(col.align === "right" ? {
-                fontVariant: ["tabular-nums"]
-              } : {}),
-              children: col.header
-            }))
-          }, col.accessorKey);
-        })
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Body, {
-      ...(rowPressActive ? {
-        "data-row-press-scope": "true"
-      } : {}),
-      children: data.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
-          cellWidth: "auto",
-          borderRadius: 0,
-          ...{
-            colSpan: Math.max(columns.length, 1)
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
-            compact: true,
-            "aria-live": "polite",
-            title: t("No data available")
+    ...props,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.ScrollFrame, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
+        displayMode: "flex",
+        width: tableWidth,
+        minWidth: tableWidth,
+        ...{
+          overflow: "visible",
+          "data-simple-table-frame": "true",
+          "data-border-width": String(frameBorder),
+          "data-animation": knobProps.motion.control.transition ? "on" : "none"
+        },
+        ...disabledChrome(Boolean(disabled), disabledState),
+        "aria-label": ariaLabel,
+        ...{
+          "aria-rowcount": data.length + 1
+        },
+        children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Caption, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: caption
+          })
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
+          borderBottomWidth: frameBorder,
+          borderBottomColor: "$borderColor",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+            alignItems: "stretch",
+            children: columns.map(function (col, colIndex) {
+              var _col_align, _col_align1;
+              var cell = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+                cellWidth: col.width,
+                flexShrink: 0,
+                justifyContent: alignToFlex(col.align),
+                cellLocation: cellLocationFor(colIndex, columns.length),
+                "data-align": (_col_align = col.align) !== null && _col_align !== void 0 ? _col_align : "left",
+                "data-cell-pad": knobProps.gap.gap,
+                borderRadius: 0,
+                ...pad,
+                children: (
+                /* Block text filling the cell + textAlign: alignment that
+                works in the real <th> (display:table-cell — flex props
+                are inert there) and in the flex displayMode alike. */
+                /* @__PURE__ */
+                (0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  ...knobProps.label,
+                  color: knobProps.textAccentColor,
+                  display: "block",
+                  width: "100%",
+                  textAlign: (_col_align1 = col.align) !== null && _col_align1 !== void 0 ? _col_align1 : "left",
+                  numberOfLines: 1,
+                  ellipsizeMode: "tail",
+                  ...(col.align === "right" ? {
+                    fontVariant: ["tabular-nums"]
+                  } : {}),
+                  children: col.header
+                }))
+              }, col.accessorKey);
+              return colIndex === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.PinnedCell, {
+                width: col.width,
+                children: cell
+              }, col.accessorKey) : cell;
+            })
           })
-        })
-      }) : data.map(function (row, rowIndex) {
-        var intent = row._intent;
-        var intentProps = intent ? {
-          [intent]: true
-        } : {};
-        var isLast = rowIndex === data.length - 1;
-        var zebraFill = !intent && tableZebraOn && rowIndex % 2 === 1 ? {
-          backgroundColor: (0, import_table_primitives.tableZebraFill)(knobProps.surface.backgroundColor)
-        } : {};
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
-          rowLocation: rowLocationFor(rowIndex, data.length),
-          ...(disabled ? {} : {
-            hoverStyle: {
-              backgroundColor: "$backgroundHover"
-            }
-          }),
-          ...motion,
-          ...zebraFill,
-          ...intentProps,
-          ...{
-            "data-table-zebra": tableZebraOn ? rowIndex % 2 === 0 ? "even" : "odd" : "off"
-          },
-          ...getRowPressProps(row, rowIndex),
-          children: columns.map(function (col, colIndex) {
-            var _col_align;
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
-              justifyContent: alignToFlex(col.align),
-              cellLocation: cellLocationFor(colIndex, columns.length),
-              "data-align": (_col_align = col.align) !== null && _col_align !== void 0 ? _col_align : "left",
-              "data-cell-pad": knobProps.gap.gap,
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Body, {
+          overflow: "visible",
+          overflowX: "visible",
+          overflowY: "visible",
+          ...(rowPressActive ? {
+            "data-row-press-scope": "true"
+          } : {}),
+          children: data.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+              cellWidth: "auto",
               borderRadius: 0,
-              ...pad,
-              ...gridRule(frameBorder, !isLast),
-              children: renderCellContent(col, row, rowIndex, knobProps.body, typeSize)
-            }, col.accessorKey);
+              ...{
+                colSpan: Math.max(columns.length, 1)
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+                size: "$3",
+                "aria-live": "polite",
+                title: t("No data available")
+              })
+            })
+          }) : data.map(function (row, rowIndex) {
+            var _zebraFill_backgroundColor;
+            var intent = row._intent;
+            var intentProps = intent ? {
+              [intent]: true
+            } : {};
+            var isLast = rowIndex === data.length - 1;
+            var zebraFill = !intent && tableZebraOn && rowIndex % 2 === 1 ? {
+              backgroundColor: (0, import_table_primitives.tableZebraFill)(knobProps.surface.backgroundColor)
+            } : {};
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+              rowLocation: rowLocationFor(rowIndex, data.length),
+              alignItems: "stretch",
+              group: "simpleTableRow",
+              backgroundColor: intent ? "$color3" : (_zebraFill_backgroundColor = zebraFill.backgroundColor) !== null && _zebraFill_backgroundColor !== void 0 ? _zebraFill_backgroundColor : "$background",
+              ...(disabled ? {} : {
+                hoverStyle: {
+                  backgroundColor: "$backgroundHover"
+                }
+              }),
+              ...motion,
+              ...zebraFill,
+              ...intentProps,
+              ...{
+                "data-table-zebra": tableZebraOn ? rowIndex % 2 === 0 ? "even" : "odd" : "off"
+              },
+              ...getRowPressProps(row, rowIndex),
+              children: columns.map(function (col, colIndex) {
+                var _zebraFill_backgroundColor2, _col_align;
+                var cell = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                  cellWidth: col.width,
+                  flexShrink: 0,
+                  ...(colIndex === 0 ? {
+                    backgroundColor: import_tamagui.isWeb ? "inherit" : intent ? "$color3" : (_zebraFill_backgroundColor2 = zebraFill.backgroundColor) !== null && _zebraFill_backgroundColor2 !== void 0 ? _zebraFill_backgroundColor2 : "$background",
+                    ...(!import_tamagui.isWeb && !disabled ? {
+                      "$group-simpleTableRow-hover": {
+                        backgroundColor: "$backgroundHover"
+                      },
+                      ...(rowPressActive ? {
+                        "$group-simpleTableRow-press": {
+                          backgroundColor: "$backgroundPress"
+                        }
+                      } : {})
+                    } : {})
+                  } : {}),
+                  justifyContent: alignToFlex(col.align),
+                  cellLocation: cellLocationFor(colIndex, columns.length),
+                  "data-align": (_col_align = col.align) !== null && _col_align !== void 0 ? _col_align : "left",
+                  "data-cell-pad": knobProps.gap.gap,
+                  borderRadius: 0,
+                  ...pad,
+                  ...gridRule(frameBorder, !isLast),
+                  children: renderCellContent(col, row, rowIndex, knobProps.body, typeSize)
+                }, col.accessorKey);
+                return colIndex === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.PinnedCell, {
+                  width: col.width,
+                  children: cell
+                }, col.accessorKey) : cell;
+              })
+            }, resolveRowId(row, rowIndex, getRowId));
           })
-        }, resolveRowId(row, rowIndex, getRowId));
+        })]
       })
-    })]
+    })
   });
 }
 function SimpleTable(param) {
@@ -537,7 +591,7 @@ function SimpleTable(param) {
       ...{
         "data-simple-table-frame": "true",
         "data-border-width": String(knobProps.surface.borderWidth),
-        "data-animation": knobProps.transition ? "on" : "none"
+        "data-animation": knobProps.motion.control.transition ? "on" : "none"
       },
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleTableMobileCards, {
         data,