@osdk/react-components 0.1.0-beta.3 → 0.1.0-beta.4

package/build/browser/object-table/TableHeader.module.css

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.osdkTableHeader {
+  display: grid;
+  position: sticky;
+  top: 0;
+  z-index: var(--bp-surface-zIndex-1);
+  background-color: var(--osdk-table-header-bg);
+}
+
+.osdkTableHeader[data-resizing="true"] {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.osdkTableHeaderRow {
+  display: flex;
+}
+
+.osdkTableHeaderCell {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  position: relative;
+  padding: var(--osdk-table-cell-padding);
+  font-weight: var(--osdk-table-header-fontWeight);
+  font-size: var(--osdk-table-header-fontSize);
+  color: var(--osdk-table-header-color);
+  border-top: var(--osdk-table-border);
+  border-right: var(--osdk-table-header-divider);
+  background-color: inherit;
+
+  &:first-child {
+    border-left: var(--osdk-table-border);
+  }
+
+  &:last-child {
+    border-right: var(--osdk-table-border);
+  }
+}
+
+.osdkTableHeaderCell:has([role="checkbox"]) {
+  justify-content: center;
+}
+
+.osdkTableHeaderResizer {
+  background: none;
+  cursor: col-resize;
+  height: 100%;
+  position: absolute;
+  right: calc(-1 * var(--osdk-table-border-width));
+  top: 0;
+  touch-action: none;
+  width: 3px;
+  z-index: var(--bp-surface-zIndex-2);
+
+  &:hover {
+    background: var(--bp-intent-primary-hover);
+  }
+
+  &:active {
+    background: var(--bp-intent-primary-active);
+  }
+}

package/build/browser/object-table/TableRow.js

@@ -16,6 +16,7 @@
 
 import React, { useCallback } from "react";
 import { TableCell } from "./TableCell.js";
+import styles from "./TableRow.module.css";
 export function TableRow({
   row,
   virtualRow,
@@ -26,11 +27,11 @@ export function TableRow({
     onRowClick?.(row.original);
   }, [onRowClick, row.original]);
   return /*#__PURE__*/React.createElement("tr", {
+    "data-selected": row.getIsSelected(),
+    className: styles.osdkTableRow,
     style: {
-      position: "absolute",
       height: `${virtualRow.size}px`,
-      transform: `translateY(${virtualRow.start}px)`,
-      display: "flex"
+      transform: `translateY(${virtualRow.start}px)`
     },
     onClick: handleClick
   }, row.getVisibleCells().map(cell => /*#__PURE__*/React.createElement(TableCell, {

package/build/browser/object-table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":["React","useCallback","TableCell","TableRow","row","virtualRow","onRowClick","renderCellContextMenu","handleClick","original","createElement","style","position","height","size","transform","start","display","onClick","getVisibleCells","map","cell","key","id"],"sources":["TableRow.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { Cell, Row, RowData } from \"@tanstack/react-table\";\nimport type { VirtualItem } from \"@tanstack/react-virtual\";\nimport React, { useCallback } from \"react\";\nimport { TableCell } from \"./TableCell.js\";\n\ninterface TableRowProps<TData extends RowData> {\n  row: Row<TData>;\n  virtualRow: VirtualItem;\n  onRowClick?: (row: TData) => void;\n  renderCellContextMenu?: (\n    row: TData,\n    cell: Cell<TData, unknown>,\n  ) => React.ReactNode;\n}\n\nexport function TableRow<TData extends RowData>({\n  row,\n  virtualRow,\n  onRowClick,\n  renderCellContextMenu,\n}: TableRowProps<TData>): React.ReactElement {\n  const handleClick = useCallback(() => {\n    onRowClick?.(row.original);\n  }, [onRowClick, row.original]);\n\n  return (\n    <tr\n      style={{\n        position: \"absolute\",\n        height: `${virtualRow.size}px`,\n        transform: `translateY(${virtualRow.start}px)`,\n        display: \"flex\",\n      }}\n      onClick={handleClick}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell\n          key={cell.id}\n          cell={cell}\n          renderCellContextMenu={renderCellContextMenu}\n        />\n      ))}\n    </tr>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,SAAS,QAAQ,gBAAgB;AAY1C,OAAO,SAASC,QAAQA,CAAwB;EAC9CC,GAAG;EACHC,UAAU;EACVC,UAAU;EACVC;AACoB,CAAC,EAAsB;EAC3C,MAAMC,WAAW,GAAGP,WAAW,CAAC,MAAM;IACpCK,UAAU,GAAGF,GAAG,CAACK,QAAQ,CAAC;EAC5B,CAAC,EAAE,CAACH,UAAU,EAAEF,GAAG,CAACK,QAAQ,CAAC,CAAC;EAE9B,oBACET,KAAA,CAAAU,aAAA;IACEC,KAAK,EAAE;MACLC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,GAAGR,UAAU,CAACS,IAAI,IAAI;MAC9BC,SAAS,EAAE,cAAcV,UAAU,CAACW,KAAK,KAAK;MAC9CC,OAAO,EAAE;IACX,CAAE;IACFC,OAAO,EAAEV;EAAY,GAEpBJ,GAAG,CAACe,eAAe,CAAC,CAAC,CAACC,GAAG,CAAEC,IAAI,iBAC9BrB,KAAA,CAAAU,aAAA,CAACR,SAAS;IACRoB,GAAG,EAAED,IAAI,CAACE,EAAG;IACbF,IAAI,EAAEA,IAAK;IACXd,qBAAqB,EAAEA;EAAsB,CAC9C,CACF,CACC,CAAC;AAET","ignoreList":[]}
+{"version":3,"file":"TableRow.js","names":["React","useCallback","TableCell","styles","TableRow","row","virtualRow","onRowClick","renderCellContextMenu","handleClick","original","createElement","getIsSelected","className","osdkTableRow","style","height","size","transform","start","onClick","getVisibleCells","map","cell","key","id"],"sources":["TableRow.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { Cell, Row, RowData } from \"@tanstack/react-table\";\nimport type { VirtualItem } from \"@tanstack/react-virtual\";\nimport React, { useCallback } from \"react\";\nimport { TableCell } from \"./TableCell.js\";\nimport styles from \"./TableRow.module.css\";\n\ninterface TableRowProps<TData extends RowData> {\n  row: Row<TData>;\n  virtualRow: VirtualItem;\n  onRowClick?: (row: TData) => void;\n  renderCellContextMenu?: (\n    row: TData,\n    cell: Cell<TData, unknown>,\n  ) => React.ReactNode;\n}\n\nexport function TableRow<TData extends RowData>({\n  row,\n  virtualRow,\n  onRowClick,\n  renderCellContextMenu,\n}: TableRowProps<TData>): React.ReactElement {\n  const handleClick = useCallback(() => {\n    onRowClick?.(row.original);\n  }, [onRowClick, row.original]);\n\n  return (\n    <tr\n      data-selected={row.getIsSelected()}\n      className={styles.osdkTableRow}\n      style={{\n        height: `${virtualRow.size}px`,\n        transform: `translateY(${virtualRow.start}px)`,\n      }}\n      onClick={handleClick}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell\n          key={cell.id}\n          cell={cell}\n          renderCellContextMenu={renderCellContextMenu}\n        />\n      ))}\n    </tr>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,uBAAuB;AAY1C,OAAO,SAASC,QAAQA,CAAwB;EAC9CC,GAAG;EACHC,UAAU;EACVC,UAAU;EACVC;AACoB,CAAC,EAAsB;EAC3C,MAAMC,WAAW,GAAGR,WAAW,CAAC,MAAM;IACpCM,UAAU,GAAGF,GAAG,CAACK,QAAQ,CAAC;EAC5B,CAAC,EAAE,CAACH,UAAU,EAAEF,GAAG,CAACK,QAAQ,CAAC,CAAC;EAE9B,oBACEV,KAAA,CAAAW,aAAA;IACE,iBAAeN,GAAG,CAACO,aAAa,CAAC,CAAE;IACnCC,SAAS,EAAEV,MAAM,CAACW,YAAa;IAC/BC,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGV,UAAU,CAACW,IAAI,IAAI;MAC9BC,SAAS,EAAE,cAAcZ,UAAU,CAACa,KAAK;IAC3C,CAAE;IACFC,OAAO,EAAEX;EAAY,GAEpBJ,GAAG,CAACgB,eAAe,CAAC,CAAC,CAACC,GAAG,CAAEC,IAAI,iBAC9BvB,KAAA,CAAAW,aAAA,CAACT,SAAS;IACRsB,GAAG,EAAED,IAAI,CAACE,EAAG;IACbF,IAAI,EAAEA,IAAK;IACXf,qBAAqB,EAAEA;EAAsB,CAC9C,CACF,CACC,CAAC;AAET","ignoreList":[]}

package/build/browser/object-table/TableRow.module.css

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.osdkTableRow {
+  position: absolute;
+  display: flex;
+  background-color: var(--osdk-table-row-bg-default);
+  border-top: var(--osdk-table-row-divider);
+  border-bottom: var(--osdk-table-border-width) solid transparent;
+
+  &:last-child {
+    border-bottom: var(--osdk-table-border);
+  }
+
+  /* Zebra rows */
+  &:nth-child(even) {
+    background-color: var(
+      --osdk-table-row-bg-alternate,
+      var(--osdk-table-row-bg-default)
+    );
+  }
+
+  &:hover {
+    z-index: 1;
+    background-color: var(
+      --osdk-table-row-bg-hover,
+      var(--bp-surface-colorHover-default)
+    );
+    border-top-color: var(--osdk-table-row-border-color-hover);
+    border-bottom-color: var(--osdk-table-row-border-color-hover);
+  }
+
+  &[data-selected="true"] {
+    z-index: 2;
+    background-color: var(--osdk-table-row-bg-active);
+    border-top-color: var(--osdk-table-row-border-color-active);
+    border-bottom-color: var(--osdk-table-row-border-color-active);
+  }
+
+  &[data-selected="true"] + &[data-selected="true"] {
+    border-top-color: transparent;
+  }
+
+  &[data-selected="true"]:has(+ &[data-selected="true"]) {
+    border-bottom-color: transparent;
+  }
+}

package/build/cjs/public/experimental.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var reactTable = require('@tanstack/react-table');
-var React = require('react');
+var React5 = require('react');
 var react = require('@osdk/react');
 var experimental = require('@osdk/react/experimental');
 var checkbox = require('@base-ui/react/checkbox');
@@ -12,7 +12,7 @@ var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React5__default = /*#__PURE__*/_interopDefault(React5);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 // src/object-table/ObjectTable.tsx
@@ -22,7 +22,7 @@ function useColumnDefs(objectType, columnDefinitions) {
     loading,
     error
   } = react.useOsdkMetadata(objectType);
-  const columns = React.useMemo(() => {
+  const columns = React5.useMemo(() => {
     const objectProperties = metadata?.properties;
     if (columnDefinitions) {
       return getColumnsFromColumnDefinitions(columnDefinitions, objectProperties);
@@ -81,7 +81,7 @@ function getDefaultColumns(objectProperties) {
 var useDefaultTableStates = ({
   columnDefinitions
 }) => {
-  const columnVisibility = React.useMemo(() => {
+  const columnVisibility = React5.useMemo(() => {
     if (columnDefinitions) {
       const colVisibility = columnDefinitions.reduce((acc, colDef) => {
         if (colDef.isVisible !== void 0) {
@@ -105,7 +105,7 @@ var useDefaultTableStates = ({
 };
 var PAGE_SIZE = 50;
 function useObjectTableData(objectSet, columnDefinitions, filter) {
-  const withProperties = React.useMemo(() => {
+  const withProperties = React5.useMemo(() => {
     if (!columnDefinitions) {
       return;
     }
@@ -139,11 +139,11 @@ function useRowSelection({
   onRowSelection,
   data
 }) {
-  const [internalRowSelection, setInternalRowSelection] = React.useState({});
-  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React.useState(null);
+  const [internalRowSelection, setInternalRowSelection] = React5.useState({});
+  const [lastSelectedRowIndex, setLastSelectedRowIndex] = React5.useState(null);
   const isControlled = selectedRows !== void 0;
   const isSelectionEnabled = selectionMode !== "none";
-  const rowSelectionState = React.useMemo(() => {
+  const rowSelectionState = React5.useMemo(() => {
     if (!isSelectionEnabled) return {};
     if (isControlled && selectedRows) {
       return getRowSelectionState(selectedRows);
@@ -154,7 +154,7 @@ function useRowSelection({
   const totalCount = data?.length ?? 0;
   const isAllSelected = totalCount > 0 && selectedCount === totalCount;
   const hasSelection = selectedCount > 0;
-  const onToggleAll = React.useCallback(() => {
+  const onToggleAll = React5.useCallback(() => {
     if (!isSelectionEnabled || !data) return;
     const newSelectedRows = isAllSelected ? [] : data.map((item) => item.$primaryKey);
     if (!isControlled) {
@@ -162,7 +162,7 @@ function useRowSelection({
     }
     onRowSelection?.(newSelectedRows);
   }, [isSelectionEnabled, data, isAllSelected, isControlled, onRowSelection]);
-  const onToggleRow = React.useCallback((rowId, rowIndex, isShiftClick = false) => {
+  const onToggleRow = React5.useCallback((rowId, rowIndex, isShiftClick = false) => {
     if (!isSelectionEnabled || !data) return;
     let newSelectedRows = [];
     if (selectionMode === "single") {
@@ -284,14 +284,14 @@ function Checkbox({
   indicatorProps,
   ...rest
 }) {
-  return /* @__PURE__ */ React__default.default.createElement(checkbox.Checkbox.Root, _extends({
+  return /* @__PURE__ */ React5__default.default.createElement(checkbox.Checkbox.Root, _extends({
     className: classnames__default.default(Checkbox_default.osdkCheckboxRoot, className),
     indeterminate
-  }, rest), /* @__PURE__ */ React__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
+  }, rest), /* @__PURE__ */ React5__default.default.createElement(checkbox.Checkbox.Indicator, _extends({}, indicatorProps, {
     className: classnames__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
-  }), indeterminate ? /* @__PURE__ */ React__default.default.createElement(icons.Minus, {
+  }), indeterminate ? /* @__PURE__ */ React5__default.default.createElement(icons.Minus, {
     color: "currentColor"
-  }) : /* @__PURE__ */ React__default.default.createElement(icons.Tick, {
+  }) : /* @__PURE__ */ React5__default.default.createElement(icons.Tick, {
     color: "currentColor"
   })));
 }
@@ -302,7 +302,7 @@ function SelectionHeaderCell({
   hasSelection,
   onToggleAll
 }) {
-  return /* @__PURE__ */ React__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React5__default.default.createElement(Checkbox, {
     indeterminate: hasSelection && !isAllSelected,
     checked: isAllSelected,
     onCheckedChange: onToggleAll,
@@ -313,11 +313,11 @@ function SelectionCell({
   row,
   onToggleRow
 }) {
-  const handleClick = React.useCallback((event) => {
+  const handleClick = React5.useCallback((event) => {
     const isShiftClick = event.shiftKey;
     onToggleRow(row.id, row.index, isShiftClick);
   }, [row, onToggleRow]);
-  return /* @__PURE__ */ React__default.default.createElement(Checkbox, {
+  return /* @__PURE__ */ React5__default.default.createElement(Checkbox, {
     checked: row.getIsSelected(),
     onClick: handleClick,
     "aria-label": `Select row ${row.index + 1}`
@@ -333,18 +333,18 @@ var useSelectionColumn = ({
   onToggleAll,
   onToggleRow
 }) => {
-  const selectionColumn = React.useMemo(() => {
+  const selectionColumn = React5.useMemo(() => {
     if (selectionMode === "none") return null;
     return {
       id: SELECTION_COLUMN_ID,
-      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React__default.default.createElement(SelectionHeaderCell, {
+      header: () => selectionMode === "multiple" ? /* @__PURE__ */ React5__default.default.createElement(SelectionHeaderCell, {
         isAllSelected,
         hasSelection,
         onToggleAll
       }) : null,
       cell: ({
         row
-      }) => /* @__PURE__ */ React__default.default.createElement(SelectionCell, {
+      }) => /* @__PURE__ */ React5__default.default.createElement(SelectionCell, {
         row,
         onToggleRow
       }),
@@ -357,14 +357,25 @@ var useSelectionColumn = ({
   }, [selectionMode, isAllSelected, hasSelection, onToggleAll, onToggleRow]);
   return selectionColumn;
 };
+
+// src/object-table/Table.module.css
+var Table_default = {};
+
+// src/object-table/TableBody.module.css
+var TableBody_default = {};
+
+// src/object-table/CellContextMenu.module.css
+var CellContextMenu_default = {};
+
+// src/object-table/CellContextMenu.tsx
 function CellContextMenu({
   cell,
   position,
   onClose,
   renderContent
 }) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
+  const ref = React5.useRef(null);
+  React5.useEffect(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         onClose();
@@ -375,11 +386,10 @@ function CellContextMenu({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [onClose]);
-  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React__default.default.createElement("div", {
+  return /* @__PURE__ */ reactDom.createPortal(/* @__PURE__ */ React5__default.default.createElement("div", {
     ref,
+    className: CellContextMenu_default.osdkCellContextMenu,
     style: {
-      position: "fixed",
-      zIndex: 9999,
       left: position.left,
       top: position.top,
       minWidth: position.width
@@ -389,9 +399,9 @@ function CellContextMenu({
 var useCellContextMenu = ({
   tdRef
 }) => {
-  const [popoverPosition, setPopoverPosition] = React.useState(null);
-  const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
-  const handleOpenContextMenu = React.useCallback((event) => {
+  const [popoverPosition, setPopoverPosition] = React5.useState(null);
+  const [isContextMenuOpen, setIsContextMenuOpen] = React5.useState(false);
+  const handleOpenContextMenu = React5.useCallback((event) => {
     event.preventDefault();
     event.stopPropagation();
     if (tdRef.current) {
@@ -405,7 +415,7 @@ var useCellContextMenu = ({
       setIsContextMenuOpen(true);
     }
   }, [tdRef]);
-  const handleCloseContextMenu = React.useCallback(() => {
+  const handleCloseContextMenu = React5.useCallback(() => {
     setIsContextMenuOpen(false);
     setPopoverPosition(null);
   }, []);
@@ -417,12 +427,15 @@ var useCellContextMenu = ({
   };
 };
 
+// src/object-table/TableCell.module.css
+var TableCell_default = {};
+
 // src/object-table/TableCell.tsx
 function TableCell({
   cell,
   renderCellContextMenu
 }) {
-  const tdRef = React.useRef(null);
+  const tdRef = React5.useRef(null);
   const isSelectColumn = cell.column.id === SELECTION_COLUMN_ID;
   const {
     isContextMenuOpen,
@@ -433,15 +446,16 @@ function TableCell({
     tdRef
   });
   const shouldRenderContextMenu = !isSelectColumn && isContextMenuOpen && !!popoverPosition && !!renderCellContextMenu;
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("td", {
+  return /* @__PURE__ */ React5__default.default.createElement(React5__default.default.Fragment, null, /* @__PURE__ */ React5__default.default.createElement("td", {
     ref: tdRef,
+    className: TableCell_default.osdkTableCell,
     style: {
-      display: "flex",
-      alignItems: "center",
       width: cell.column.getSize()
     },
     onContextMenu: handleOpenContextMenu
-  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())), shouldRenderContextMenu && /* @__PURE__ */ React__default.default.createElement(CellContextMenu, {
+  }, /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: TableCell_default.osdkTableCellContent
+  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))), shouldRenderContextMenu && /* @__PURE__ */ React5__default.default.createElement(CellContextMenu, {
     cell,
     position: popoverPosition,
     onClose: handleCloseContextMenu,
@@ -449,6 +463,9 @@ function TableCell({
   }));
 }
 
+// src/object-table/TableRow.module.css
+var TableRow_default = {};
+
 // src/object-table/TableRow.tsx
 function TableRow({
   row,
@@ -456,18 +473,18 @@ function TableRow({
   onRowClick,
   renderCellContextMenu
 }) {
-  const handleClick = React.useCallback(() => {
+  const handleClick = React5.useCallback(() => {
     onRowClick?.(row.original);
   }, [onRowClick, row.original]);
-  return /* @__PURE__ */ React__default.default.createElement("tr", {
+  return /* @__PURE__ */ React5__default.default.createElement("tr", {
+    "data-selected": row.getIsSelected(),
+    className: TableRow_default.osdkTableRow,
     style: {
-      position: "absolute",
       height: `${virtualRow.size}px`,
-      transform: `translateY(${virtualRow.start}px)`,
-      display: "flex"
+      transform: `translateY(${virtualRow.start}px)`
     },
     onClick: handleClick
-  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React__default.default.createElement(TableCell, {
+  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React5__default.default.createElement(TableCell, {
     key: cell.id,
     cell,
     renderCellContextMenu
@@ -488,18 +505,17 @@ function TableBody({
     getScrollElement: () => tableContainerRef.current,
     overscan: 5
   });
-  React.useLayoutEffect(() => {
+  React5.useLayoutEffect(() => {
     rowVirtualizer.measure();
   }, [rowVirtualizer, rows.length]);
-  return /* @__PURE__ */ React__default.default.createElement("tbody", {
+  return /* @__PURE__ */ React5__default.default.createElement("tbody", {
+    className: TableBody_default.osdkTableBody,
     style: {
-      display: "grid",
-      position: "relative",
       height: `${rowVirtualizer.getTotalSize()}px`
     }
   }, rowVirtualizer.getVirtualItems().map((virtualRow) => {
     const row = rows[virtualRow.index];
-    return /* @__PURE__ */ React__default.default.createElement(TableRow, {
+    return /* @__PURE__ */ React5__default.default.createElement(TableRow, {
       key: row.id,
       row,
       virtualRow,
@@ -508,49 +524,33 @@ function TableBody({
     });
   }));
 }
+
+// src/object-table/TableHeader.module.css
+var TableHeader_default = {};
+
+// src/object-table/TableHeader.tsx
 function TableHeader({
   table
 }) {
-  return /* @__PURE__ */ React__default.default.createElement("thead", {
-    style: {
-      display: "grid",
-      position: "sticky",
-      top: 0,
-      zIndex: 1
-    }
-  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React__default.default.createElement("tr", {
+  const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;
+  return /* @__PURE__ */ React5__default.default.createElement("thead", {
+    className: TableHeader_default.osdkTableHeader,
+    "data-resizing": isResizing
+  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React5__default.default.createElement("tr", {
     key: headerGroup.id,
+    className: TableHeader_default.osdkTableHeaderRow
+  }, headerGroup.headers.map((header) => /* @__PURE__ */ React5__default.default.createElement("th", {
+    key: header.id,
+    className: TableHeader_default.osdkTableHeaderCell,
     style: {
-      display: "flex"
+      width: header.getSize()
     }
-  }, headerGroup.headers.map((header) => (
-    // TODO: Move inline styling to CSS file
-    /* @__PURE__ */ React__default.default.createElement("th", {
-      key: header.id,
-      style: {
-        display: "flex",
-        width: header.getSize(),
-        justifyContent: "flex-start",
-        alignItems: "center",
-        position: "relative"
-      }
-    }, header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanResize() && /* @__PURE__ */ React__default.default.createElement("div", {
-      onDoubleClick: () => header.column.resetSize(),
-      onMouseDown: header.getResizeHandler(),
-      onTouchStart: header.getResizeHandler(),
-      style: {
-        position: "absolute",
-        right: 0,
-        top: 0,
-        height: "100%",
-        width: "3px",
-        cursor: "col-resize",
-        touchAction: "none",
-        zIndex: 11,
-        transform: header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset ?? 0}px)` : ""
-      }
-    }))
-  )))));
+  }, header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanResize() && /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: TableHeader_default.osdkTableHeaderResizer,
+    onDoubleClick: () => header.column.resetSize(),
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler()
+  }))))));
 }
 
 // src/object-table/Table.tsx
@@ -560,11 +560,12 @@ function Table({
   fetchNextPage,
   onRowClick,
   rowHeight,
-  renderCellContextMenu
+  renderCellContextMenu,
+  className
 }) {
-  const tableContainerRef = React.useRef(null);
-  const fetchingRef = React.useRef(false);
-  const fetchMoreOnEndReached = React.useCallback(async (containerRefElement) => {
+  const tableContainerRef = React5.useRef(null);
+  const fetchingRef = React5.useRef(false);
+  const fetchMoreOnEndReached = React5.useCallback(async (containerRefElement) => {
     if (containerRefElement && !fetchingRef.current) {
       const {
         scrollHeight,
@@ -581,28 +582,16 @@ function Table({
       }
     }
   }, [fetchNextPage, isLoading]);
-  const handleScroll = React.useCallback(async (e) => {
+  const handleScroll = React5.useCallback(async (e) => {
     await fetchMoreOnEndReached(e.currentTarget);
   }, [fetchMoreOnEndReached]);
-  return /* @__PURE__ */ React__default.default.createElement("div", {
+  return /* @__PURE__ */ React5__default.default.createElement("div", {
     ref: tableContainerRef,
-    style: {
-      position: "relative",
-      // needed for sticky header
-      height: "100%",
-      // needed for scrolling
-      overflow: "auto",
-      cursor: table.getState().columnSizingInfo?.isResizingColumn ? "col-resize" : "default",
-      userSelect: table.getState().columnSizingInfo?.isResizingColumn ? "none" : "auto"
-    },
+    className: classnames__default.default(Table_default.osdkTableContainer, className),
     onScroll: handleScroll
-  }, /* @__PURE__ */ React__default.default.createElement("table", {
-    style: {
-      display: "grid"
-    }
-  }, /* @__PURE__ */ React__default.default.createElement(TableHeader, {
+  }, /* @__PURE__ */ React5__default.default.createElement("table", null, /* @__PURE__ */ React5__default.default.createElement(TableHeader, {
     table
-  }), /* @__PURE__ */ React__default.default.createElement(TableBody, {
+  }), /* @__PURE__ */ React5__default.default.createElement(TableBody, {
     rows: table.getRowModel().rows,
     tableContainerRef,
     onRowClick,
@@ -637,7 +626,7 @@ function ObjectTable({
   } = useDefaultTableStates({
     columnDefinitions
   });
-  const [columnSizing, setColumnSizing] = React.useState({});
+  const [columnSizing, setColumnSizing] = React5.useState({});
   const {
     rowSelection,
     isAllSelected,
@@ -657,7 +646,7 @@ function ObjectTable({
     onToggleAll,
     onToggleRow
   });
-  const allColumns = React.useMemo(() => {
+  const allColumns = React5.useMemo(() => {
     return selectionColumn ? [selectionColumn, ...columns] : columns;
   }, [selectionColumn, columns]);
   const table = reactTable.useReactTable({
@@ -678,17 +667,18 @@ function ObjectTable({
     },
     getRowId
   });
-  const onRenderCellContextMenu = React.useCallback((row, cell) => {
+  const onRenderCellContextMenu = React5.useCallback((row, cell) => {
     return renderCellContextMenu?.(row, cell.getValue());
   }, [renderCellContextMenu]);
   const isTableLoading = isLoading || isColumnsLoading;
-  return /* @__PURE__ */ React__default.default.createElement(Table, {
+  return /* @__PURE__ */ React5__default.default.createElement(Table, {
     table,
     isLoading: isTableLoading,
     fetchNextPage: fetchMore,
     onRowClick: props.onRowClick,
     rowHeight: props.rowHeight,
-    renderCellContextMenu: onRenderCellContextMenu
+    renderCellContextMenu: onRenderCellContextMenu,
+    className: props.className
   });
 }