@pingux/astro 2.206.2 → 2.207.0-alpha.0

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -2043,5 +2043,19 @@ declare const _default: {
         flexShrink: number;
         whiteSpace: string;
     };
+    tableHeaderButton: {
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        lineHeight: string;
+        backgroundColor: string;
+        borderRadius: string;
+        textAlign: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
 };
 export default _default;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -349,5 +349,15 @@ var _default = exports["default"] = {
   withIcon: withIcon,
   filter: filter,
   searchNavTabLabel: tabLabelButton,
-  selectLink: selectLink
+  selectLink: selectLink,
+  tableHeaderButton: {
+    fontSize: 'md',
+    fontWeight: '1',
+    color: 'text.primary',
+    lineHeight: 'body',
+    backgroundColor: 'transparent',
+    borderRadius: '0px',
+    textAlign: 'left',
+    '&.is-focused': _objectSpread({}, defaultFocus)
+  }
 };

package/lib/cjs/components/TableBase/TableBase.js

@@ -31,7 +31,7 @@ var _table2 = require("@react-stately/table");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky"],
+var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky", "onResizeStart", "onResize", "onResizeEnd"],
   _excluded2 = ["caption"],
   _excluded3 = ["type", "children", "className", "isSticky"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -66,6 +66,9 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
     className = props.className,
     isLastColumnSticky = props.isLastColumnSticky,
+    onResizeStart = props.onResizeStart,
+    onResize = props.onResize,
+    onResizeEnd = props.onResizeEnd,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var headerRef = (0, _react.useRef)(null);
@@ -146,7 +149,10 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         key: column.key,
         column: column,
         state: state,
-        layoutState: layoutState
+        layoutState: layoutState,
+        onResizeStart: onResizeStart,
+        onResize: onResize,
+        onResizeEnd: onResizeEnd
       });
     }));
   })), (0, _react2.jsx)(TableRowGroup, (0, _extends2["default"])({
@@ -164,12 +170,13 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _react2.jsx)(_.Loader, {
     variant: "loader.withinDataTable"
   })), (0, _map["default"])(_context3 = (0, _from["default"])(collection.body.childNodes)).call(_context3, function (row) {
-    var _context4;
+    var _context4, _collection$getChildr, _collection$getChildr2;
     return (0, _react2.jsx)(TableRow, {
       key: row.key,
       item: row,
-      state: state
-    }, (0, _map["default"])(_context4 = (0, _from["default"])(collection.getChildren(row.key))).call(_context4, function (cell) {
+      state: state,
+      hasSelectionCheckboxes: hasSelectionCheckboxes
+    }, (0, _map["default"])(_context4 = (0, _from["default"])((_collection$getChildr = (_collection$getChildr2 = collection.getChildren) === null || _collection$getChildr2 === void 0 ? void 0 : _collection$getChildr2.call(collection, row.key)) !== null && _collection$getChildr !== void 0 ? _collection$getChildr : [])).call(_context4, function (cell) {
       return cell.props.isSelectionCell ? (0, _react2.jsx)(TableCheckboxCell, {
         key: cell.key,
         cell: cell,
@@ -235,39 +242,87 @@ function TableHeaderRow(props) {
     ref: ref
   }), children);
 }
+function Resizer(props) {
+  var column = props.column,
+    layoutState = props.layoutState,
+    triggerRef = props.triggerRef,
+    onResizeStart = props.onResizeStart,
+    onResize = props.onResize,
+    onResizeEnd = props.onResizeEnd;
+  var ref = (0, _react.useRef)(null);
+  var _useTableColumnResize = (0, _table.useTableColumnResize)({
+      column: column,
+      'aria-label': "".concat(column.textValue, " column width"),
+      triggerRef: triggerRef,
+      onResizeStart: onResizeStart,
+      onResize: onResize,
+      onResizeEnd: onResizeEnd
+    }, layoutState, ref),
+    resizerProps = _useTableColumnResize.resizerProps,
+    inputProps = _useTableColumnResize.inputProps;
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
+
+  // The input must be nested inside the Box that carries resizerProps so that
+  // keyboard events fired on the input (Enter to start resize, Escape/Tab to
+  // end it) bubble up to the element with the keyboard handlers.
+
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)('', {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses3.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    role: "presentation",
+    variant: "tableBase.resizer",
+    className: classNames
+  }, resizerProps), (0, _react2.jsx)("input", (0, _extends2["default"])({
+    ref: ref
+  }, (0, _utils.mergeProps)(inputProps, focusProps))));
+}
 function TableColumnHeader(props) {
-  var _column$props;
+  var _column$props, _column$props2;
   var column = props.column,
     state = props.state,
     className = props.className,
-    layoutState = props.layoutState;
+    layoutState = props.layoutState,
+    onResizeStart = props.onResizeStart,
+    onResize = props.onResize,
+    onResizeEnd = props.onResizeEnd;
   var ref = (0, _react.useRef)(null);
   var _useTableColumnHeader = (0, _table.useTableColumnHeader)({
       node: column
     }, state, ref),
     columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
-  var _useFocusRing = (0, _focus.useFocusRing)(),
-    isFocusVisible = _useFocusRing.isFocusVisible,
-    focusProps = _useFocusRing.focusProps;
+
+  // within: true catches keyboard focus on the resizer <input> child so the
+  // <th> shows its focus ring even when the child is the active element.
+  var _useFocusRing2 = (0, _focus.useFocusRing)({
+      within: true
+    }),
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
   var allowsSorting = (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.allowsSorting;
+  var allowsResizing = (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.allowsResizing;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
     icons = _useGetTheme.icons;
   var Ascending = icons.Ascending,
     Descending = icons.Descending;
   var sortDescriptor = state.sortDescriptor;
-  var arrowIcon = (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.column) === column.key && (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? Ascending : Descending;
+  var isSortedAscending = (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.column) === column.key && (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending';
+  var arrowIcon = isSortedAscending ? Ascending : Descending;
   var sortIcon = (0, _react2.jsx)(_.Icon, {
     icon: arrowIcon,
     size: "xs",
     "aria-hidden": "true",
     title: {
-      name: (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? 'Sort ascending' : 'Sort descending'
+      name: isSortedAscending ? 'Sort ascending' : 'Sort descending'
     }
   });
-  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, {
+  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses3.classNames;
+    classNames = _useStatusClasses4.classNames;
   useHandleFocusRef(ref);
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "th",
@@ -276,19 +331,27 @@ function TableColumnHeader(props) {
     variant: "tableBase.head",
     className: classNames,
     sx: _objectSpread({
-      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key),
+      position: 'relative'
     }, column.props.sx)
   }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), (0, _react2.jsx)(_.Box, {
     isRow: true,
     gap: "sm",
     alignItems: "center"
-  }, (0, _react2.jsx)(_.Text, null, column.rendered), allowsSorting && sortIcon));
+  }, (0, _react2.jsx)(_.Text, null, column.rendered), allowsSorting && sortIcon), allowsResizing && (0, _react2.jsx)(Resizer, {
+    column: column,
+    layoutState: layoutState,
+    onResizeStart: onResizeStart,
+    onResize: onResize,
+    onResizeEnd: onResizeEnd
+  }));
 }
 function TableRow(props) {
   var item = props.item,
     state = props.state,
     children = props.children,
-    className = props.className;
+    className = props.className,
+    hasSelectionCheckboxes = props.hasSelectionCheckboxes;
   var ref = (0, _react.useRef)(null);
   var _useTableRow = (0, _table.useTableRow)({
       node: item
@@ -296,31 +359,50 @@ function TableRow(props) {
     rowProps = _useTableRow.rowProps;
   var isSelected = state.selectionManager.isSelected(item.key);
   var isDisabled = state.disabledKeys.has(item.key);
-  var _useFocusRing2 = (0, _focus.useFocusRing)(),
-    isFocusVisible = _useFocusRing2.isFocusVisible,
-    focusProps = _useFocusRing2.focusProps;
+  var _useFocusRing3 = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing3.isFocusVisible,
+    focusProps = _useFocusRing3.focusProps;
   var _useHover = (0, _interactions.useHover)({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
+
+  // allowTextSelectionOnPress: true prevents the press handler from suppressing
+  // native text-selection drags (user-select: none is not applied on pointer down).
+  // When hasSelectionCheckboxes is true, isDisabled: true disables the visual
+  // isPressed state — selection is handled solely by the checkbox cells.
   var _usePress = (0, _interactions.usePress)({
-      ref: ref
+      ref: ref,
+      allowTextSelectionOnPress: true,
+      isDisabled: !!hasSelectionCheckboxes
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
-  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(className, {
+
+  // React Aria's useSelectableItem only maps Space to selection (not Enter).
+  // Enter is reserved for "action" which is unused here, so we manually toggle
+  // selection on Enter to match expected keyboard behavior.
+  var enterKeyProps = (0, _react.useCallback)(function (e) {
+    if (e.key !== 'Enter') return;
+    if (isDisabled || state.selectionManager.selectionMode === 'none') return;
+    e.preventDefault();
+    state.selectionManager.toggleSelection(item.key);
+  }, [isDisabled, item.key, state.selectionManager]);
+  var _useStatusClasses5 = (0, _hooks.useStatusClasses)(className, {
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: isPressed,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),
-    classNames = _useStatusClasses4.classNames;
+    classNames = _useStatusClasses5.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "tr",
     display: "table-row",
     className: classNames,
     variant: "tableBase.row"
-  }, (0, _utils.mergeProps)(rowProps, focusProps, hoverProps, pressProps), {
+  }, (0, _utils.mergeProps)(rowProps, focusProps, hoverProps, pressProps, {
+    onKeyDown: enterKeyProps
+  }), {
     ref: ref
   }), children);
 }
@@ -334,14 +416,19 @@ function TableCell(props) {
       node: cell
     }, state, ref),
     gridCellProps = _useTableCell.gridCellProps;
-  var _useFocusRing3 = (0, _focus.useFocusRing)(),
-    isFocusVisible = _useFocusRing3.isFocusVisible,
-    focusProps = _useFocusRing3.focusProps;
-  var _useStatusClasses5 = (0, _hooks.useStatusClasses)(className, {
+  var _useFocusRing4 = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing4.isFocusVisible,
+    focusProps = _useFocusRing4.focusProps;
+  var _useStatusClasses6 = (0, _hooks.useStatusClasses)(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses5.classNames;
+    classNames = _useStatusClasses6.classNames;
   useHandleFocusRef(ref);
+
+  // Prevents pointer events reaching the row's press handler, allowing native text-selection drags.
+  var stopPointerPropagation = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+  }, []);
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "td",
     display: "table-cell",
@@ -351,8 +438,22 @@ function TableCell(props) {
     sx: _objectSpread({
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
     }, cell.props.sx)
-  }, (0, _utils.mergeProps)(gridCellProps, focusProps, cell.props)), cell.rendered);
+  }, (0, _utils.mergeProps)({
+    onPointerDown: stopPointerPropagation,
+    onMouseDown: stopPointerPropagation
+  }, gridCellProps, focusProps, cell.props)), cell.rendered);
 }
+
+// Native checkboxes only toggle on Space, not Enter. This handler makes Enter
+// behave the same as Space by calling the checkbox's onChange callback.
+var handleCheckboxEnterKey = function handleCheckboxEnterKey(onChange, isSelected) {
+  return function (e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onChange === null || onChange === void 0 || onChange(!isSelected);
+    }
+  };
+};
 function TableSelectAllCell(props) {
   var column = props.column,
     state = props.state,
@@ -375,7 +476,8 @@ function TableSelectAllCell(props) {
     ref: ref
   }), state.selectionManager.selectionMode === 'single' ? (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, checkboxProps['aria-label']) : (0, _react2.jsx)(_.CheckboxField, (0, _extends2["default"])({
     checkBoxProps: {
-      'data-testid': 'select-all-checkbox'
+      'data-testid': 'select-all-checkbox',
+      onKeyDown: handleCheckboxEnterKey(checkboxProps.onChange, checkboxProps.isSelected)
     }
   }, checkboxProps)));
 }
@@ -401,6 +503,10 @@ function TableCheckboxCell(props) {
     }, cell.props.sx)
   }, gridCellProps, {
     ref: ref
-  }), (0, _react2.jsx)(_.CheckboxField, checkboxProps));
+  }), (0, _react2.jsx)(_.CheckboxField, (0, _extends2["default"])({
+    checkBoxProps: {
+      onKeyDown: handleCheckboxEnterKey(checkboxProps.onChange, checkboxProps.isSelected)
+    }
+  }, checkboxProps)));
 }
 var _default = exports["default"] = TableBase;

