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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +39 -22
  3. package/build/browser/object-table/DefaultCellRenderer.js +43 -0
  4. package/build/browser/object-table/DefaultCellRenderer.js.map +1 -0
  5. package/build/browser/object-table/EditableCell.js +91 -0
  6. package/build/browser/object-table/EditableCell.js.map +1 -0
  7. package/build/browser/object-table/EditableCell.module.css +3 -0
  8. package/build/browser/object-table/EditableCell.module.css.js +6 -0
  9. package/build/browser/object-table/ObjectTable.js +29 -2
  10. package/build/browser/object-table/ObjectTable.js.map +1 -1
  11. package/build/browser/object-table/ObjectTableApi.js.map +1 -1
  12. package/build/browser/object-table/Table.js +18 -3
  13. package/build/browser/object-table/Table.js.map +1 -1
  14. package/build/browser/object-table/Table.module.css +17 -1
  15. package/build/browser/object-table/Table.module.css.js +3 -1
  16. package/build/browser/object-table/TableBody.module.css +2 -0
  17. package/build/browser/object-table/TableCell.module.css +11 -1
  18. package/build/browser/object-table/TableHeader.module.css +4 -2
  19. package/build/browser/object-table/TableRow.module.css +2 -0
  20. package/build/browser/object-table/__tests__/useEditableTable.test.js +197 -0
  21. package/build/browser/object-table/__tests__/useEditableTable.test.js.map +1 -0
  22. package/build/browser/object-table/hooks/__tests__/useColumnDefs.test.js +13 -1
  23. package/build/browser/object-table/hooks/__tests__/useColumnDefs.test.js.map +1 -1
  24. package/build/browser/object-table/hooks/useColumnDefs.js +10 -2
  25. package/build/browser/object-table/hooks/useColumnDefs.js.map +1 -1
  26. package/build/browser/object-table/hooks/useEditableTable.js +57 -0
  27. package/build/browser/object-table/hooks/useEditableTable.js.map +1 -0
  28. package/build/browser/object-table/utils/getCellId.js +27 -0
  29. package/build/browser/object-table/utils/getCellId.js.map +1 -0
  30. package/build/browser/object-table/utils/types.js.map +1 -1
  31. package/build/browser/public/experimental.js.map +1 -1
  32. package/build/browser/styles.css +42 -4
  33. package/build/cjs/public/experimental.cjs +485 -289
  34. package/build/cjs/public/experimental.cjs.map +1 -1
  35. package/build/cjs/public/experimental.css +78 -48
  36. package/build/cjs/public/experimental.css.map +1 -1
  37. package/build/cjs/public/experimental.d.cts +44 -10
  38. package/build/esm/object-table/DefaultCellRenderer.js +43 -0
  39. package/build/esm/object-table/DefaultCellRenderer.js.map +1 -0
  40. package/build/esm/object-table/EditableCell.js +91 -0
  41. package/build/esm/object-table/EditableCell.js.map +1 -0
  42. package/build/esm/object-table/EditableCell.module.css +3 -0
  43. package/build/esm/object-table/ObjectTable.js +29 -2
  44. package/build/esm/object-table/ObjectTable.js.map +1 -1
  45. package/build/esm/object-table/ObjectTableApi.js.map +1 -1
  46. package/build/esm/object-table/Table.js +18 -3
  47. package/build/esm/object-table/Table.js.map +1 -1
  48. package/build/esm/object-table/Table.module.css +17 -1
  49. package/build/esm/object-table/TableBody.module.css +2 -0
  50. package/build/esm/object-table/TableCell.module.css +11 -1
  51. package/build/esm/object-table/TableHeader.module.css +4 -2
  52. package/build/esm/object-table/TableRow.module.css +2 -0
  53. package/build/esm/object-table/__tests__/useEditableTable.test.js +197 -0
  54. package/build/esm/object-table/__tests__/useEditableTable.test.js.map +1 -0
  55. package/build/esm/object-table/hooks/__tests__/useColumnDefs.test.js +13 -1
  56. package/build/esm/object-table/hooks/__tests__/useColumnDefs.test.js.map +1 -1
  57. package/build/esm/object-table/hooks/useColumnDefs.js +10 -2
  58. package/build/esm/object-table/hooks/useColumnDefs.js.map +1 -1
  59. package/build/esm/object-table/hooks/useEditableTable.js +57 -0
  60. package/build/esm/object-table/hooks/useEditableTable.js.map +1 -0
  61. package/build/esm/object-table/utils/getCellId.js +27 -0
  62. package/build/esm/object-table/utils/getCellId.js.map +1 -0
  63. package/build/esm/object-table/utils/types.js.map +1 -1
  64. package/build/esm/public/experimental.js.map +1 -1
  65. package/build/types/object-table/DefaultCellRenderer.d.ts +3 -0
  66. package/build/types/object-table/DefaultCellRenderer.d.ts.map +1 -0
  67. package/build/types/object-table/EditableCell.d.ts +10 -0
  68. package/build/types/object-table/EditableCell.d.ts.map +1 -0
  69. package/build/types/object-table/ObjectTable.d.ts +1 -1
  70. package/build/types/object-table/ObjectTable.d.ts.map +1 -1
  71. package/build/types/object-table/ObjectTableApi.d.ts +15 -0
  72. package/build/types/object-table/ObjectTableApi.d.ts.map +1 -1
  73. package/build/types/object-table/Table.d.ts +17 -3
  74. package/build/types/object-table/Table.d.ts.map +1 -1
  75. package/build/types/object-table/__tests__/useEditableTable.test.d.ts +1 -0
  76. package/build/types/object-table/__tests__/useEditableTable.test.d.ts.map +1 -0
  77. package/build/types/object-table/hooks/useColumnDefs.d.ts.map +1 -1
  78. package/build/types/object-table/hooks/useEditableTable.d.ts +22 -0
  79. package/build/types/object-table/hooks/useEditableTable.d.ts.map +1 -0
  80. package/build/types/object-table/utils/getCellId.d.ts +3 -0
  81. package/build/types/object-table/utils/getCellId.d.ts.map +1 -0
  82. package/build/types/object-table/utils/types.d.ts +9 -0
  83. package/build/types/object-table/utils/types.d.ts.map +1 -1
  84. package/build/types/public/experimental.d.ts +1 -0
  85. package/build/types/public/experimental.d.ts.map +1 -1
  86. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @osdk/react-components
2
2
 
3
+ ## 0.2.0-beta.4
4
+
5
+ ### Minor Changes
6
+
7
+ - 9c54ee5: Support editable cell
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [4cd7389]
12
+ - @osdk/client@2.8.0-beta.7
13
+ - @osdk/api@2.8.0-beta.7
14
+ - @osdk/react@0.10.0-beta.4
15
+
3
16
  ## 0.2.0-beta.3
4
17
 
5
18
  ### Minor Changes
package/README.md CHANGED
@@ -23,24 +23,42 @@ The following peer dependencies are required:
23
23
  npm install react react-dom classnames @osdk/react @osdk/client @osdk/api
24
24
  ```
25
25
 
26
- - `react` and `react-dom` - React 17, 18, or 19
26
+ - `react`, `@types/react`, `react-dom` - React 17, 18, or 19
27
27
  - `classnames` - Utility for conditionally joining CSS class names
28
28
  - `@osdk/react`, `@osdk/api`, `@osdk/client` - The packages required for data-handling
29
29
 
30
- For TypeScript users, also install `@types/react`.
31
-
32
30
  **Prerequisites:**
33
31
 
34
32
  - A configured OSDK client
35
- - An OsdkProvider wrapping your application
33
+ - An OsdkProvider2 wrapping your application
36
34
 
37
35
  ## Setup
38
36
 
37
+ ### App Setup
38
+
39
+ **REQUIRED:** Wrap app with OsdkProvider2:
40
+
41
+ ```tsx
42
+ import { createClient } from "@osdk/client";
43
+ import { OsdkProvider2 } from "@osdk/react/experimental";
44
+
45
+ const client = createClient(/* config */);
46
+
47
+ function App() {
48
+ return <OsdkProvider2 client={client}>{/* components */}</OsdkProvider2>;
49
+ }
50
+ ```
51
+
52
+ ### CSS Setup
53
+
39
54
  Add this to your application's entry css file (e.g., `index.css` or `index.scss`):
40
55
 
41
56
  ```css
42
57
  /* index.css */
43
- @import "@osdk/react-components/styles.css";
58
+ @layer osdk.components, osdk.tokens;
59
+
60
+ @import "@osdk/react-components/styles.css" layer(osdk.components);
61
+ @import "@osdk/react-components-styles" layer(osdk.tokens);
44
62
 
