@trackunit/react-table 0.0.278 → 0.0.283

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 (4) hide show
  1. package/index.cjs.js +8 -6
  2. package/index.esm.js +7 -5
  3. package/package.json +3 -3
  4. package/src/types.d.ts +6 -0
package/index.cjs.js CHANGED
@@ -7,7 +7,7 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
7
7
  var reactComponents = require('@trackunit/react-components');
8
8
  var React = require('react');
9
9
  var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
10
- var reactRouterDom = require('react-router-dom');
10
+ var reactRouter = require('@tanstack/react-router');
11
11
  var reactTable = require('@tanstack/react-table');
12
12
  var reactTableBaseComponents = require('@trackunit/react-table-base-components');
13
13
  var reactVirtual = require('@tanstack/react-virtual');
@@ -187,7 +187,7 @@ function __rest(s, e) {
187
187
  const ActionButton = (_a) => {
188
188
  var { action, children, id } = _a, rest = __rest(_a, ["action", "children", "id"]);
189
189
  if (action.type === "route") {
190
- return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ id: id, renderAs: reactRouterDom.Link, to: action.url, variant: "ghost-neutral" }, rest, { children: children })));
190
+ return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ id: id, renderAs: reactRouter.Link, to: action.url, variant: "ghost-neutral" }, rest, { children: children })));
191
191
  }
192
192
  return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ id: id, onClick: action.method, variant: "ghost-neutral" }, rest, { children: children })));
193
193
  };
@@ -212,7 +212,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
212
212
  };
213
213
  const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-label`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style }), stopPropagation: false }, action.label));
214
214
  if ("url" in action) {
215
- return (jsxRuntime.jsx(reactRouterDom.Link, { id: action.id, to: action.url, children: item }, action.label));
215
+ return (jsxRuntime.jsx(reactRouter.Link, { id: action.id, params: prev => prev, to: action.url, children: item }, action.label));
216
216
  }
217
217
  return item;
218
218
  };
@@ -362,15 +362,16 @@ const Table = (_a) => {
362
362
  width: "100%",
363
363
  position: "relative",
364
364
  }, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
365
- var _a, _b, _c, _d, _e, _f, _g;
365
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
366
366
  const tooltipLabel = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.tootipLabel) !== null && _b !== void 0 ? _b : (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
367
367
  return (jsxRuntime.jsxs(reactTableBaseComponents.Th, { className: "relative", style: {
368
368
  width: header.getSize(),
369
369
  minWidth: header.column.columnDef.minSize,
370
370
  maxWidth: header.column.columnDef.maxSize,
371
371
  textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
372
+ flexGrow: ((_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.shouldGrow) ? 1 : 0,
372
373
  }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
373
- onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: (_g = (_f = header.column.columnDef) === null || _f === void 0 ? void 0 : _f.meta) === null || _g === void 0 ? void 0 : _g.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
374
+ onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_f = (_e = header.column.columnDef) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: (_h = (_g = header.column.columnDef) === null || _g === void 0 ? void 0 : _g.meta) === null || _h === void 0 ? void 0 : _h.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_j = header.column.columnDef.meta) === null || _j === void 0 ? void 0 : _j.shouldGrow) && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
374
375
  }) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
375
376
  height: `${getTotalSize()}px`,
376
377
  }, children: getVirtualItems().map((virtualRow, index) => {
@@ -390,13 +391,14 @@ const Table = (_a) => {
390
391
  height: `${virtualRow.size}px`,
391
392
  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
392
393
  }, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
393
- var _a;
394
+ var _a, _b;
394
395
  return (jsxRuntime.jsx(reactTableBaseComponents.Td, { key: cell.id,
395
396
  style: {
396
397
  width: cell.column.getSize(),
397
398
  minWidth: cell.column.columnDef.minSize,
398
399
  maxWidth: cell.column.columnDef.maxSize,
399
400
  textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
401
+ flexGrow: ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.shouldGrow) ? 1 : 0,
400
402
  }, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
401
403
  }) }, row.id));
402
404
  }
package/index.esm.js CHANGED
@@ -4,7 +4,7 @@ import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, Ico
4
4
  import * as React from 'react';
5
5
  import { useMemo, Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
6
6
  import { cvaMerge } from '@trackunit/css-class-variance-utilities';
7
- import { Link } from 'react-router-dom';
7
+ import { Link } from '@tanstack/react-router';
8
8
  import { flexRender, useReactTable, getSortedRowModel, getCoreRowModel, createColumnHelper } from '@tanstack/react-table';
9
9
  export { createColumnHelper } from '@tanstack/react-table';
10
10
  import { TableRoot, Thead, Tr, Th, SortIndicator, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
@@ -187,7 +187,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
187
187
  };
188
188
  const item = (jsx(MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-label`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: jsx(Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style }), stopPropagation: false }, action.label));
