@trackunit/react-table 0.0.279 → 0.0.284

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 +5 -3
  2. package/index.esm.js +5 -3
  3. package/package.json +1 -1
  4. package/src/types.d.ts +6 -0
package/index.cjs.js CHANGED
@@ -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
@@ -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.279",
3
+ "version": "0.0.284",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
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";