package/lib/cjs/components/TableBase/TableBase.mdx

@@ -3,29 +3,62 @@ import * as TableBaseStories from './TableBase.stories';
 
 <Meta of={TableBaseStories} isTemplate />
 
-# Table
+# TableBase
 
-Data tables display information in a grid-like format of rows and columns. 
-They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data. 
+Data tables display information in a grid-like format of rows and columns.
+They organize information in a way that's easy to scan so that users can look for patterns and develop insights from data.
 
-Column header names describe the type of content displayed in each column. 
+Column header names describe the type of content displayed in each column.
 Each row contains data related to a single entity.
 
-Tables should:
+TableBase should:
 - Have consistently aligned content.
 - Use multiple heading rows for higher-level grouping of the columns.
 - Use column dividers sparingly.
 
-Tables shouldn’t use different indicators to represent empty fields.
+This basic component is rendered as an HTML `<table>`, which accepts the `<TBody>` component and the `<THead>` as children.
 
-This basic component is rendered as an HTML `<table>`, which accepts the `<TableBody>` component and the `<TableHead>` as children.
+### When to Use
+
+Use TableBase when you need a fully custom table implementation that goes beyond what higher-level table components provide. Common use cases include:
+
+- Sticky columns (e.g., pinning the last column during horizontal scroll)
+- Custom row or column grouping
+- Non-standard selection behaviors
+- Bespoke cell rendering or layout that requires direct control over the table structure
+
+TableBase is the lowest-level table primitive in Astro and gives you direct access to the underlying React Aria/Stately table hooks. Use it when you need that level of control.
 
 ### Required Components
 