189
189
  if ("url" in action) {
190
- return (jsx(Link, { id: action.id, to: action.url, children: item }, action.label));
190
+ return (jsx(Link, { id: action.id, params: prev => prev, to: action.url, children: item }, action.label));
191
191
  }
192
192
  return item;
193
193
  };
@@ -337,15 +337,16 @@ const Table = (_a) => {
337
337
  width: "100%",
338
338
  position: "relative",
339
339
  }, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
340
- var _a, _b, _c, _d, _e, _f, _g;
340
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
341
341
  const tooltipLabel = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.tootipLabel) !== null && _b !== void 0 ? _b : (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
342
342
  return (jsxs(Th, { className: "relative", style: {
343
343
  width: header.getSize(),
344
344
  minWidth: header.column.columnDef.minSize,
345
345
  maxWidth: header.column.columnDef.maxSize,
346
346
  textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
347
+ flexGrow: ((_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.shouldGrow) ? 1 : 0,
347
348
  }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
348
- onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_g = (_f = header.column.columnDef) === null || _f === void 0 ? void 0 : _f.meta) === null || _g === void 0 ? void 0 : _g.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
349
+ onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_f = (_e = header.column.columnDef) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_h = (_g = header.column.columnDef) === null || _g === void 0 ? void 0 : _g.meta) === null || _h === void 0 ? void 0 : _h.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_j = header.column.columnDef.meta) === null || _j === void 0 ? void 0 : _j.shouldGrow) && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
349
350
  }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
350
351
  height: `${getTotalSize()}px`,
351
352
  }, children: getVirtualItems().map((virtualRow, index) => {
@@ -365,13 +366,14 @@ const Table = (_a) => {
365
366
  height: `${virtualRow.size}px`,
366
367
  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
367
368
  }, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
368
- var _a;
369
+ var _a, _b;
369
370
  return (jsx(Td, { key: cell.id,
370
371
  style: {
371
372
  width: cell.column.getSize(),
372
373
  minWidth: cell.column.columnDef.minSize,
373
374
  maxWidth: cell.column.columnDef.maxSize,
374
375
  textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
376
+ flexGrow: ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.shouldGrow) ? 1 : 0,
375
377
  }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
376
378
  }) }, row.id));
377
379
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-table",
3
- "version": "0.0.278",
3
+ "version": "0.0.283",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -9,7 +9,6 @@
9
9
  "dependencies": {
10
10
  "@trackunit/react-components": "*",
11
11
  "react": "^18.2.0",
12
- "react-router-dom": "6.18.0",
13
12
  "@tanstack/react-table": "^8.10.7",
14
13
  "@trackunit/react-table-base-components": "*",
15
14
  "@trackunit/react-table-pagination": "*",
@@ -22,7 +21,8 @@
22
21
  "@trackunit/react-core-contexts-api": "*",
23
22
  "@trackunit/css-class-variance-utilities": "*",
24
23
  "@trackunit/ui-icons": "*",
25
- "@trackunit/i18n-library-translation": "*"
24
+ "@trackunit/i18n-library-translation": "*",
25
+ "@tanstack/react-router": "1.19.1"
26
26
  },
27
27
  "module": "./index.esm.js",
28
28
  "main": "./index.cjs.js"
package/src/types.d.ts CHANGED
@@ -9,6 +9,12 @@ declare module "@tanstack/react-table" {
9
9
  hiddenByDefault?: boolean;
10
10
  isCustomField?: boolean;
11
11
  tootipLabel?: string;
12
+ /**
13
+ * Allowing the column to grow, expanding to fill the remaining space. If all columns have shouldGrow set to true, the columns will share the remaining space equally.
14
+ * If shouldGrow is set to true the column cannot be resized. Other columns with shouldGrow set to false can still be resized.
15
+ * Resizing columns with shouldGrow set to false will shring the columns with shouldGrow set to true.
16
+ */
17
+ shouldGrow?: boolean;
12
18
  }
13
19
  }
14
20
  export type Alignment = "left" | "center" | "right";