45
63
  .root {
46
64
  isolation: isolate;
@@ -49,17 +67,19 @@ Add this to your application's entry css file (e.g., `index.css` or `index.scss`
49
67
 
50
68
  The `.root` isolation is required for Base UI portals. See https://base-ui.com/react/overview/quick-start#portals
51
69
 
70
+ Using `@layer` ensures proper CSS cascade ordering - component styles are loaded before token styles, allowing tokens to override component defaults when needed.
71
+
52
72
  ## Components
53
73
 
54
74
  > **Note:** This package is under active development. Not all components listed below are available yet.
55
75
 
56
76
  The components that this package will provide are:
57
77
 
58
- | Component | Description |
59
- | ------------- | ---------------------------------------------------------------------------------- |
60
- | `ObjectTable` | Displays an Object Set as a sortable, paginated table |
61
- | `FilterList` | Visualize a high-level summary of objects data to allow users to filter that data. |
62
- | `ActionForm` | Auto-generated form for executing Ontology Actions |
78
+ | Component | Description | Documentation |
79
+ | ------------- | ---------------------------------------------------------------------------------- | ------------------------------ |
80
+ | `ObjectTable` | Displays an Object Set as a sortable, paginated table | [Guide](./docs/ObjectTable.md) |
81
+ | `FilterList` | Visualize a high-level summary of objects data to allow users to filter that data. | - |
82
+ | `ActionForm` | Auto-generated form for executing Ontology Actions | - |
63
83
 
64
84
  ## Custom Styling
65
85
 
@@ -82,27 +102,24 @@ function EmployeeDirectory() {
82
102
  }
83
103
  ```
84
104
 
105
+ ## Development Workflow
106
+
107
+ 1. In packages/react-components, run `pnpm install` to install the dependencies.
108
+ 2. Run `pnpm transpileAllDeps` to transpile all dependencies in this repo.
109
+ 3. To run tests, run `pnpm test`
110
+
85
111
  ### Running the Example People App
86
112
 
87
113
  The examples are added to `packages/e2e.sandbox.peopleapp`, so we need to run the example app.
88
114
 
89
115
  #### Steps:
90
116
 
91
- 1. Create a .env.local file with the content below in packages/e2e.sandbox.peopleapp:
92
-
93
- ```
94
- VITE_FOUNDRY_URL=https://swirl.palantirfoundry.com
95
- VITE_FOUNDRY_CLIENT_ID=<insert_client_id>
96
- VITE_FOUNDRY_CLIENT_SECRET=<insert_token>
97
- VITE_FOUNDRY_REDIRECT_URL=http://localhost:8080/auth/callback
98
- ```
99
-
100
- 2. Get VITE_FOUNDRY_CLIENT_ID from "https://swirl.palantirfoundry.com/workspace/developer-console/app/ri.third-party-applications.main.application.91b973ac-e504-4322-95b4-4962b60495fe/oauth" under App Credentials > Client ID.
117
+ 1. Create a .env.local file based on `.env.local.sample` in packages/e2e.sandbox.peopleapp:
101
118
 
102
- 3. Transpile @osdk/react-components and its dependencies
119
+ 2. Transpile all dependencies of peopleapp
103
120
 
104
121
  ```
105
- pnpm --filter @osdk/react-components transpileAllDeps && pnpm --filter @osdk/react-components transpileBrowser
122
+ pnpm --filter @osdk/e2e.sandbox.peopleapp transpileAllDeps
106
123
  ```
107
124
 
108
125
  4. Run the people app
@@ -0,0 +1,43 @@
1
+ /*
2
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+
17
+ import React from "react";
18
+ import { EditableCell } from "./EditableCell.js";
19
+ import { getCellId } from "./utils/getCellId.js";
20
+ export function renderDefaultCell(cellContext) {
21
+ const meta = cellContext.table.options.meta;
22
+ const columnMeta = cellContext.column.columnDef.meta;
23
+ if (!columnMeta?.editable || !meta?.onCellEdit) {
24
+ return cellContext.getValue();
25
+ }
26
+ const rowId = cellContext.row.id;
27
+ const columnId = cellContext.column.id;
28
+ const cellId = getCellId({
29
+ rowId,
30
+ columnId
31
+ });
32
+ const cellEdits = meta.cellEdits;
33
+ const editedValue = cellEdits?.[cellId];
34
+ const currentValue = editedValue?.newValue ?? cellContext.getValue();
35
+ return /*#__PURE__*/React.createElement(EditableCell, {
36
+ initialValue: cellContext.getValue(),
37
+ currentValue: currentValue,
38
+ cellId: cellId,
39
+ dataType: columnMeta?.dataType,
40
+ onCellEdit: meta.onCellEdit
41
+ });
42
+ }
43
+ //# sourceMappingURL=DefaultCellRenderer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DefaultCellRenderer.js","names":["React","EditableCell","getCellId","renderDefaultCell","cellContext","meta","table","options","columnMeta","column","columnDef","editable","onCellEdit","getValue","rowId","row","id","columnId","cellId","cellEdits","editedValue","currentValue","newValue","createElement","initialValue","dataType"],"sources":["DefaultCellRenderer.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 { CellContext } from \"@tanstack/react-table\";\nimport React from \"react\";\nimport { EditableCell } from \"./EditableCell.js\";\nimport { getCellId } from \"./utils/getCellId.js\";\n\nexport function renderDefaultCell<TData>(\n cellContext: CellContext<TData, unknown>,\n): React.ReactNode {\n const meta = cellContext.table.options.meta;\n const columnMeta = cellContext.column.columnDef.meta;\n\n if (!columnMeta?.editable || !meta?.onCellEdit) {\n return cellContext.getValue() as React.ReactNode;\n }\n\n const rowId = cellContext.row.id;\n const columnId = cellContext.column.id;\n const cellId = getCellId({ rowId, columnId });\n\n const cellEdits = meta.cellEdits;\n const editedValue = cellEdits?.[cellId];\n const currentValue = editedValue?.newValue ?? cellContext.getValue();\n\n return (\n <EditableCell\n initialValue={cellContext.getValue()}\n currentValue={currentValue}\n cellId={cellId}\n dataType={columnMeta?.dataType}\n onCellEdit={meta.onCellEdit}\n />\n );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,SAAS,QAAQ,sBAAsB;AAEhD,OAAO,SAASC,iBAAiBA,CAC/BC,WAAwC,EACvB;EACjB,MAAMC,IAAI,GAAGD,WAAW,CAACE,KAAK,CAACC,OAAO,CAACF,IAAI;EAC3C,MAAMG,UAAU,GAAGJ,WAAW,CAACK,MAAM,CAACC,SAAS,CAACL,IAAI;EAEpD,IAAI,CAACG,UAAU,EAAEG,QAAQ,IAAI,CAACN,IAAI,EAAEO,UAAU,EAAE;IAC9C,OAAOR,WAAW,CAACS,QAAQ,CAAC,CAAC;EAC/B;EAEA,MAAMC,KAAK,GAAGV,WAAW,CAACW,GAAG,CAACC,EAAE;EAChC,MAAMC,QAAQ,GAAGb,WAAW,CAACK,MAAM,CAACO,EAAE;EACtC,MAAME,MAAM,GAAGhB,SAAS,CAAC;IAAEY,KAAK;IAAEG;EAAS,CAAC,CAAC;EAE7C,MAAME,SAAS,GAAGd,IAAI,CAACc,SAAS;EAChC,MAAMC,WAAW,GAAGD,SAAS,GAAGD,MAAM,CAAC;EACvC,MAAMG,YAAY,GAAGD,WAAW,EAAEE,QAAQ,IAAIlB,WAAW,CAACS,QAAQ,CAAC,CAAC;EAEpE,oBACEb,KAAA,CAAAuB,aAAA,CAACtB,YAAY;IACXuB,YAAY,EAAEpB,WAAW,CAACS,QAAQ,CAAC,CAAE;IACrCQ,YAAY,EAAEA,YAAa;IAC3BH,MAAM,EAAEA,MAAO;IACfO,QAAQ,EAAEjB,UAAU,EAAEiB,QAAS;IAC/Bb,UAAU,EAAEP,IAAI,CAACO;EAAW,CAC7B,CAAC;AAEN","ignoreList":[]}
@@ -0,0 +1,91 @@
1
+ /*
2
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+
17
+ import { Input } from "@base-ui/react/input";
18
+ import React, { useCallback, useEffect, useRef, useState } from "react";
19
+ import styles from "./EditableCell.module.css.js";
20
+ const NUMBER_TYPES = ["double", "integer", "long", "float", "decimal", "byte", "short"];
21
+ function valueToString(value) {
22
+ if (value == null) {
23
+ return "";
24
+ }
25
+ if (typeof value === "object") {
26
+ return JSON.stringify(value);
27
+ }
28
+ // At this point, value is a primitive (string, number, boolean, symbol, bigint)
29
+ return String(value);
30
+ }
31
+ function parseValueByType(value, dataType) {
32
+ if (!dataType || !NUMBER_TYPES.includes(dataType)) {
33
+ return value;
34
+ }
35
+ if (value === "") {
36
+ return null;
37
+ }
38
+ const parsedNumber = Number(value);
39
+ if (isNaN(parsedNumber)) {
40
+ return value;
41
+ }
42
+ return parsedNumber;
43
+ }
44
+ export function EditableCell({
45
+ initialValue,
46
+ currentValue,
47
+ cellId,
48
+ dataType,
49
+ onCellEdit
50
+ }) {
51
+ const [value, setValue] = useState(valueToString(currentValue));
52
+ const isCancelled = useRef(false);
53
+ useEffect(() => {
54
+ setValue(valueToString(currentValue));
55
+ }, [currentValue]);
56
+ const handleBlur = useCallback(() => {
57
+ // Do not commit the edit if it was cancelled with Escape key
58
+ if (isCancelled.current) {
59
+ isCancelled.current = false;
60
+ return;
61
+ }
62
+ const parsedValue = parseValueByType(value, dataType);
63
+ onCellEdit?.(cellId, {
64
+ newValue: parsedValue,
65
+ oldValue: initialValue
66
+ });
67
+ }, [value, initialValue, onCellEdit, cellId, dataType]);
68
+ const handleChange = useCallback(value => {
69
+ setValue(value);
70
+ }, []);
71
+ const handleKeyDown = useCallback(e => {
72
+ if (e.key === "Enter") {
73
+ e.currentTarget.blur();
74
+ }
75
+ if (e.key === "Escape") {
76
+ isCancelled.current = true;
77
+ setValue(valueToString(currentValue));
78
+ e.currentTarget.blur();
79
+ }
80
+ }, [currentValue]);
81
+ const inputType = dataType && NUMBER_TYPES.includes(dataType) ? "number" : "text";
82
+ return /*#__PURE__*/React.createElement(Input, {
83
+ className: styles.osdkEditableInput,
84
+ type: inputType,
85
+ value: value,
86
+ onValueChange: handleChange,
87
+ onBlur: handleBlur,
88
+ onKeyDown: handleKeyDown
89
+ });
90
+ }
91
+ //# sourceMappingURL=EditableCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EditableCell.js","names":["Input","React","useCallback","useEffect","useRef","useState","styles","NUMBER_TYPES","valueToString","value","JSON","stringify","String","parseValueByType","dataType","includes","parsedNumber","Number","isNaN","EditableCell","initialValue","currentValue","cellId","onCellEdit","setValue","isCancelled","handleBlur","current","parsedValue","newValue","oldValue","handleChange","handleKeyDown","e","key","currentTarget","blur","inputType","createElement","className","osdkEditableInput","type","onValueChange","onBlur","onKeyDown"],"sources":["EditableCell.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 { Input } from \"@base-ui/react/input\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport styles from \"./EditableCell.module.css\";\nimport type { CellValueState } from \"./utils/types.js\";\n\nexport interface EditableCellProps {\n initialValue: unknown;\n currentValue: unknown;\n cellId: string;\n dataType?: string;\n onCellEdit?: (cellId: string, state: CellValueState) => void;\n}\n\nconst NUMBER_TYPES: string[] = [\n \"double\",\n \"integer\",\n \"long\",\n \"float\",\n \"decimal\",\n \"byte\",\n \"short\",\n];\n\nfunction valueToString(value: unknown): string {\n if (value == null) {\n return \"\";\n }\n if (typeof value === \"object\") {\n return JSON.stringify(value);\n }\n // At this point, value is a primitive (string, number, boolean, symbol, bigint)\n return String(value as string | number | boolean | symbol | bigint);\n}\n\nfunction parseValueByType(\n value: string,\n dataType?: string,\n): unknown {\n if (!dataType || !NUMBER_TYPES.includes(dataType)) {\n return value;\n }\n\n if (value === \"\") {\n return null;\n }\n\n const parsedNumber = Number(value);\n\n if (isNaN(parsedNumber)) {\n return value;\n }\n\n return parsedNumber;\n}\n\nexport function EditableCell({\n initialValue,\n currentValue,\n cellId,\n dataType,\n onCellEdit,\n}: EditableCellProps): React.ReactElement {\n const [value, setValue] = useState<string>(valueToString(currentValue));\n const isCancelled = useRef(false);\n\n useEffect(() => {\n setValue(valueToString(currentValue));\n }, [currentValue]);\n\n const handleBlur = useCallback(() => {\n // Do not commit the edit if it was cancelled with Escape key\n if (isCancelled.current) {\n isCancelled.current = false;\n return;\n }\n const parsedValue = parseValueByType(value, dataType);\n onCellEdit?.(cellId, { newValue: parsedValue, oldValue: initialValue });\n }, [value, initialValue, onCellEdit, cellId, dataType]);\n\n const handleChange = useCallback((value: string) => {\n setValue(value);\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Enter\") {\n e.currentTarget.blur();\n }\n if (e.key === \"Escape\") {\n isCancelled.current = true;\n setValue(valueToString(currentValue));\n e.currentTarget.blur();\n }\n },\n [currentValue],\n );\n\n const inputType = dataType && NUMBER_TYPES.includes(dataType)\n ? \"number\"\n : \"text\";\n\n return (\n <Input\n className={styles.osdkEditableInput}\n type={inputType}\n value={value}\n onValueChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n />\n );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACvE,OAAOC,MAAM,MAAM,2BAA2B;AAW9C,MAAMC,YAAsB,GAAG,CAC7B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,SAAS,EACT,MAAM,EACN,OAAO,CACR;AAED,SAASC,aAAaA,CAACC,KAAc,EAAU;EAC7C,IAAIA,KAAK,IAAI,IAAI,EAAE;IACjB,OAAO,EAAE;EACX;EACA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC7B,OAAOC,IAAI,CAACC,SAAS,CAACF,KAAK,CAAC;EAC9B;EACA;EACA,OAAOG,MAAM,CAACH,KAAoD,CAAC;AACrE;AAEA,SAASI,gBAAgBA,CACvBJ,KAAa,EACbK,QAAiB,EACR;EACT,IAAI,CAACA,QAAQ,IAAI,CAACP,YAAY,CAACQ,QAAQ,CAACD,QAAQ,CAAC,EAAE;IACjD,OAAOL,KAAK;EACd;EAEA,IAAIA,KAAK,KAAK,EAAE,EAAE;IAChB,OAAO,IAAI;EACb;EAEA,MAAMO,YAAY,GAAGC,MAAM,CAACR,KAAK,CAAC;EAElC,IAAIS,KAAK,CAACF,YAAY,CAAC,EAAE;IACvB,OAAOP,KAAK;EACd;EAEA,OAAOO,YAAY;AACrB;AAEA,OAAO,SAASG,YAAYA,CAAC;EAC3BC,YAAY;EACZC,YAAY;EACZC,MAAM;EACNR,QAAQ;EACRS;AACiB,CAAC,EAAsB;EACxC,MAAM,CAACd,KAAK,EAAEe,QAAQ,CAAC,GAAGnB,QAAQ,CAASG,aAAa,CAACa,YAAY,CAAC,CAAC;EACvE,MAAMI,WAAW,GAAGrB,MAAM,CAAC,KAAK,CAAC;EAEjCD,SAAS,CAAC,MAAM;IACdqB,QAAQ,CAAChB,aAAa,CAACa,YAAY,CAAC,CAAC;EACvC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMK,UAAU,GAAGxB,WAAW,CAAC,MAAM;IACnC;IACA,IAAIuB,WAAW,CAACE,OAAO,EAAE;MACvBF,WAAW,CAACE,OAAO,GAAG,KAAK;MAC3B;IACF;IACA,MAAMC,WAAW,GAAGf,gBAAgB,CAACJ,KAAK,EAAEK,QAAQ,CAAC;IACrDS,UAAU,GAAGD,MAAM,EAAE;MAAEO,QAAQ,EAAED,WAAW;MAAEE,QAAQ,EAAEV;IAAa,CAAC,CAAC;EACzE,CAAC,EAAE,CAACX,KAAK,EAAEW,YAAY,EAAEG,UAAU,EAAED,MAAM,EAAER,QAAQ,CAAC,CAAC;EAEvD,MAAMiB,YAAY,GAAG7B,WAAW,CAAEO,KAAa,IAAK;IAClDe,QAAQ,CAACf,KAAK,CAAC;EACjB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMuB,aAAa,GAAG9B,WAAW,CAC9B+B,CAAwC,IAAK;IAC5C,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrBD,CAAC,CAACE,aAAa,CAACC,IAAI,CAAC,CAAC;IACxB;IACA,IAAIH,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE;MACtBT,WAAW,CAACE,OAAO,GAAG,IAAI;MAC1BH,QAAQ,CAAChB,aAAa,CAACa,YAAY,CAAC,CAAC;MACrCY,CAAC,CAACE,aAAa,CAACC,IAAI,CAAC,CAAC;IACxB;EACF,CAAC,EACD,CAACf,YAAY,CACf,CAAC;EAED,MAAMgB,SAAS,GAAGvB,QAAQ,IAAIP,YAAY,CAACQ,QAAQ,CAACD,QAAQ,CAAC,GACzD,QAAQ,GACR,MAAM;EAEV,oBACEb,KAAA,CAAAqC,aAAA,CAACtC,KAAK;IACJuC,SAAS,EAAEjC,MAAM,CAACkC,iBAAkB;IACpCC,IAAI,EAAEJ,SAAU;IAChB5B,KAAK,EAAEA,KAAM;IACbiC,aAAa,EAAEX,YAAa;IAC5BY,MAAM,EAAEjB,UAAW;IACnBkB,SAAS,EAAEZ;EAAc,CAC1B,CAAC;AAEN","ignoreList":[]}
@@ -0,0 +1,3 @@
1
+ .osdkEditableInput:focus {
2
+ outline: none;
3
+ }
@@ -0,0 +1,6 @@
1
+ // CSS Module proxy for EditableCell.module.css
2
+ const styles = {
3
+ "osdkEditableInput": "EditableCell-module__osdkEditableInput___2BjN5Q4P"
4
+ };
5
+
6
+ export default styles;
@@ -20,6 +20,7 @@ import { useColumnDefs } from "./hooks/useColumnDefs.js";
20
20
  import { useColumnPinning } from "./hooks/useColumnPinning.js";
21
21
  import { useColumnResize } from "./hooks/useColumnResize.js";
22
22
  import { useColumnVisibility } from "./hooks/useColumnVisibility.js";
23
+ import { useEditableTable } from "./hooks/useEditableTable.js";
23
24
  import { useObjectTableData } from "./hooks/useObjectTableData.js";
24
25
  import { useRowSelection } from "./hooks/useRowSelection.js";
25
26
  import { useSelectionColumn } from "./hooks/useSelectionColumn.js";
@@ -50,6 +51,8 @@ export function ObjectTable({
50
51
  selectionMode = "none",
51
52
  selectedRows,
52
53
  onColumnVisibilityChanged,
54
+ onCellValueChanged,
55
+ onSubmitEdits,
53
56
  enableOrdering = true,
54
57
  enableColumnPinning = true,
55
58
  enableColumnResizing = true,
@@ -62,6 +65,15 @@ export function ObjectTable({
62
65
  } = useColumnResize({
63
66
  onColumnResize
64
67
  });
68
+ const {
69
+ cellEdits,
70
+ clearEdits,
71
+ handleCellEdit,
72
+ handleSubmitEdits
73
+ } = useEditableTable({
74
+ onCellValueChanged,
75
+ onSubmitEdits
76
+ });
65
77
  const {
66
78
  sorting,
67
79
  onSortingChange
@@ -146,7 +158,11 @@ export function ObjectTable({
146
158
  defaultColumn: {
147
159
  minSize: 80
148
160
  },
149
- getRowId
161
+ getRowId,
162
+ meta: {
163
+ onCellEdit: handleCellEdit,
164
+ cellEdits
165
+ }
150
166
  });
151
167
  const onRenderCellContextMenu = useCallback((row, cell) => {
152
168
  return renderCellContextMenu?.(row, cell.getValue());
@@ -157,6 +173,16 @@ export function ObjectTable({
157
173
  showResizeItem: enableColumnResizing,
158
174
  showConfigItem: enableColumnConfig
159
175
  }), [enableOrdering, enableColumnPinning, enableColumnResizing, enableColumnConfig]);
176
+ const editableConfig = useMemo(() => {
177
+ if (!onSubmitEdits) {
178
+ return;
179
+ }
180
+ return {
181
+ onSubmitEdits: handleSubmitEdits,
182
+ clearEdits,
183
+ cellEdits
184
+ };
185
+ }, [onSubmitEdits, handleSubmitEdits, clearEdits, cellEdits]);
160
186
  return /*#__PURE__*/React.createElement(BaseTable, {
161
187
  table: table,
162
188
  isLoading: isLoading || isColumnsLoading,
@@ -166,7 +192,8 @@ export function ObjectTable({
166
192
  renderCellContextMenu: onRenderCellContextMenu,
167
193
  className: props.className,
168
194
  error: error,
169
- headerMenuFeatureFlags: headerMenuFeatureFlags
195
+ headerMenuFeatureFlags: headerMenuFeatureFlags,
196
+ editableConfig: editableConfig
170
197
  });
171
198
  }
172
199
  //# sourceMappingURL=ObjectTable.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ObjectTable.js","names":["getCoreRowModel","useReactTable","React","useCallback","useMemo","useColumnDefs","useColumnPinning","useColumnResize","useColumnVisibility","useObjectTableData","useRowSelection","useSelectionColumn","useTableSorting","BaseTable","getRowId","ObjectTable","objectType","columnDefinitions","filter","orderBy","defaultOrderBy","onOrderByChanged","onColumnsPinnedChanged","onColumnResize","onRowSelection","renderCellContextMenu","selectionMode","selectedRows","onColumnVisibilityChanged","enableOrdering","enableColumnPinning","enableColumnResizing","enableColumnConfig","props","columnSizing","onColumnSizingChange","sorting","onSortingChange","data","fetchMore","isLoading","error","columns","loading","isColumnsLoading","rowSelection","isAllSelected","hasSelection","onToggleAll","onToggleRow","enableRowSelection","selectionColumn","columnVisibility","onColumnVisibilityChange","columnOrder","onColumnOrderChange","allColumns","columnPinning","onColumnPinningChange","hasSelectionColumn","table","state","enableSorting","columnResizeMode","columnResizeDirection","manualSorting","defaultColumn","minSize","onRenderCellContextMenu","row","cell","getValue","headerMenuFeatureFlags","showSortingItems","showPinningItems","showResizeItem","showConfigItem","createElement","fetchNextPage","onRowClick","rowHeight","className"],"sources":["ObjectTable.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 {\n ObjectOrInterfaceDefinition,\n Osdk,\n PropertyKeys,\n QueryDefinition,\n SimplePropertyDef,\n} from \"@osdk/api\";\nimport type { Cell } from \"@tanstack/react-table\";\nimport { getCoreRowModel, useReactTable } from \"@tanstack/react-table\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { useColumnDefs } from \"./hooks/useColumnDefs.js\";\nimport { useColumnPinning } from \"./hooks/useColumnPinning.js\";\nimport { useColumnResize } from \"./hooks/useColumnResize.js\";\nimport { useColumnVisibility } from \"./hooks/useColumnVisibility.js\";\nimport { useObjectTableData } from \"./hooks/useObjectTableData.js\";\nimport { useRowSelection } from \"./hooks/useRowSelection.js\";\nimport { useSelectionColumn } from \"./hooks/useSelectionColumn.js\";\nimport { useTableSorting } from \"./hooks/useTableSorting.js\";\nimport type { ObjectTableProps } from \"./ObjectTableApi.js\";\nimport { BaseTable } from \"./Table.js\";\nimport type { HeaderMenuFeatureFlags } from \"./TableHeaderWithPopover.js\";\nimport { getRowId } from \"./utils/getRowId.js\";\n\n/**\n * ObjectTable - A headless table component for displaying OSDK object sets\n *\n * @example\n * ```tsx\n * <ObjectTable objectType={MyObjectType} />\n * ```\n */\n\nexport function ObjectTable<\n Q extends ObjectOrInterfaceDefinition,\n RDPs extends Record<string, SimplePropertyDef> = Record<\n string,\n never\n >,\n FunctionColumns extends Record<string, QueryDefinition<{}>> = Record<\n string,\n never\n >,\n>({\n objectType,\n columnDefinitions,\n filter,\n orderBy,\n defaultOrderBy,\n onOrderByChanged,\n onColumnsPinnedChanged,\n onColumnResize,\n onRowSelection,\n renderCellContextMenu,\n selectionMode = \"none\",\n selectedRows,\n onColumnVisibilityChanged,\n enableOrdering = true,\n enableColumnPinning = true,\n enableColumnResizing = true,\n enableColumnConfig = true,\n ...props\n}: ObjectTableProps<Q, RDPs, FunctionColumns>): React.ReactElement {\n const { columnSizing, onColumnSizingChange } = useColumnResize({\n onColumnResize,\n });\n\n const { sorting, onSortingChange } = useTableSorting<\n Q,\n RDPs,\n FunctionColumns\n >(\n {\n orderBy,\n defaultOrderBy,\n onOrderByChanged,\n },\n );\n\n const { data, fetchMore, isLoading, error } = useObjectTableData<\n Q,\n RDPs,\n FunctionColumns\n >(\n objectType,\n columnDefinitions,\n filter,\n sorting,\n );\n\n const { columns, loading: isColumnsLoading } = useColumnDefs<\n Q,\n RDPs,\n FunctionColumns\n >(\n objectType,\n columnDefinitions,\n );\n\n const {\n rowSelection,\n isAllSelected,\n hasSelection,\n onToggleAll,\n onToggleRow,\n enableRowSelection,\n } = useRowSelection<Q, RDPs>({\n selectionMode,\n selectedRows,\n onRowSelection,\n data,\n });\n\n const selectionColumn = useSelectionColumn<Q, RDPs>(\n { selectionMode, isAllSelected, hasSelection, onToggleAll, onToggleRow },\n );\n\n const {\n columnVisibility,\n onColumnVisibilityChange,\n columnOrder,\n onColumnOrderChange,\n } = useColumnVisibility({\n allColumns: columns,\n onColumnVisibilityChanged,\n });\n\n const { columnPinning, onColumnPinningChange } = useColumnPinning({\n columnDefinitions,\n hasSelectionColumn: enableRowSelection,\n onColumnsPinnedChanged,\n });\n\n const allColumns = useMemo(() => {\n return selectionColumn ? [selectionColumn, ...columns] : columns;\n }, [selectionColumn, columns]);\n\n const table = useReactTable<\n Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>\n >({\n data: data ?? [],\n columns: allColumns,\n getCoreRowModel: getCoreRowModel(),\n state: {\n columnVisibility,\n columnOrder,\n rowSelection,\n sorting,\n columnSizing,\n columnPinning,\n },\n onSortingChange,\n onColumnSizingChange,\n onColumnPinningChange,\n onColumnVisibilityChange,\n onColumnOrderChange,\n enableRowSelection,\n enableSorting: enableOrdering,\n columnResizeMode: \"onChange\",\n columnResizeDirection: \"ltr\",\n manualSorting: true, // Enable manual sorting to indicate server-side sorting\n defaultColumn: {\n minSize: 80,\n },\n getRowId,\n });\n\n const onRenderCellContextMenu = useCallback(\n (\n row: Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n cell: Cell<\n Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n unknown\n >,\n ) => {\n return renderCellContextMenu?.(row, cell.getValue());\n },\n [renderCellContextMenu],\n );\n\n const isTableLoading = isLoading || isColumnsLoading;\n\n const headerMenuFeatureFlags: HeaderMenuFeatureFlags = useMemo(() => ({\n showSortingItems: enableOrdering,\n showPinningItems: enableColumnPinning,\n showResizeItem: enableColumnResizing,\n showConfigItem: enableColumnConfig,\n }), [\n enableOrdering,\n enableColumnPinning,\n enableColumnResizing,\n enableColumnConfig,\n ]);\n\n return (\n <BaseTable<Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>>\n table={table}\n isLoading={isTableLoading}\n fetchNextPage={fetchMore}\n onRowClick={props.onRowClick}\n rowHeight={props.rowHeight}\n renderCellContextMenu={onRenderCellContextMenu}\n className={props.className}\n error={error}\n headerMenuFeatureFlags={headerMenuFeatureFlags}\n />\n );\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ObjectTable.js","names":["getCoreRowModel","useReactTable","React","useCallback","useMemo","useColumnDefs","useColumnPinning","useColumnResize","useColumnVisibility","useEditableTable","useObjectTableData","useRowSelection","useSelectionColumn","useTableSorting","BaseTable","getRowId","ObjectTable","objectType","columnDefinitions","filter","orderBy","defaultOrderBy","onOrderByChanged","onColumnsPinnedChanged","onColumnResize","onRowSelection","renderCellContextMenu","selectionMode","selectedRows","onColumnVisibilityChanged","onCellValueChanged","onSubmitEdits","enableOrdering","enableColumnPinning","enableColumnResizing","enableColumnConfig","props","columnSizing","onColumnSizingChange","cellEdits","clearEdits","handleCellEdit","handleSubmitEdits","sorting","onSortingChange","data","fetchMore","isLoading","error","columns","loading","isColumnsLoading","rowSelection","isAllSelected","hasSelection","onToggleAll","onToggleRow","enableRowSelection","selectionColumn","columnVisibility","onColumnVisibilityChange","columnOrder","onColumnOrderChange","allColumns","columnPinning","onColumnPinningChange","hasSelectionColumn","table","state","enableSorting","columnResizeMode","columnResizeDirection","manualSorting","defaultColumn","minSize","meta","onCellEdit","onRenderCellContextMenu","row","cell","getValue","headerMenuFeatureFlags","showSortingItems","showPinningItems","showResizeItem","showConfigItem","editableConfig","createElement","fetchNextPage","onRowClick","rowHeight","className"],"sources":["ObjectTable.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 {\n ObjectOrInterfaceDefinition,\n Osdk,\n PropertyKeys,\n QueryDefinition,\n SimplePropertyDef,\n} from \"@osdk/api\";\nimport type { Cell } from \"@tanstack/react-table\";\nimport { getCoreRowModel, useReactTable } from \"@tanstack/react-table\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { useColumnDefs } from \"./hooks/useColumnDefs.js\";\nimport { useColumnPinning } from \"./hooks/useColumnPinning.js\";\nimport { useColumnResize } from \"./hooks/useColumnResize.js\";\nimport { useColumnVisibility } from \"./hooks/useColumnVisibility.js\";\nimport { useEditableTable } from \"./hooks/useEditableTable.js\";\nimport { useObjectTableData } from \"./hooks/useObjectTableData.js\";\nimport { useRowSelection } from \"./hooks/useRowSelection.js\";\nimport { useSelectionColumn } from \"./hooks/useSelectionColumn.js\";\nimport { useTableSorting } from \"./hooks/useTableSorting.js\";\nimport type { ObjectTableProps } from \"./ObjectTableApi.js\";\nimport { BaseTable } from \"./Table.js\";\nimport type { HeaderMenuFeatureFlags } from \"./TableHeaderWithPopover.js\";\nimport { getRowId } from \"./utils/getRowId.js\";\n\n/**\n * ObjectTable - A headless table component for displaying OSDK object sets\n *\n * @example\n * ```tsx\n * <ObjectTable objectType={MyObjectType} />\n * ```\n */\n\nexport function ObjectTable<\n Q extends ObjectOrInterfaceDefinition,\n RDPs extends Record<string, SimplePropertyDef> = Record<\n string,\n never\n >,\n FunctionColumns extends Record<string, QueryDefinition<{}>> = Record<\n string,\n never\n >,\n>({\n objectType,\n columnDefinitions,\n filter,\n orderBy,\n defaultOrderBy,\n onOrderByChanged,\n onColumnsPinnedChanged,\n onColumnResize,\n onRowSelection,\n renderCellContextMenu,\n selectionMode = \"none\",\n selectedRows,\n onColumnVisibilityChanged,\n onCellValueChanged,\n onSubmitEdits,\n enableOrdering = true,\n enableColumnPinning = true,\n enableColumnResizing = true,\n enableColumnConfig = true,\n ...props\n}: ObjectTableProps<Q, RDPs, FunctionColumns>): React.ReactElement {\n const { columnSizing, onColumnSizingChange } = useColumnResize({\n onColumnResize,\n });\n\n const {\n cellEdits,\n clearEdits,\n handleCellEdit,\n handleSubmitEdits,\n } = useEditableTable({\n onCellValueChanged,\n onSubmitEdits,\n });\n\n const { sorting, onSortingChange } = useTableSorting<\n Q,\n RDPs,\n FunctionColumns\n >(\n {\n orderBy,\n defaultOrderBy,\n onOrderByChanged,\n },\n );\n\n const { data, fetchMore, isLoading, error } = useObjectTableData<\n Q,\n RDPs,\n FunctionColumns\n >(\n objectType,\n columnDefinitions,\n filter,\n sorting,\n );\n\n const { columns, loading: isColumnsLoading } = useColumnDefs<\n Q,\n RDPs,\n FunctionColumns\n >(\n objectType,\n columnDefinitions,\n );\n\n const {\n rowSelection,\n isAllSelected,\n hasSelection,\n onToggleAll,\n onToggleRow,\n enableRowSelection,\n } = useRowSelection<Q, RDPs>({\n selectionMode,\n selectedRows,\n onRowSelection,\n data,\n });\n\n const selectionColumn = useSelectionColumn<Q, RDPs>(\n { selectionMode, isAllSelected, hasSelection, onToggleAll, onToggleRow },\n );\n\n const {\n columnVisibility,\n onColumnVisibilityChange,\n columnOrder,\n onColumnOrderChange,\n } = useColumnVisibility({\n allColumns: columns,\n onColumnVisibilityChanged,\n });\n\n const { columnPinning, onColumnPinningChange } = useColumnPinning({\n columnDefinitions,\n hasSelectionColumn: enableRowSelection,\n onColumnsPinnedChanged,\n });\n\n const allColumns = useMemo(() => {\n return selectionColumn ? [selectionColumn, ...columns] : columns;\n }, [selectionColumn, columns]);\n\n const table = useReactTable<\n Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>\n >({\n data: data ?? [],\n columns: allColumns,\n getCoreRowModel: getCoreRowModel(),\n state: {\n columnVisibility,\n columnOrder,\n rowSelection,\n sorting,\n columnSizing,\n columnPinning,\n },\n onSortingChange,\n onColumnSizingChange,\n onColumnPinningChange,\n onColumnVisibilityChange,\n onColumnOrderChange,\n enableRowSelection,\n enableSorting: enableOrdering,\n columnResizeMode: \"onChange\",\n columnResizeDirection: \"ltr\",\n manualSorting: true, // Enable manual sorting to indicate server-side sorting\n defaultColumn: {\n minSize: 80,\n },\n getRowId,\n meta: {\n onCellEdit: handleCellEdit,\n cellEdits,\n },\n });\n\n const onRenderCellContextMenu = useCallback(\n (\n row: Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n cell: Cell<\n Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n unknown\n >,\n ) => {\n return renderCellContextMenu?.(row, cell.getValue());\n },\n [renderCellContextMenu],\n );\n\n const isTableLoading = isLoading || isColumnsLoading;\n\n const headerMenuFeatureFlags: HeaderMenuFeatureFlags = useMemo(() => ({\n showSortingItems: enableOrdering,\n showPinningItems: enableColumnPinning,\n showResizeItem: enableColumnResizing,\n showConfigItem: enableColumnConfig,\n }), [\n enableOrdering,\n enableColumnPinning,\n enableColumnResizing,\n enableColumnConfig,\n ]);\n\n const editableConfig = useMemo(() => {\n if (!onSubmitEdits) {\n return;\n }\n\n return {\n onSubmitEdits: handleSubmitEdits,\n clearEdits,\n cellEdits,\n };\n }, [onSubmitEdits, handleSubmitEdits, clearEdits, cellEdits]);\n\n return (\n <BaseTable<Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>>\n table={table}\n isLoading={isTableLoading}\n fetchNextPage={fetchMore}\n onRowClick={props.onRowClick}\n rowHeight={props.rowHeight}\n renderCellContextMenu={onRenderCellContextMenu}\n className={props.className}\n error={error}\n headerMenuFeatureFlags={headerMenuFeatureFlags}\n editableConfig={editableConfig}\n />\n );\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"ObjectTableApi.js","names":[],"sources":["ObjectTableApi.ts"],"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 {\n DerivedProperty,\n ObjectOrInterfaceDefinition,\n Osdk,\n PrimaryKeyType,\n PropertyKeys,\n QueryDefinition,\n SimplePropertyDef,\n WhereClause,\n} from \"@osdk/api\";\nimport type * as React from \"react\";\n\nexport type ColumnDefinition<\n Q extends ObjectOrInterfaceDefinition,\n RDPs extends Record<string, SimplePropertyDef> = Record<string, never>,\n FunctionColumns extends Record<string, QueryDefinition<{}>> = Record<\n string,\n never\n >,\n> = {\n locator: ColumnDefinitionLocator<Q, RDPs, FunctionColumns>;\n\n /**\n * @default true\n */\n isVisible?: boolean;\n\n /**\n * @default none\n */\n pinned?: \"left\" | \"right\" | \"none\";\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n resizable?: boolean;\n orderable?: boolean;\n filterable?: boolean;\n renderCell?: (\n object: Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n locator: ColumnDefinitionLocator<Q, RDPs, FunctionColumns>,\n ) => React.ReactNode;\n\n /**\n * If provided, this will be used in the column header.\n * If both columnName and renderHeader are provided, renderHeader will take precedence in the table header.\n * columnName will still be used in other parts where the column name is displayed.\n *\n * If not provided,\n * for a property column, the property displayName will be used\n * for other columns, the id will be used.\n */\n columnName?: string;\n\n /**\n * If provided, this will be used to render the header component.\n * When both columnName and renderHeader are provided, renderHeader will take precedence in the table header.\n */\n renderHeader?: () => React.ReactNode;\n};\n\nexport type ColumnDefinitionLocator<\n Q extends ObjectOrInterfaceDefinition,\n RDPs extends Record<string, SimplePropertyDef> = Record<string, never>,\n FunctionColumns extends Record<string, QueryDefinition<{}>> = Record<\n string,\n never\n >,\n> =\n | {\n type: \"property\";\n id: PropertyKeys<Q>;\n }\n | {\n type: \"function\";\n id: keyof FunctionColumns;\n }\n | {\n type: \"rdp\";\n id: keyof RDPs;\n creator: DerivedProperty.Creator<Q, RDPs[keyof RDPs]>;\n }\n | {\n type: \"custom\";\n id: string;\n };\n\nexport interface ObjectTableProps<\n Q extends ObjectOrInterfaceDefinition,\n RDPs extends Record<string, SimplePropertyDef> = Record<string, never>,\n FunctionColumns extends Record<string, QueryDefinition<{}>> = Record<\n string,\n never\n >,\n> {\n /**\n * The object type of the object\n */\n objectType: Q;\n\n /**\n * Ordered list of column definitions to show in the table\n *\n * If not provided, all of the properties of the object type will be shown in default order.\n */\n columnDefinitions?: Array<ColumnDefinition<Q, RDPs, FunctionColumns>>;\n\n /**\n * Whether the table is filterable by the user.\n *\n * @default true\n */\n enableFiltering?: boolean;\n\n /**\n * The current where clause to filter the objects in the table.\n * If provided, the filter is controlled.\n */\n filter?: WhereClause<Q, RDPs>;\n\n /**\n * Called when the where clause is changed.\n * Required when filter is controlled.\n *\n * @param newWhere The new where clause\n */\n onFilterChanged?: (newWhere: WhereClause<Q, RDPs>) => void;\n\n /**\n * Whether the table is sortable by the user.\n *\n * @default true\n */\n enableOrdering?: boolean;\n\n /**\n * Whether columns can be pinned by the user.\n *\n * @default true\n */\n enableColumnPinning?: boolean;\n\n /**\n * Whether columns can be resized by the user.\n *\n * @default true\n */\n enableColumnResizing?: boolean;\n\n /**\n * Whether the column configuration dialog for column visibility and ordering is available to the user.\n *\n * @default true\n */\n enableColumnConfig?: boolean;\n\n /**\n * The default order by clause to sort the objects in the table.\n * If provided without orderBy prop, the sorting is uncontrolled.\n * If both orderBy and defaultOrderBy are provided, orderBy takes precedence.\n */\n defaultOrderBy?: Array<{\n property: PropertyKeys<Q>;\n direction: \"asc\" | \"desc\";\n }>;\n\n /**\n * The current order by clause to sort the objects in the table.\n * If provided, the sorting is controlled.\n * If both orderBy and defaultOrderBy are provided, orderBy takes precedence.\n */\n orderBy?: Array<{\n property: PropertyKeys<Q>;\n direction: \"asc\" | \"desc\";\n }>;\n\n /**\n * Called when the order by clause is changed.\n * Required when sorting is controlled.\n *\n * @param newOrderBy The new order by clause\n */\n onOrderByChanged?: (\n newOrderBy: Array<{\n property: PropertyKeys<Q>;\n direction: \"asc\" | \"desc\";\n }>,\n ) => void;\n\n /**\n * Called when the column visibility or ordering changed.\n *\n * If provided, the table will allow the user to show/hide columns.\n *\n * @param newStates The columns sorted in their display order in the table and their visibility state.\n */\n onColumnVisibilityChanged?: (\n newStates: Array<{\n columnId: PropertyKeys<Q> | keyof RDPs | keyof FunctionColumns;\n isVisible: boolean;\n }>,\n ) => void;\n\n /**\n * Called when the pinned columns change.\n *\n * If provided, the table will allow the user to pin/unpin columns.\n *\n * @param newStates The new list of column pin states\n */\n onColumnsPinnedChanged?: (\n newStates: Array<{\n columnId: PropertyKeys<Q> | keyof RDPs | keyof FunctionColumns;\n pinned: \"left\" | \"right\" | \"none\";\n }>,\n ) => void;\n\n /**\n * Called when a column is resized.\n *\n * @param columnId The ID of the resized column\n * @param newWidth The new width of the column. When newWidth = null, the column size is reset.\n */\n onColumnResize?: (\n columnId: PropertyKeys<Q> | keyof RDPs | keyof FunctionColumns,\n newWidth: number | null,\n ) => void;\n\n /**\n * Called when a row is clicked.\n *\n * @param object The object representing the clicked row\n */\n onRowClick?: (\n object: Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n ) => void;\n\n /**\n * Selection mode for the table rows.\n *\n * If multiple, a checkbox will be shown for each row to allow selecting multiple rows\n * as well as a top-level checkbox in the header to select all rows.\n *\n * @default \"none\"\n */\n selectionMode?: \"single\" | \"multiple\" | \"none\";\n\n /**\n * The currently selected rows in the table.\n * If provided, the row selection is controlled.\n */\n selectedRows?: PrimaryKeyType<Q>[];\n\n /**\n * Called when the row selection changes.\n * Required when row selection is controlled.\n *\n * @param selectedRowIds The primary keys of currently selected rows\n */\n\n onRowSelection?: (selectedRowIds: PrimaryKeyType<Q>[]) => void;\n\n /**\n * If provided, will render this context menu when right clicking on a cell\n */\n renderCellContextMenu?: (\n row: Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n cellValue: unknown,\n ) => React.ReactNode;\n\n /**\n * The height of each row in pixels.\n *\n * @default 40\n */\n rowHeight?: number;\n\n className?: string;\n}\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"ObjectTableApi.js","names":[],"sources":["ObjectTableApi.ts"],"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 {\n DerivedProperty,\n ObjectOrInterfaceDefinition,\n Osdk,\n PrimaryKeyType,\n PropertyKeys,\n QueryDefinition,\n SimplePropertyDef,\n WhereClause,\n} from \"@osdk/api\";\nimport type * as React from \"react\";\nimport type { CellIdentifier, CellValueState } from \"./utils/types.js\";\n\nexport type ColumnDefinition<\n Q extends ObjectOrInterfaceDefinition,\n RDPs extends Record<string, SimplePropertyDef> = Record<string, never>,\n FunctionColumns extends Record<string, QueryDefinition<{}>> = Record<\n string,\n never\n >,\n> = {\n locator: ColumnDefinitionLocator<Q, RDPs, FunctionColumns>;\n\n /**\n * @default true\n */\n isVisible?: boolean;\n\n /**\n * @default none\n */\n pinned?: \"left\" | \"right\" | \"none\";\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n resizable?: boolean;\n orderable?: boolean;\n filterable?: boolean;\n editable?: boolean;\n\n renderCell?: (\n object: Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n locator: ColumnDefinitionLocator<Q, RDPs, FunctionColumns>,\n ) => React.ReactNode;\n\n /**\n * If provided, this will be used in the column header.\n * If both columnName and renderHeader are provided, renderHeader will take precedence in the table header.\n * columnName will still be used in other parts where the column name is displayed.\n *\n * If not provided,\n * for a property column, the property displayName will be used\n * for other columns, the id will be used.\n */\n columnName?: string;\n\n /**\n * If provided, this will be used to render the header component.\n * When both columnName and renderHeader are provided, renderHeader will take precedence in the table header.\n */\n renderHeader?: () => React.ReactNode;\n};\n\nexport type ColumnDefinitionLocator<\n Q extends ObjectOrInterfaceDefinition,\n RDPs extends Record<string, SimplePropertyDef> = Record<string, never>,\n FunctionColumns extends Record<string, QueryDefinition<{}>> = Record<\n string,\n never\n >,\n> =\n | {\n type: \"property\";\n id: PropertyKeys<Q>;\n }\n | {\n type: \"function\";\n id: keyof FunctionColumns;\n }\n | {\n type: \"rdp\";\n id: keyof RDPs;\n creator: DerivedProperty.Creator<Q, RDPs[keyof RDPs]>;\n }\n | {\n type: \"custom\";\n id: string;\n };\n\nexport interface ObjectTableProps<\n Q extends ObjectOrInterfaceDefinition,\n RDPs extends Record<string, SimplePropertyDef> = Record<string, never>,\n FunctionColumns extends Record<string, QueryDefinition<{}>> = Record<\n string,\n never\n >,\n> {\n /**\n * The object type of the object\n */\n objectType: Q;\n\n /**\n * Ordered list of column definitions to show in the table\n *\n * If not provided, all of the properties of the object type will be shown in default order.\n */\n columnDefinitions?: Array<ColumnDefinition<Q, RDPs, FunctionColumns>>;\n\n /**\n * Whether the table is filterable by the user.\n *\n * @default true\n */\n enableFiltering?: boolean;\n\n /**\n * The current where clause to filter the objects in the table.\n * If provided, the filter is controlled.\n */\n filter?: WhereClause<Q, RDPs>;\n\n /**\n * Called when the where clause is changed.\n * Required when filter is controlled.\n *\n * @param newWhere The new where clause\n */\n onFilterChanged?: (newWhere: WhereClause<Q, RDPs>) => void;\n\n /**\n * Whether the table is sortable by the user.\n *\n * @default true\n */\n enableOrdering?: boolean;\n\n /**\n * Whether columns can be pinned by the user.\n *\n * @default true\n */\n enableColumnPinning?: boolean;\n\n /**\n * Whether columns can be resized by the user.\n *\n * @default true\n */\n enableColumnResizing?: boolean;\n\n /**\n * Whether the column configuration dialog for column visibility and ordering is available to the user.\n *\n * @default true\n */\n enableColumnConfig?: boolean;\n\n /**\n * The default order by clause to sort the objects in the table.\n * If provided without orderBy prop, the sorting is uncontrolled.\n * If both orderBy and defaultOrderBy are provided, orderBy takes precedence.\n */\n defaultOrderBy?: Array<{\n property: PropertyKeys<Q>;\n direction: \"asc\" | \"desc\";\n }>;\n\n /**\n * The current order by clause to sort the objects in the table.\n * If provided, the sorting is controlled.\n * If both orderBy and defaultOrderBy are provided, orderBy takes precedence.\n */\n orderBy?: Array<{\n property: PropertyKeys<Q>;\n direction: \"asc\" | \"desc\";\n }>;\n\n /**\n * Called when the order by clause is changed.\n * Required when sorting is controlled.\n *\n * @param newOrderBy The new order by clause\n */\n onOrderByChanged?: (\n newOrderBy: Array<{\n property: PropertyKeys<Q>;\n direction: \"asc\" | \"desc\";\n }>,\n ) => void;\n\n /**\n * Called after the value of a cell is edited and committed by the user.\n *\n * @param cell The cell that was edited, identified by its row and column IDs\n * @param state The new and old values of the cell\n */\n onCellValueChanged?: (\n cell: CellIdentifier,\n state: CellValueState,\n ) => void;\n\n /**\n * If provided, the button Submit Edits will be shown in the table\n *\n * @param edits a map of cellId (stringified CellIdentifier) to the new and old values of the cell\n */\n onSubmitEdits?: (edits: Record<string, CellValueState>) => Promise<void>;\n\n /**\n * Called when the column visibility or ordering changed.\n *\n * If provided, the table will allow the user to show/hide columns.\n *\n * @param newStates The columns sorted in their display order in the table and their visibility state.\n */\n onColumnVisibilityChanged?: (\n newStates: Array<{\n columnId: PropertyKeys<Q> | keyof RDPs | keyof FunctionColumns;\n isVisible: boolean;\n }>,\n ) => void;\n\n /**\n * Called when the pinned columns change.\n *\n * If provided, the table will allow the user to pin/unpin columns.\n *\n * @param newStates The new list of column pin states\n */\n onColumnsPinnedChanged?: (\n newStates: Array<{\n columnId: PropertyKeys<Q> | keyof RDPs | keyof FunctionColumns;\n pinned: \"left\" | \"right\" | \"none\";\n }>,\n ) => void;\n\n /**\n * Called when a column is resized.\n *\n * @param columnId The ID of the resized column\n * @param newWidth The new width of the column. When newWidth = null, the column size is reset.\n */\n onColumnResize?: (\n columnId: PropertyKeys<Q> | keyof RDPs | keyof FunctionColumns,\n newWidth: number | null,\n ) => void;\n\n /**\n * Called when a row is clicked.\n *\n * @param object The object representing the clicked row\n */\n onRowClick?: (\n object: Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n ) => void;\n\n /**\n * Selection mode for the table rows.\n *\n * If multiple, a checkbox will be shown for each row to allow selecting multiple rows\n * as well as a top-level checkbox in the header to select all rows.\n *\n * @default \"none\"\n */\n selectionMode?: \"single\" | \"multiple\" | \"none\";\n\n /**\n * The currently selected rows in the table.\n * If provided, the row selection is controlled.\n */\n selectedRows?: PrimaryKeyType<Q>[];\n\n /**\n * Called when the row selection changes.\n * Required when row selection is controlled.\n *\n * @param selectedRowIds The primary keys of currently selected rows\n */\n\n onRowSelection?: (selectedRowIds: PrimaryKeyType<Q>[]) => void;\n\n /**\n * If provided, will render this context menu when right clicking on a cell\n */\n renderCellContextMenu?: (\n row: Osdk.Instance<Q, \"$allBaseProperties\", PropertyKeys<Q>, RDPs>,\n cellValue: unknown,\n ) => React.ReactNode;\n\n /**\n * The height of each row in pixels.\n *\n * @default 40\n */\n rowHeight?: number;\n\n className?: string;\n}\n"],"mappings":"","ignoreList":[]}
@@ -16,6 +16,7 @@
16
16
 
17
17
  import classNames from "classnames";
18
18
  import React, { useCallback, useEffect, useRef, useState } from "react";
19
+ import { ActionButton } from "../base-components/action-button/ActionButton.js";
19
20
  import { LoadingStateTable } from "./LoadingStateTable.js";
20
21
  import { NonIdealState } from "./NonIdealState.js";
21
22
  import styles from "./Table.module.css.js";
@@ -30,7 +31,8 @@ export function BaseTable({
30
31
  renderCellContextMenu,
31
32
  className,
32
33
  error,
33
- headerMenuFeatureFlags
34
+ headerMenuFeatureFlags,
35
+ editableConfig
34
36
  }) {
35
37
  const tableContainerRef = useRef(null);
36
38
  const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -66,9 +68,16 @@ export function BaseTable({
66
68
  const rows = table.getRowModel().rows;
67
69
  const headerGroups = table.getHeaderGroups();
68
70
  const hasData = rows.length > 0;
71
+ const hasEdits = Object.keys(editableConfig?.cellEdits ?? {}).length > 0;
72
+ const handleSubmitEdits = useCallback(async () => {
73
+ await editableConfig?.onSubmitEdits?.();
74
+ editableConfig?.clearEdits?.();
75
+ }, [editableConfig]);
69
76
  return /*#__PURE__*/React.createElement("div", {
77
+ className: classNames(styles.osdkTableWrapper, className)
78
+ }, /*#__PURE__*/React.createElement("div", {
70
79
  ref: tableContainerRef,
71
- className: classNames(styles.osdkTableContainer, className),
80
+ className: classNames(styles.osdkTableContainer, editableConfig && styles.osdkTableContainerWithButton),
72
81
  onScroll: handleScroll
73
82
  }, /*#__PURE__*/React.createElement("table", null, isLoading && !hasData ? /*#__PURE__*/React.createElement(LoadingStateTable, {
74
83
  table: table,
@@ -90,6 +99,12 @@ export function BaseTable({
90
99
  message: "No Data"
91
100
  }), error != null && /*#__PURE__*/React.createElement(NonIdealState, {
92
101
  message: `Error Loading Data: ${error.message}`
93
- }));
102
+ })), editableConfig && /*#__PURE__*/React.createElement("div", {
103
+ className: styles.submitButtonContainer
104
+ }, /*#__PURE__*/React.createElement(ActionButton, {
105
+ variant: "primary",
106
+ onClick: handleSubmitEdits,
107
+ disabled: !hasEdits
108
+ }, "Submit Edits")));
94
109
  }
95
110
  //# sourceMappingURL=Table.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","names":["classNames","React","useCallback","useEffect","useRef","useState","LoadingStateTable","NonIdealState","styles","TableBody","TableHeader","BaseTable","table","isLoading","fetchNextPage","onRowClick","rowHeight","renderCellContextMenu","className","error","headerMenuFeatureFlags","tableContainerRef","isLoadingMore","setIsLoadingMore","fetchingRef","fetchMoreOnEndReached","containerRefElement","current","scrollHeight","scrollTop","clientHeight","handleScroll","e","currentTarget","rows","getRowModel","headerGroups","getHeaderGroups","hasData","length","createElement","ref","osdkTableContainer","onScroll","Fragment","message"],"sources":["Table.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, RowData, Table } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, {\n type ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { LoadingStateTable } from \"./LoadingStateTable.js\";\nimport { NonIdealState } from \"./NonIdealState.js\";\nimport styles from \"./Table.module.css\";\nimport { TableBody } from \"./TableBody.js\";\nimport { TableHeader } from \"./TableHeader.js\";\nimport type { HeaderMenuFeatureFlags } from \"./TableHeaderWithPopover.js\";\n\ndeclare module \"@tanstack/react-table\" {\n interface ColumnMeta<TData extends RowData, TValue> {\n columnName?: string;\n isVisible?: boolean;\n }\n}\n\nexport interface BaseTableProps<\n TData extends RowData,\n> {\n table: Table<TData>;\n isLoading?: boolean;\n fetchNextPage?: () => Promise<void>;\n onRowClick?: (row: TData) => void;\n rowHeight?: number;\n renderCellContextMenu?: (\n row: TData,\n cell: Cell<TData, unknown>,\n ) => React.ReactNode;\n className?: string;\n error?: Error;\n headerMenuFeatureFlags?: HeaderMenuFeatureFlags;\n}\n\nexport function BaseTable<\n TData extends RowData,\n>(\n {\n table,\n isLoading,\n fetchNextPage,\n onRowClick,\n rowHeight,\n renderCellContextMenu,\n className,\n error,\n headerMenuFeatureFlags,\n }: BaseTableProps<TData>,\n): ReactElement {\n const tableContainerRef = useRef<HTMLDivElement>(null);\n const [isLoadingMore, setIsLoadingMore] = useState(false);\n\n // Using a ref to prevent duplicate fetches from rapid scroll events while a fetch is in-flight\n const fetchingRef = useRef(false);\n\n useEffect(() => {\n if (!isLoading || fetchNextPage == null) {\n setIsLoadingMore(false);\n }\n }, [isLoading, fetchNextPage]);\n\n const fetchMoreOnEndReached = useCallback(\n async (containerRefElement?: HTMLDivElement | null) => {\n if (containerRefElement && !fetchingRef.current && !isLoadingMore) {\n const { scrollHeight, scrollTop, clientHeight } = containerRefElement;\n if (\n scrollHeight - scrollTop - clientHeight < 100\n && !isLoading && fetchNextPage != null\n ) {\n fetchingRef.current = true;\n setIsLoadingMore(true);\n try {\n await fetchNextPage();\n } finally {\n fetchingRef.current = false;\n }\n }\n }\n },\n [fetchNextPage, isLoading, isLoadingMore],\n );\n\n const handleScroll = useCallback(\n async (e: React.UIEvent<HTMLDivElement>) => {\n await fetchMoreOnEndReached(e.currentTarget);\n },\n [fetchMoreOnEndReached],\n );\n\n const rows = table.getRowModel().rows;\n const headerGroups = table.getHeaderGroups();\n const hasData = rows.length > 0;\n\n return (\n <div\n ref={tableContainerRef}\n className={classNames(styles.osdkTableContainer, className)}\n onScroll={handleScroll}\n >\n <table>\n {isLoading && !hasData\n ? (\n <LoadingStateTable\n table={table}\n headerGroups={headerGroups}\n rowHeight={rowHeight}\n tableContainerRef={tableContainerRef}\n />\n )\n : (\n <>\n <TableHeader\n table={table}\n headerMenuFeatureFlags={headerMenuFeatureFlags}\n />\n <TableBody\n rows={rows}\n tableContainerRef={tableContainerRef}\n onRowClick={onRowClick}\n rowHeight={rowHeight}\n renderCellContextMenu={renderCellContextMenu}\n isLoadingMore={isLoadingMore}\n headerGroups={headerGroups}\n />\n </>\n )}\n </table>\n {!hasData && error == null && <NonIdealState message={\"No Data\"} />}\n {error != null && (\n <NonIdealState message={`Error Loading Data: ${error.message}`} />\n )}\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Table.js","names":["classNames","React","useCallback","useEffect","useRef","useState","ActionButton","LoadingStateTable","NonIdealState","styles","TableBody","TableHeader","BaseTable","table","isLoading","fetchNextPage","onRowClick","rowHeight","renderCellContextMenu","className","error","headerMenuFeatureFlags","editableConfig","tableContainerRef","isLoadingMore","setIsLoadingMore","fetchingRef","fetchMoreOnEndReached","containerRefElement","current","scrollHeight","scrollTop","clientHeight","handleScroll","e","currentTarget","rows","getRowModel","headerGroups","getHeaderGroups","hasData","length","hasEdits","Object","keys","cellEdits","handleSubmitEdits","onSubmitEdits","clearEdits","createElement","osdkTableWrapper","ref","osdkTableContainer","osdkTableContainerWithButton","onScroll","Fragment","message","submitButtonContainer","variant","onClick","disabled"],"sources":["Table.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, RowData, Table } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, {\n type ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { ActionButton } from \"../base-components/action-button/ActionButton.js\";\nimport { LoadingStateTable } from \"./LoadingStateTable.js\";\nimport { NonIdealState } from \"./NonIdealState.js\";\nimport styles from \"./Table.module.css\";\nimport { TableBody } from \"./TableBody.js\";\nimport { TableHeader } from \"./TableHeader.js\";\nimport type { HeaderMenuFeatureFlags } from \"./TableHeaderWithPopover.js\";\nimport type { CellValueState } from \"./utils/types.js\";\n\ndeclare module \"@tanstack/react-table\" {\n interface ColumnMeta<TData extends RowData = unknown, TValue = unknown> {\n columnName?: string;\n isVisible?: boolean;\n editable?: boolean;\n dataType?: string;\n }\n interface TableMeta<TData extends RowData = unknown> {\n onCellEdit?: (\n cellId: string,\n state: CellValueState,\n ) => void;\n cellEdits?: Record<string, CellValueState>;\n }\n}\n\ninterface EditableConfig {\n onSubmitEdits?: () => Promise<void>;\n clearEdits?: () => void;\n cellEdits?: Record<string, CellValueState>;\n}\n\nexport interface BaseTableProps<\n TData extends RowData,\n> {\n table: Table<TData>;\n isLoading?: boolean;\n fetchNextPage?: () => Promise<void>;\n onRowClick?: (row: TData) => void;\n rowHeight?: number;\n renderCellContextMenu?: (\n row: TData,\n cell: Cell<TData, unknown>,\n ) => React.ReactNode;\n className?: string;\n error?: Error;\n headerMenuFeatureFlags?: HeaderMenuFeatureFlags;\n editableConfig?: EditableConfig;\n}\n\nexport function BaseTable<\n TData extends RowData,\n>(\n {\n table,\n isLoading,\n fetchNextPage,\n onRowClick,\n rowHeight,\n renderCellContextMenu,\n className,\n error,\n headerMenuFeatureFlags,\n editableConfig,\n }: BaseTableProps<TData>,\n): ReactElement {\n const tableContainerRef = useRef<HTMLDivElement>(null);\n const [isLoadingMore, setIsLoadingMore] = useState(false);\n\n // Using a ref to prevent duplicate fetches from rapid scroll events while a fetch is in-flight\n const fetchingRef = useRef(false);\n\n useEffect(() => {\n if (!isLoading || fetchNextPage == null) {\n setIsLoadingMore(false);\n }\n }, [isLoading, fetchNextPage]);\n\n const fetchMoreOnEndReached = useCallback(\n async (containerRefElement?: HTMLDivElement | null) => {\n if (containerRefElement && !fetchingRef.current && !isLoadingMore) {\n const { scrollHeight, scrollTop, clientHeight } = containerRefElement;\n if (\n scrollHeight - scrollTop - clientHeight < 100\n && !isLoading && fetchNextPage != null\n ) {\n fetchingRef.current = true;\n setIsLoadingMore(true);\n try {\n await fetchNextPage();\n } finally {\n fetchingRef.current = false;\n }\n }\n }\n },\n [fetchNextPage, isLoading, isLoadingMore],\n );\n\n const handleScroll = useCallback(\n async (e: React.UIEvent<HTMLDivElement>) => {\n await fetchMoreOnEndReached(e.currentTarget);\n },\n [fetchMoreOnEndReached],\n );\n\n const rows = table.getRowModel().rows;\n const headerGroups = table.getHeaderGroups();\n const hasData = rows.length > 0;\n const hasEdits = Object.keys(editableConfig?.cellEdits ?? {}).length > 0;\n\n const handleSubmitEdits = useCallback(async () => {\n await editableConfig?.onSubmitEdits?.();\n editableConfig?.clearEdits?.();\n }, [editableConfig]);\n\n return (\n <div className={classNames(styles.osdkTableWrapper, className)}>\n <div\n ref={tableContainerRef}\n className={classNames(\n styles.osdkTableContainer,\n editableConfig && styles.osdkTableContainerWithButton,\n )}\n onScroll={handleScroll}\n >\n <table>\n {isLoading && !hasData\n ? (\n <LoadingStateTable\n table={table}\n headerGroups={headerGroups}\n rowHeight={rowHeight}\n tableContainerRef={tableContainerRef}\n />\n )\n : (\n <>\n <TableHeader\n table={table}\n headerMenuFeatureFlags={headerMenuFeatureFlags}\n />\n <TableBody\n rows={rows}\n tableContainerRef={tableContainerRef}\n onRowClick={onRowClick}\n rowHeight={rowHeight}\n renderCellContextMenu={renderCellContextMenu}\n isLoadingMore={isLoadingMore}\n headerGroups={headerGroups}\n />\n </>\n )}\n </table>\n {!hasData && error == null && <NonIdealState message={\"No Data\"} />}\n {error != null && (\n <NonIdealState message={`Error Loading Data: ${error.message}`} />\n )}\n </div>\n {editableConfig && (\n <div className={styles.submitButtonContainer}>\n <ActionButton\n variant=\"primary\"\n onClick={handleSubmitEdits}\n disabled={!hasEdits}\n >\n Submit Edits\n </ActionButton>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
@@ -14,9 +14,15 @@
14
14
  * limitations under the License.
15
15
  */
16
16
 
17
+ .osdkTableWrapper {
18
+ display: flex;
19
+ flex-direction: column;
20
+ height: 100%;
21
+ position: relative;
22
+ }
23
+
17
24
  .osdkTableContainer {
18
25
  flex: 1;
19
- height: 100%;
20
26
  min-height: 0;
21
27
  overflow: auto;
22
28
  position: relative;
@@ -26,4 +32,14 @@
26
32
  border-collapse: collapse;
27
33
  display: grid;
28
34
  table-layout: fixed;
35
+ width: max-content;
36
+ min-width: 100%;
37
+ }
38
+
39
+ .submitButtonContainer {
40
+ background-color: var(--osdk-surface-background-color-default-rest);
41
+ border-top: var(--osdk-table-border);
42
+ padding: var(--osdk-table-button-container-padding);
43
+ display: flex;
44
+ justify-content: flex-end;
29
45
  }
@@ -1,6 +1,8 @@
1
1
  // CSS Module proxy for Table.module.css
2
2
  const styles = {
3
- "osdkTableContainer": "Table-module__osdkTableContainer___QBj68RD-"
3
+ "osdkTableWrapper": "Table-module__osdkTableWrapper___qNSuMAE2",
4
+ "osdkTableContainer": "Table-module__osdkTableContainer___QBj68RD-",
5
+ "submitButtonContainer": "Table-module__submitButtonContainer___2UgcHhXl"
4
6
  };
5
7
 
6
8
  export default styles;
@@ -17,4 +17,6 @@
17
17
  .osdkTableBody {
18
18
  display: grid;
19
19
  position: relative;
20
+ width: max-content;
21
+ min-width: 100%;
20
22
  }