-This component requires these additional components: 
+This component requires these additional components:
+
+- **TableCaption** — renders an accessible `<caption>` element for the table
+- **THead** — wraps the header section (`<thead>`)
+  - **Column** — defines each column header cell (`<th>`)
+- **TBody** — wraps the body section (`<tbody>`)
+  - **Row** — defines each data row (`<tr>`)
+    - **Cell** — defines each data cell (`<td>`)
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Focuses the component and triggers an action if one is associated with it. |
+| Arrow keys | Can be used to navigate between the components in the table. |
+| Home or Page Up | Shifts the focus to the first row. |
+| End or Page Down | Shifts the focus to the last visible row. |
+
+#### Screen Readers
 
-- TableCaption
-- TableHead
-- TableRow
-- TableCell
-- TableBody
+This component uses the following attributes to assist screen readers:
+- The **`aria-label`** attribute should be provided on the `TableBase` to give the table an accessible name. When a visible `TableCaption` is present, use **`aria-labelledby`** to associate the caption with the table instead.
+- The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure.
+- Each `Row` uses the **`aria-rowindex`** attribute to enumerate its position within the table.
+- Each `Column` and `Cell` uses the **`aria-colindex`** attribute to enumerate its position within its row.

package/lib/cjs/components/TableBase/TableBase.stories.js

@@ -17,7 +17,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithStickyHeader = exports.WithPagination = exports.WithLastColumnSticky = exports.MultiSelection = exports.DynamicWithSorting = exports.Default = void 0;
+exports["default"] = exports.WithStickyHeader = exports.WithResizableColumns = exports.WithPagination = exports.WithMinMaxColumnWidth = exports.WithLastColumnSticky = exports.MultiSelection = exports.DynamicWithSorting = exports.Default = void 0;
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
@@ -46,7 +46,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 var _default = exports["default"] = {
-  title: 'Experimental/Table',
+  title: 'Components/TableBase',
   component: _.TableBase,
   parameters: {
     docs: {
@@ -393,6 +393,56 @@ DynamicWithSorting.parameters = {
     }
   }
 };
+var WithResizableColumns = exports.WithResizableColumns = function WithResizableColumns() {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table"
+  }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
+    minWidth: 100,
+    allowsResizing: true
+  }, "Type"), (0, _react2.jsx)(_.Column, {
+    minWidth: 100,
+    allowsResizing: true
+  }, "Date"), (0, _react2.jsx)(_.Column, {
+    minWidth: 100
+  }, "Additional Grant"), (0, _react2.jsx)(_.Column, {
+    minWidth: 100
+  }, "Total Grant")), (0, _react2.jsx)(_.TBody, {
+    items: objects
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.id
+    }, (0, _react2.jsx)(_.Cell, null, item.type), (0, _react2.jsx)(_.Cell, null, item.date), (0, _react2.jsx)(_.Cell, null, item.additional_grant), (0, _react2.jsx)(_.Cell, null, item.total_grant));
+  })));
+};
+var WithMinMaxColumnWidth = exports.WithMinMaxColumnWidth = function WithMinMaxColumnWidth() {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table"
+  }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
+    minWidth: 80,
+    maxWidth: 200
+  }, "Type"), (0, _react2.jsx)(_.Column, {
+    minWidth: 120,
+    maxWidth: 300
+  }, "Date"), (0, _react2.jsx)(_.Column, {
+    minWidth: 100,
+    maxWidth: 180
+  }, "Additional Grant"), (0, _react2.jsx)(_.Column, {
+    minWidth: 100,
+    maxWidth: 180
+  }, "Total Grant")), (0, _react2.jsx)(_.TBody, {
+    items: objects
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.id
+    }, (0, _react2.jsx)(_.Cell, null, item.type), (0, _react2.jsx)(_.Cell, null, item.date), (0, _react2.jsx)(_.Cell, null, item.additional_grant), (0, _react2.jsx)(_.Cell, null, item.total_grant));
+  })));
+};
 var WithLastColumnSticky = exports.WithLastColumnSticky = function WithLastColumnSticky() {
   return (0, _react2.jsx)(_.Card, {
     variant: "cards.tableWrapper",

package/lib/cjs/components/TableBase/TableBase.styles.d.ts

@@ -31,15 +31,35 @@ declare const _default: {
         position: string;
         '&.is-last-column-sticky': {
             'thead tr th:last-of-type': {
-                position: string;
-                right: number;
-                backgroundColor: string;
-                zIndex: number;
                 '&.is-focused': {
                     borderStyle: string;
                     borderColor: string;
                     borderWidth: string;
                 };
+                '&::after': {
+                    content: string;
+                    position: string;
+                    top: number;
+                    bottom: number;
+                    left: number;
+                    width: string;
+                    backgroundColor: any;
+                    pointerEvents: string;
+                };
+                '&::before': {
+                    content: string;
+                    position: string;
+                    top: number;
+                    bottom: number;
+                    left: string;
+                    width: string;
+                    background: string;
+                    pointerEvents: string;
+                };
+                position: string;
+                right: number;
+                backgroundColor: string;
+                zIndex: number;
             };
             'tbody tr': {
                 '&.is-focused td:last-of-type': {
@@ -48,24 +68,66 @@ declare const _default: {
                     borderWidth: string;
                 };
                 '&:nth-of-type(odd) td:last-of-type': {
-                    position: string;
-                    right: number;
-                    backgroundColor: string;
                     '&.is-focused': {
                         borderStyle: string;
                         borderColor: string;
                         borderWidth: string;
                     };
-                };
-                '&:nth-of-type(even) td:last-of-type': {
+                    '&::after': {
+                        content: string;
+                        position: string;
+                        top: number;
+                        bottom: number;
+                        left: number;
+                        width: string;
+                        backgroundColor: any;
+                        pointerEvents: string;
+                    };
+                    '&::before': {
+                        content: string;
+                        position: string;
+                        top: number;
+                        bottom: number;
+                        left: string;
+                        width: string;
+                        background: string;
+                        pointerEvents: string;
+                    };
                     position: string;
                     right: number;
+                    zIndex: number;
                     backgroundColor: string;
+                };
+                '&:nth-of-type(even) td:last-of-type': {
                     '&.is-focused': {
                         borderStyle: string;
                         borderColor: string;
                         borderWidth: string;
                     };
+                    '&::after': {
+                        content: string;
+                        position: string;
+                        top: number;
+                        bottom: number;
+                        left: number;
+                        width: string;
+                        backgroundColor: any;
+                        pointerEvents: string;
+                    };
+                    '&::before': {
+                        content: string;
+                        position: string;
+                        top: number;
+                        bottom: number;
+                        left: string;
+                        width: string;
+                        background: string;
+                        pointerEvents: string;
+                    };
+                    position: string;
+                    right: number;
+                    zIndex: number;
+                    backgroundColor: string;
                 };
             };
         };
@@ -138,5 +200,18 @@ declare const _default: {
             };
         };
     };
+    resizer: {
+        cursor: string;
+        display: string;
+        width: string;
+        height: string;
+        backgroundColor: string;
+        position: string;
+        right: string;
+        top: string;
+        '&.is-focused': {
+            backgroundColor: string;
+        };
+    };
 };
 export default _default;