@economic/taco 1.21.1 → 1.21.3

package/dist/taco.cjs.development.js

@@ -3635,7 +3635,77 @@ const defaultLocalisationTexts = {
     loading: 'Loading...'
   },
   table2: {
+    columns: {
+      actions: {
+        tooltip: 'Other actions'
+      },
+      drag: {
+        tooltip: 'Drag row'
+      },
+      expansion: {
+        collapse: 'Collapse row',
+        collapseAll: 'Collapse all rows',
+        expand: 'Expand row',
+        expandAll: 'Expand all rows'
+      },
+      select: {
+        deselect: 'Deselect row',
+        deselectAll: 'Deselect all rows',
+        select: 'Select row',
+        selectAll: 'Select all rows'
+      }
+    },
+    columnSettings: {
+      columnsOther: 'Pinned columns',
+      columnsOtherDrop: 'Drop column here to unpin',
+      columnsPinned: 'Other columns',
+      columnsPinnedDrop: 'Drop column here to pin',
+      search: 'Search column...',
+      tooltip: 'Column settings'
+    },
+    editing: {
+      button: 'Edit',
+      tooltip: 'Edit',
+      tooltipDisabled: 'There are no visible columns that support editing',
+      rowIndicator: {
+        rowWillMove: 'Row will move due to sorting',
+        rowWillBeHidden: 'Row will hide due to filtering',
+        rowWillMoveReasonSearch: 'Due to a search filter applied to this table, this row will be hidden as soon as you select another row',
+        rowWillMoveReasonFilter: "Due to a filter applied to the column '[COLUMN]', this row will be hidden as soon as you select another row",
+        rowWillMoveReasonSorting: "Due to sorting applied to the column '[COLUMN]', this row will move position as soon as you select another row"
+      }
+    },
+    filters: {
+      button: 'Filters',
+      buttons: {
+        addFilter: 'Add Filter',
+        clearFilters: 'Clear all filters'
+      },
+      comparators: {
+        contains: 'Contains',
+        doesNotContain: 'Does not contain',
+        isEqualTo: 'Is',
+        isNotEqualTo: 'Is not',
+        isGreaterThan: 'Is greater than',
+        isLessThan: 'Is less than',
+        isBetween: 'Is between',
+        isOneOf: 'Is one of',
+        isNoneOf: 'Is none of',
+        isAllOf: 'Is all of',
+        isEmpty: 'Is empty',
+        isNotEmpty: 'Is not empty'
+      },
+      tooltip: 'Apply filters',
+      total: 'Viewing [CURRENT] of [TOTAL]'
+    },
+    rowDensity: {
+      tooltip: 'Row density'
+    },
+    search: {
+      placeholder: 'Search...'
+    },
     shortcuts: {
+      tooltip: 'View keyboard shortcuts',
       search: 'Search',
       filter: 'Filter',
       previousRow: 'Previous row',
@@ -3648,13 +3718,6 @@ const defaultLocalisationTexts = {
       selectAllRows: 'Select all rows',
       expandRow: 'Expand current row',
       collapseRow: 'Collapse current row'
-    },
-    rowIndicator: {
-      rowWillMove: 'Row will move due to sorting',
-      rowWillBeFiltered: 'Row will hide due to filtering',
-      searchFilterMovementReason: 'Due to a search filter applied to this table, this row will be hidden as soon as you select another row',
-      tableFilterMovementReason: "Due to a filter applied to the column '[COLUMN]', this row will be hidden as soon as you select another row",
-      sortingMovementReason: "Due to sorting applied to the column '[COLUMN]', this row will move position as soon as you select another row"
     }
   },
   select: {
@@ -5782,6 +5845,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
       className: "group-peer-focus:!border-transparent group-peer-focus:group-peer-active:!border-transparent -mr-2 !border-transparent !bg-transparent focus:!border-transparent",
       disabled: props.disabled || props.readOnly,
       onClick: handleClick,
+      tabIndex: -1,
       tooltip: texts.searchInput.button
     })),
     ref: internalRef,
@@ -7594,9 +7658,10 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
     const options = getOptionsFromCollection(event.currentTarget, querySelector);
     if (options) {
       if (isAriaDirectionKey(event)) {
+        event.preventDefault();
+        event.stopPropagation();
         const nextActiveIndex = getNextEnabledItem$1(event, options, activeIndex);
         if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {
-          event.preventDefault();
           setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));
         }
       } else if (activeIndex !== undefined) {
@@ -8754,7 +8819,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     var _listboxRef$current;
     if (open) {
       event.preventDefault();
-    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    } else if (event.key === 'ArrowDown') {
       setOpen(true);
     }
     // the focus should always remain on the input, so we forward events on to the listbox
@@ -10377,7 +10442,7 @@ const toggleBetween$1 = (fromRowIndex, toRowIndex) => {
   const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;
   return [fromIndex, toIndex];
 };
-function createRowDraggableColumn(onRowDrag) {
+function createRowDraggableColumn(onRowDrag, texts) {
   return {
     id: COLUMN_ID_FOR_DRAGGABLE,
     cell: ({
@@ -10416,7 +10481,7 @@ function createRowDraggableColumn(onRowDrag) {
         onDragStart: onDragStart,
         onDragEnd: onDragEnd
       }, /*#__PURE__*/React__default.createElement(Icon, {
-        "aria-label": "Drag row",
+        "aria-label": texts.table2.columns.drag.tooltip,
         name: "drag",
         className: "text-grey-darkest invisible w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed]]/row:text-white"
       }));
@@ -10432,19 +10497,19 @@ function createRowDraggableColumn(onRowDrag) {
     size: 10
   };
 }
-function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowIndex, onRowDrag, tableRef) {
+function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowIndex, onRowDrag, tableRef, texts) {
   let header;
   let cell;
   if (enableMultipleRowSelection) {
     header = ({
       table
     }) => /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getIsAllPageRowsSelected() ? 'Deselect all' : 'Select all', /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getIsAllPageRowsSelected() ? texts.table2.columns.select.deselectAll : texts.table2.columns.select.selectAll, /*#__PURE__*/React__default.createElement(Shortcut$1, {
         className: "ml-2",
         keys: ['Ctrl', 'A']
       }))
     }, /*#__PURE__*/React__default.createElement(Checkbox, {
-      "aria-label": table.getIsAllPageRowsSelected() ? 'Deselect all rows' : 'Select all rows',
+      "aria-label": table.getIsAllPageRowsSelected() ? texts.table2.columns.select.deselectAll : texts.table2.columns.select.selectAll,
       className: "hover:border-blue !mt-0",
       checked: table.getIsAllPageRowsSelected(),
       indeterminate: table.getIsSomePageRowsSelected(),
@@ -10474,12 +10539,12 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
         (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.focus();
       };
       return /*#__PURE__*/React__default.createElement(Tooltip, {
-        title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getIsAllPageRowsSelected() ? 'Deselect' : 'Select', /*#__PURE__*/React__default.createElement(Shortcut$1, {
+        title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, row.getIsSelected() ? texts.table2.columns.select.select : texts.table2.columns.select.deselect, /*#__PURE__*/React__default.createElement(Shortcut$1, {
           className: "ml-2",
           keys: ['Space']
         }))
       }, /*#__PURE__*/React__default.createElement(Checkbox, {
-        "aria-label": row.getIsSelected() ? 'Deselect row' : 'Select row',
+        "aria-label": row.getIsSelected() ? texts.table2.columns.select.select : texts.table2.columns.select.deselect,
         className: "hover:border-blue !mt-[0.45rem]",
         checked: row.getIsSelected(),
         onClick: handleClick,
@@ -10529,15 +10594,15 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
     size: 46
   };
 }
-function createRowExpansionColumn() {
+function createRowExpansionColumn(texts) {
   return {
     id: COLUMN_ID_FOR_EXPANSION,
     header: ({
       table
     }) => /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: table.getIsSomeRowsExpanded() ? 'Collapse all' : 'Expand all'
+      title: table.getIsSomeRowsExpanded() ? texts.table2.columns.expansion.collapseAll : texts.table2.columns.expansion.expandAll
     }, /*#__PURE__*/React__default.createElement(IconButton, {
-      title: table.getIsSomeRowsExpanded() ? 'Collapse all rows' : 'Expand all rows',
+      title: table.getIsSomeRowsExpanded() ? texts.table2.columns.expansion.collapseAll : texts.table2.columns.expansion.expandAll,
       appearance: "discrete",
       className: "-mb-2 -mt-1.5",
       icon: table.getIsSomeRowsExpanded() ? 'chevron-down-double' : 'chevron-right-double',
@@ -10550,12 +10615,12 @@ function createRowExpansionColumn() {
     cell: ({
       row
     }) => /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, row.getIsExpanded() ? 'Collapse' : 'Expand', /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, row.getIsExpanded() ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand, /*#__PURE__*/React__default.createElement(Shortcut$1, {
         className: "ml-2",
         keys: ['Ctrl', row.getIsExpanded() ? '←' : '→']
       }))
     }, /*#__PURE__*/React__default.createElement(IconButton, {
-      title: row.getIsExpanded() ? 'Collapse row' : 'Expand row',
+      title: row.getIsExpanded() ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand,
       appearance: "discrete",
       icon: row.getIsExpanded() ? 'chevron-down' : 'chevron-right',
       onClick: event => {
@@ -10579,30 +10644,19 @@ const getActionPropertyValue = (property, row) => typeof property === 'function'
 function RowActionCell({
   row,
   actions,
-  moreActions
+  moreActions,
+  table,
+  texts
 }) {
   const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(row.original) : action.visible : true;
   const visibleActions = actions.filter(isVisible);
   const visibleMoreActions = moreActions.filter(isVisible);
-  const rowActionCellWidth = React__default.useMemo(() => {
-    const totalButtons = visibleActions.length + (visibleMoreActions.length ? 1 : 0);
-    // this is necessary because row actions is has this mount hover delay, which makes the
-    // size calculation in the header get set before rendering - meaning the size doesn't include the buttons
-    // when we cache icons this can go
-    const paddingSize = 8;
-    const buttonSize = 32;
-    return paddingSize + totalButtons * buttonSize;
-  }, [visibleActions.length, visibleMoreActions.length]);
-  // Instead of relying on row.index to figure out whether the row is being hovered or is active. We should rely on a
-  // CSS fix. The reason behind this is that row data or index is the initial data or index that is passed to the
-  // table on the first render, the indexes of row changes when sorting or filtering is applied.
   // If the row is not the active row or the hovered row then actions are hidden.
   const actionClassName = 'group-hover/row:flex group-[[aria-current]]/row:flex hidden';
+  // only actions in the active row should be tabbable
+  const tabIndex = table.options.meta.activeRowIndex === row.index ? 0 : -1;
   return /*#__PURE__*/React__default.createElement("span", {
-    className: "-mb-2 -mt-1.5 flex justify-end text-right",
-    style: {
-      width: rowActionCellWidth
-    }
+    className: "-mb-2 -mt-1.5 flex justify-end text-right"
   }, visibleActions.map((action, i) => /*#__PURE__*/React__default.createElement(IconButton, {
     key: i,
     className: actionClassName,
@@ -10617,15 +10671,17 @@ function RowActionCell({
         action.onClick(row.original);
       }
     },
+    tabIndex: tabIndex,
     tooltip: getActionPropertyValue(action.text, row.original)
   })), visibleMoreActions.length ? /*#__PURE__*/React__default.createElement(IconButton, {
     className: actionClassName,
-    "aria-label": "View other actions",
+    "aria-label": texts.table2.columns.actions.tooltip,
     appearance: "discrete",
     icon: "more",
     onClick: event => {
       event.preventDefault();
     },
+    tabIndex: tabIndex,
     menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, visibleMoreActions.map((action, i) => /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       key: i,
       dialog: action.dialog ? action.dialog(row.original) : undefined,
@@ -10637,25 +10693,28 @@ function RowActionCell({
         }
       }
     }, getActionPropertyValue(action.text, row.original))))),
-    tooltip: "Other actions..."
+    tooltip: texts.table2.columns.actions.tooltip
   }) : null);
 }
-function createRowActionsColumn(rowActions) {
-  const actions = rowActions.slice(0, 3);
-  const moreActions = rowActions.slice(3);
+function createRowActionsColumn(rowActions, texts) {
+  const actions = rowActions.length === 4 ? rowActions : rowActions.slice(0, 3);
+  const moreActions = rowActions.slice(rowActions.length === 4 ? 4 : 3);
   return {
     id: COLUMN_ID_FOR_ACTIONS,
     cell: ({
-      row
+      row,
+      table
     }) => /*#__PURE__*/React__default.createElement(RowActionCell, {
       row: row,
       actions: actions,
-      moreActions: moreActions
+      moreActions: moreActions,
+      texts: texts,
+      table: table
     }),
     meta: {
       align: 'right',
       className: row => cn('items-center print:opacity-0 group-[[aria-current]]/row:sticky group-hover/row:sticky right-0 bg-transparent !px-1', {
-        'group-hover/row:!shadow-[-6px_0px_6px_theme(colors.grey.100)] group-[[aria-current]]/row:!shadow-[-6px_0px_6px_theme(colors.grey.100)]': !row.getIsSelected(),
+        'group-[[aria-current]]/row:!shadow-[-6px_0px_6px_theme(colors.grey.200)]': !row.getIsSelected(),
         'shadow-[-6px_0px_6px_theme(colors.blue.100)]': row.getIsSelected()
       }),
       disableTruncation: true,
@@ -10679,7 +10738,7 @@ const getDensityPadding = (density, editing = false) => {
   }
 };
 const getCellSizingClasses = (density = 'normal', editing = false) => {
-  return cn('flex items-center', getDensityPadding(density, editing), editing ? 'px-[7px]' : 'px-4');
+  return cn('min-h-0 flex items-start', getDensityPadding(density, editing), editing ? 'px-[7px]' : 'px-4');
 };
 const getCellAlignmentClasses = (alignment = 'left') => ({
   'justify-start text-left': alignment === 'left',
@@ -10781,6 +10840,8 @@ var Table2FilterComparator;
   Table2FilterComparator[Table2FilterComparator["IsOneOf"] = 7] = "IsOneOf";
   Table2FilterComparator[Table2FilterComparator["IsNoneOf"] = 8] = "IsNoneOf";
   Table2FilterComparator[Table2FilterComparator["IsAllOf"] = 9] = "IsAllOf";
+  Table2FilterComparator[Table2FilterComparator["IsEmpty"] = 10] = "IsEmpty";
+  Table2FilterComparator[Table2FilterComparator["IsNotEmpty"] = 11] = "IsNotEmpty";
 })(Table2FilterComparator || (Table2FilterComparator = {}));
 
 const toLowerCase = value => String(value !== null && value !== void 0 ? value : '').toLocaleLowerCase();
@@ -10792,6 +10853,10 @@ const globalFilterFn = (value, query) => isWeakContains(value, query);
 // before we filter - that's why this custom filter function exists
 const columnFilterFn = (value, filter) => {
   try {
+    if (filter.comparator === Table2FilterComparator.IsEmpty || filter.comparator === Table2FilterComparator.IsNotEmpty) {
+      const isEmpty = value === undefined || value === null || value === '';
+      return filter.comparator === Table2FilterComparator.IsEmpty ? isEmpty : !isEmpty;
+    }
     if (filter.value === undefined || filter.value === null || filter.value === '') {
       return true;
     }
@@ -11013,22 +11078,20 @@ const useIndicatorText = reason => {
   let title = '';
   let description = '';
   const {
-    texts: {
-      table2: tableTexts
-    }
+    texts
   } = useLocalization();
   switch (reason) {
+    case IndicatorReason.FILTER:
+      title = texts.table2.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table2.editing.rowIndicator.rowWillMoveReasonFilter;
+      break;
     case IndicatorReason.SEARCH:
-      title = tableTexts.rowIndicator.rowWillBeFiltered;
-      description = tableTexts.rowIndicator.searchFilterMovementReason;
+      title = texts.table2.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table2.editing.rowIndicator.rowWillMoveReasonSearch;
       break;
     case IndicatorReason.SORTING:
-      title = tableTexts.rowIndicator.rowWillMove;
-      description = tableTexts.rowIndicator.sortingMovementReason;
-      break;
-    case IndicatorReason.FILTER:
-      title = tableTexts.rowIndicator.rowWillBeFiltered;
-      description = tableTexts.rowIndicator.tableFilterMovementReason;
+      title = texts.table2.editing.rowIndicator.rowWillMove;
+      description = texts.table2.editing.rowIndicator.rowWillMoveReasonSorting;
       break;
   }
   return {
@@ -11043,7 +11106,7 @@ const Indicator = ({
 }) => {
   const container = React__default.useMemo(() => {
     const element = document.createElement('div');
-    element.className += '-translate-y-1/2 z-[3] rounded-full items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    element.className += 'z-[3] rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
     return element;
   }, []);
   const indicatorText = useIndicatorText(reason);
@@ -11198,8 +11261,7 @@ const Cell = function Cell(props) {
       return (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.classList.remove('pb-4');
     };
   }, [isIndicatorVisible, isLastRow]);
-  const className = cn({
-    'border-b': !isLastRow,
+  const className = cn('border-b', {
     'sticky z-[1]': isPinned,
     // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
     'bg-white': !isActiveRow && !isSelected && !isHoveredRow,
@@ -11420,8 +11482,11 @@ const Cell = function Cell(props) {
     }));
   } else {
     if (meta.onRowClick) {
-      attributes.onClick = () => {
+      attributes.onClick = event => {
         var _meta$onRowClick;
+        if (event.target !== internalRef.current) {
+          return;
+        }
         (_meta$onRowClick = meta.onRowClick) === null || _meta$onRowClick === void 0 ? void 0 : _meta$onRowClick.call(meta, cell.row.original);
       };
     }
@@ -11460,7 +11525,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   } = table.getState();
   const [state, setState] = React__default.useState(value);
   const isHoveringAnotherRowWhileEditing = meta.editMode.isEditing && meta.activeRowIndex !== rowIndex && meta.hoveredRowIndex === rowIndex;
-  const showValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;
+  const hasValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;
   // On each save, the initialValue will be set to the new value of the cell
   const initialValue = React__default.useRef(value);
   // It is important that we let consumers pass a newValue as an argument because when setState is called before
@@ -11494,7 +11559,10 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
               setValidationErrors(null);
             });
           }, function (error) {
-            setValidationErrors(error);
+            setValidationErrors({
+              ...validationErrors,
+              ...error
+            });
           });
           if (_temp && _temp.then) return _temp.then(function () {});
         }
@@ -11585,6 +11653,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   if (cellControl) {
     if (typeof cellControl === 'function') {
       controlComponent = cellControl({
+        invalid: hasValidationError,
         onBlur: saveIfChanged,
         onFocus: handleFocus,
         ref: controlRef,
@@ -11598,6 +11667,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
         case 'datepicker':
           controlComponent = /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
             className: detailModeClassName,
+            invalid: hasValidationError,
             onBlur: event => {
               const newDate = event.detail;
               saveIfChanged(newDate);
@@ -11620,6 +11690,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
         default:
           controlComponent = /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
             className: cn(className, detailModeClassName),
+            invalid: hasValidationError,
             onChange: event => {
               setState(event.target.value);
             },
@@ -11637,7 +11708,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     mountNode: indicatorMountNode
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "relative flex-grow"
-  }, controlComponent, showValidationError && /*#__PURE__*/React__default.createElement(ValidationError, null, String(cellValidationError))));
+  }, controlComponent, hasValidationError && /*#__PURE__*/React__default.createElement(ValidationError, null, String(cellValidationError))));
 }));
 
 const Header$1 = function Header(props) {
@@ -11788,13 +11859,14 @@ const HeaderMenu = ({
 
 const Footer$2 = function Footer(props) {
   const {
+    children,
     footer,
     index,
     table,
     ...columnProps
   } = props;
   const isPinned = !!footer.column.getIsPinned();
-  const className = cn('group/header sticky bottom-0 bg-white border-t-2 relative ', {
+  const className = cn('group/header sticky bottom-0 bg-white border-t-2 relative', getCellSizingClasses('normal'), {
     'z-[1]': isPinned
   }, props.className);
   return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
@@ -11804,10 +11876,15 @@ const Footer$2 = function Footer(props) {
     className: className,
     role: "cell",
     "data-column-index": index
-  }));
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, children));
 };
 
 function useColumnDefinitions(children, options, tableRef) {
+  const {
+    texts
+  } = useLocalization();
   const lastSelectedRowIndex = React__default.useRef();
   const columnHelper = reactTable$1.createColumnHelper();
   return React__default.useMemo(() => {
@@ -11879,19 +11956,19 @@ function useColumnDefinitions(children, options, tableRef) {
       }
     });
     if (options.enableRowExpansion) {
-      columns.unshift(columnHelper.display(createRowExpansionColumn()));
+      columns.unshift(columnHelper.display(createRowExpansionColumn(texts)));
       defaultColumnPinning.unshift(COLUMN_ID_FOR_EXPANSION);
     }
     if (options.enableRowSelection) {
-      columns.unshift(columnHelper.display(createRowSelectionColumn(options.enableMultipleRowSelection, lastSelectedRowIndex, options.onRowDrag, tableRef)));
+      columns.unshift(columnHelper.display(createRowSelectionColumn(options.enableMultipleRowSelection, lastSelectedRowIndex, options.onRowDrag, tableRef, texts)));
       defaultColumnPinning.unshift(COLUMN_ID_FOR_SELECTION);
     }
     if (options.onRowDrag) {
-      columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag)));
+      columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));
       defaultColumnPinning.unshift(COLUMN_ID_FOR_DRAGGABLE);
     }
     if ((_options$actionsForRo = options.actionsForRow) !== null && _options$actionsForRo !== void 0 && _options$actionsForRo.length) {
-      columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow)));
+      columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));
     }
     return {
       columns,
@@ -12262,10 +12339,7 @@ const useVirtualiser = ({
 };
 
 const useGridTemplate = table => {
-  var _table$options$meta$t, _table$options$meta, _table$options$meta$t2, _table$options$meta$t3, _table$options$meta2, _table$options$meta2$;
   const allVisibleColumns = table.getVisibleLeafColumns();
-  let scrollbarWidth = ((_table$options$meta$t = (_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : (_table$options$meta$t2 = _table$options$meta.tableRef.current) === null || _table$options$meta$t2 === void 0 ? void 0 : _table$options$meta$t2.offsetWidth) !== null && _table$options$meta$t !== void 0 ? _table$options$meta$t : 0) - ((_table$options$meta$t3 = (_table$options$meta2 = table.options.meta) === null || _table$options$meta2 === void 0 ? void 0 : (_table$options$meta2$ = _table$options$meta2.tableRef.current) === null || _table$options$meta2$ === void 0 ? void 0 : _table$options$meta2$.clientWidth) !== null && _table$options$meta$t3 !== void 0 ? _table$options$meta$t3 : 0);
-  scrollbarWidth = scrollbarWidth < 0 ? 0 : scrollbarWidth;
   return allVisibleColumns.reduce((accum, column, index) => {
     let size;
     const isLastColumn = index === allVisibleColumns.length - 1;
@@ -12276,8 +12350,7 @@ const useGridTemplate = table => {
       size = `${column.getSize()}px`;
     } else if (width) {
       if (isLastColumn) {
-        // Remove the scrollbar width from the last column
-        size = `minmax(${width - scrollbarWidth}px, auto)`;
+        size = `minmax(${width}px, auto)`;
       } else if (column.columnDef.minSize && width < column.columnDef.minSize) {
         // react-table is supposed to handle minSize itself but it is really buggy
         size = `${column.columnDef.minSize}px`;
@@ -12296,9 +12369,12 @@ const useGridTemplate = table => {
 const RowDensityButton = ({
   table
 }) => {
+  const {
+    texts
+  } = useLocalization();
   const meta = table.options.meta;
   return /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "Change row density",
+    "aria-label": texts.table2.rowDensity.tooltip,
     icon: `density-${meta.rowDensity}`,
     menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
       align: "end"
@@ -12314,7 +12390,7 @@ const RowDensityButton = ({
     }, "Comfortable"), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
       value: "spacious"
     }, "Spacious")))),
-    tooltip: "Row density"
+    tooltip: texts.table2.rowDensity.tooltip
   });
 };
 
@@ -12479,6 +12555,9 @@ const SortableColumnContainer = ({
   table
 }) => {
   var _ref;
+  const {
+    texts
+  } = useLocalization();
   const meta = table.options.meta;
   const reorder = (activeId, overId, listId) => {
     const draggedColumn = state[listId].find(c => c.id === activeId);
@@ -12493,6 +12572,10 @@ const SortableColumnContainer = ({
       moveColumn(column);
     }
   };
+  const handleDoubleClick = (id, status) => table.options.enablePinning ? event => {
+    event.stopPropagation();
+    move(id, status);
+  } : undefined;
   const isReorderingAllowed = (_ref = meta.enableColumnReordering || table.options.enablePinning) !== null && _ref !== void 0 ? _ref : false;
   if (!table.options.enablePinning) {
     return /*#__PURE__*/React__default.createElement(Container, {
@@ -12500,7 +12583,7 @@ const SortableColumnContainer = ({
       move: move
     }, /*#__PURE__*/React__default.createElement(List$1, {
       id: "other",
-      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-x-hidden px-2"
     }, state.other.map(column => {
       var _column$columnDef$met2;
       const canBeReordered = isOrderingAllowed(table, column);
@@ -12513,10 +12596,7 @@ const SortableColumnContainer = ({
         canBeReordered: canBeReordered,
         column: column,
         isReorderingAllowed: isReorderingAllowed,
-        onDoubleClick: event => {
-          event.stopPropagation();
-          move(column.id, 'other');
-        }
+        onDoubleClick: handleDoubleClick(column.id, 'other')
       }));
     })));
   }
@@ -12525,9 +12605,9 @@ const SortableColumnContainer = ({
     move: move
   }, /*#__PURE__*/React__default.createElement("h5", {
     className: "mx-4"
-  }, "Pinned columns"), /*#__PURE__*/React__default.createElement(List$1, {
+  }, texts.table2.columnSettings.columnsPinned), /*#__PURE__*/React__default.createElement(List$1, {
     id: "pinned",
-    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-x-hidden px-2"
   }, state.pinned.length ? state.pinned.map(column => {
     var _column$columnDef$met3;
     const canBeReordered = isOrderingAllowed(table, column);
@@ -12540,18 +12620,15 @@ const SortableColumnContainer = ({
       canBeReordered: canBeReordered,
       column: column,
       isReorderingAllowed: isReorderingAllowed,
-      onDoubleClick: event => {
-        event.stopPropagation();
-        move(column.id, 'pinned');
-      }
+      onDoubleClick: handleDoubleClick(column.id, 'pinned')
     }));
   }) : /*#__PURE__*/React__default.createElement("p", {
     className: "text-grey-500 mb-0 flex h-8 items-center px-2"
-  }, "Drop column here to pin")), /*#__PURE__*/React__default.createElement("h5", {
+  }, texts.table2.columnSettings.columnsPinnedDrop)), /*#__PURE__*/React__default.createElement("h5", {
     className: "mx-4"
-  }, "Other columns"), /*#__PURE__*/React__default.createElement(List$1, {
+  }, texts.table2.columnSettings.columnsOther), /*#__PURE__*/React__default.createElement(List$1, {
     id: "other",
-    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-x-hidden px-2"
   }, state.other.length ? state.other.map(column => {
     var _column$columnDef$met4;
     const canBeReordered = isOrderingAllowed(table, column);
@@ -12564,14 +12641,11 @@ const SortableColumnContainer = ({
       canBeReordered: canBeReordered,
       column: column,
       isReorderingAllowed: isReorderingAllowed,
-      onDoubleClick: event => {
-        event.stopPropagation();
-        move(column.id, 'other');
-      }
+      onDoubleClick: handleDoubleClick(column.id, 'other')
     }));
   }) : /*#__PURE__*/React__default.createElement("p", {
     className: "text-grey-500 mb-0 flex h-8 items-center px-2"
-  }, "Drop column here to unpin")));
+  }, texts.table2.columnSettings.columnsOtherDrop)));
 };
 const reorder = (draggedColumnId, targetColumnId, list = []) => {
   const nextColumnOrder = [...list];
@@ -12581,6 +12655,9 @@ const reorder = (draggedColumnId, targetColumnId, list = []) => {
 const ColumnSettingsButton = ({
   table
 }) => {
+  const {
+    texts
+  } = useLocalization();
   const [query, setQuery] = React__default.useState('');
   const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
   const [state, setState] = React__default.useState({
@@ -12629,7 +12706,7 @@ const ColumnSettingsButton = ({
     table.setColumnOrder(internals.concat([...state.pinned, ...state.other].map(c => c.id)));
   }, [state]);
   return /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "Change column settings",
+    "aria-label": texts.table2.columnSettings.tooltip,
     icon: "columns",
     popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
       align: "end"
@@ -12637,7 +12714,7 @@ const ColumnSettingsButton = ({
       className: "flex w-60 flex-col gap-2"
     }, /*#__PURE__*/React__default.createElement(Input, {
       onChange: event => setQuery(event.target.value),
-      placeholder: "Search column...",
+      placeholder: texts.table2.columnSettings.search,
       value: query
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "-ml-4 -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.8))] overflow-auto"
@@ -12655,7 +12732,7 @@ const ColumnSettingsButton = ({
       reorderColumn: reorderColumn,
       table: table
     }))))),
-    tooltip: "Column settings"
+    tooltip: texts.table2.columnSettings.tooltip
   });
 };
 
@@ -12833,12 +12910,13 @@ const Row$1 = ({
     rowMoveReason: rowMoveReason,
     setRowMoveReason: setRowMoveReason
   }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
-    role: "row",
-    draggable: true,
     "aria-current": isActiveRow ? 'true' : undefined,
     "aria-grabbed": isDragging ? 'true' : undefined,
+    "data-row-index": rowIndex,
+    draggable: true,
     onMouseEnter: handleEnter,
-    onMouseLeave: handleLeave
+    onMouseLeave: handleLeave,
+    role: "row"
   })));
 };
 
@@ -12874,6 +12952,9 @@ const Comparator = ({
   validComparators,
   ...props
 }) => {
+  const {
+    texts
+  } = useLocalization();
   const handleChange = comparator => {
     column.setFilterValue(currentFilterValue => ({
       comparator,
@@ -12895,30 +12976,34 @@ const Comparator = ({
   }), validComparators.map(comp => /*#__PURE__*/React__default.createElement(Select2.Option, {
     key: comp,
     value: comp
-  }, getComparatorText(comp))));
+  }, getComparatorText(comp, texts))));
 };
-const getComparatorText = comparator => {
+const getComparatorText = (comparator, texts) => {
   switch (comparator) {
     case Table2FilterComparator.Contains:
-      return 'Contains';
+      return texts.table2.filters.comparators.contains;
     case Table2FilterComparator.DoesNotContain:
-      return 'Does not contain';
+      return texts.table2.filters.comparators.doesNotContain;
     case Table2FilterComparator.IsEqualTo:
-      return 'Is';
+      return texts.table2.filters.comparators.isEqualTo;
     case Table2FilterComparator.IsNotEqualTo:
-      return 'Is not';
+      return texts.table2.filters.comparators.isNotEqualTo;
     case Table2FilterComparator.IsGreaterThan:
-      return 'Is greater than';
+      return texts.table2.filters.comparators.isGreaterThan;
     case Table2FilterComparator.IsLessThan:
-      return 'Is less than';
+      return texts.table2.filters.comparators.isLessThan;
     case Table2FilterComparator.IsBetween:
-      return 'Is between';
+      return texts.table2.filters.comparators.isBetween;
     case Table2FilterComparator.IsOneOf:
-      return 'Is one of';
+      return texts.table2.filters.comparators.isOneOf;
     case Table2FilterComparator.IsNoneOf:
-      return 'Is none of';
+      return texts.table2.filters.comparators.isNoneOf;
     case Table2FilterComparator.IsAllOf:
-      return 'Is all of';
+      return texts.table2.filters.comparators.isAllOf;
+    case Table2FilterComparator.IsEmpty:
+      return texts.table2.filters.comparators.isEmpty;
+    case Table2FilterComparator.IsNotEmpty:
+      return texts.table2.filters.comparators.isNotEmpty;
   }
 };
 
@@ -12929,6 +13014,9 @@ const InferredControl = ({
 }) => {
   var _column$columnDef$met2, _column$columnDef$met3;
   const ariaLabel = column.columnDef.header;
+  if (comparator === Table2FilterComparator.IsEmpty || comparator === Table2FilterComparator.IsNotEmpty) {
+    return null;
+  }
   if (comparator === Table2FilterComparator.IsBetween) {
     var _column$columnDef$met;
     const fromValue = Array.isArray(value) ? value[0] : undefined;
@@ -13011,7 +13099,7 @@ const InferredControl = ({
 };
 
 const ColumnFilter = props => {
-  var _column$columnDef$hea, _column$columnDef$met, _column$columnDef$met2, _control;
+  var _column$columnDef$hea, _column$columnDef$met, _control;
   const {
     allColumns,
     column,
@@ -13025,7 +13113,7 @@ const ColumnFilter = props => {
   const ariaLabel = String((_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : '');
   const ref = React__default.useRef(null);
   let control;
-  const controlType = (_column$columnDef$met = (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : 'input';
+  const controlType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
   if (typeof controlType === 'function') {
     control = controlType({
       onBlur: () => Promise.resolve(),
@@ -13068,7 +13156,7 @@ const ColumnFilter = props => {
     });
   }
   const handleRemove = () => column.setFilterValue(undefined);
-  const comparators = guessComparatorsBasedOnControl(controlType, control);
+  const comparators = guessComparatorsBasedOnControl(control, controlType);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "mb-2 flex gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -13096,7 +13184,7 @@ const ColumnFilter = props => {
     onClick: handleRemove
   }));
 };
-const guessComparatorsBasedOnControl = (control, instance) => {
+const guessComparatorsBasedOnControl = (instance, control) => {
   if ( /*#__PURE__*/React__default.isValidElement(instance)) {
     const {
       props,
@@ -13115,7 +13203,7 @@ const guessComparatorsBasedOnControl = (control, instance) => {
     case 'switch':
       return [Table2FilterComparator.IsEqualTo];
     default:
-      return [Table2FilterComparator.Contains, Table2FilterComparator.DoesNotContain, Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo, Table2FilterComparator.IsGreaterThan, Table2FilterComparator.IsLessThan, Table2FilterComparator.IsBetween];
+      return [Table2FilterComparator.Contains, Table2FilterComparator.DoesNotContain, Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo, Table2FilterComparator.IsEmpty, Table2FilterComparator.IsNotEmpty, Table2FilterComparator.IsGreaterThan, Table2FilterComparator.IsLessThan, Table2FilterComparator.IsBetween];
   }
 };
 
@@ -13132,6 +13220,9 @@ const FiltersButton = ({
   length,
   table
 }) => {
+  const {
+    texts
+  } = useLocalization();
   const ref = React__default.useRef(null);
   const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
   const {
@@ -13165,6 +13256,7 @@ const FiltersButton = ({
     }
   });
   return /*#__PURE__*/React__default.createElement(Button$1, {
+    "aria-label": texts.table2.filters.tooltip,
     appearance: columnFilters.length ? 'primary' : 'default',
     className: cn({
       '!wcag-blue-100': columnFilters.length
@@ -13178,7 +13270,7 @@ const FiltersButton = ({
       className: "mb-0 inline-flex"
     }, "Filter"), /*#__PURE__*/React__default.createElement("p", {
       className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
-    }, "Viewing ", table.getFilteredRowModel().rows.length, " of ", length)), /*#__PURE__*/React__default.createElement("div", {
+    }, texts.table2.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(length)))), /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2"
     }, filteredColumns.map((column, index) => /*#__PURE__*/React__default.createElement(ColumnFilter, {
       key: `${column.id}_${index}`,
@@ -13191,17 +13283,17 @@ const FiltersButton = ({
     }, /*#__PURE__*/React__default.createElement(Button$1, {
       appearance: "discrete",
       onClick: handleAdd
-    }, "+ Add filter"), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button$1, {
+    }, "+ ", texts.table2.filters.buttons.addFilter), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button$1, {
       onClick: handleReset
-    }, "Clear all filters") : null)))),
+    }, texts.table2.filters.buttons.clearFilters) : null)))),
     ref: ref,
-    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFilters.length ? 'Change filters' : 'Apply filters', /*#__PURE__*/React__default.createElement(Shortcut$1, {
+    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut$1, {
       className: "ml-2",
       keys: ['Ctrl', 'Shift', 'F']
     }))
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: columnFilters.length ? 'filter-solid' : 'filter'
-  }), columnFilters.length ? `Filters (${columnFilters.length})` : 'Filters');
+  }), texts.table2.filters.button, " ", columnFilters.length ? `(${columnFilters.length})` : '');
 };
 
 const Search$2 = props => {
@@ -13209,6 +13301,9 @@ const Search$2 = props => {
     value,
     ...attributes
   } = props;
+  const {
+    texts
+  } = useLocalization();
   const ref = React__default.useRef(null);
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
@@ -13248,6 +13343,7 @@ const Search$2 = props => {
     onBlur: handleBlur,
     onInput: handleInput,
     onKeyDown: handleKeyDown,
+    placeholder: texts.table2.search.placeholder,
     ref: ref
   }));
 };
@@ -13257,72 +13353,70 @@ const ShortcutsGuideButton = ({
 }) => {
   const meta = table.options.meta;
   const {
-    texts: {
-      table2: tableTexts
-    }
+    texts
   } = useLocalization();
   const shortcuts = [];
   if (table.options.enableGlobalFilter) {
     shortcuts.push({
-      feature: tableTexts.shortcuts.search,
+      feature: texts.table2.shortcuts.search,
       keys: ['Ctrl', 'F']
     });
   }
   if (table.options.enableColumnFilters) {
     shortcuts.push({
-      feature: tableTexts.shortcuts.filter,
+      feature: texts.table2.shortcuts.filter,
       keys: ['Ctrl', 'Shift', 'F']
     });
   }
   shortcuts.push({
-    feature: tableTexts.shortcuts.previousRow,
+    feature: texts.table2.shortcuts.previousRow,
     keys: ['Up']
   });
   shortcuts.push({
-    feature: tableTexts.shortcuts.nextRow,
+    feature: texts.table2.shortcuts.nextRow,
     keys: ['Down']
   });
   if (meta.editMode.enableEditMode) {
     shortcuts.push({
-      feature: tableTexts.shortcuts.editCell,
+      feature: texts.table2.shortcuts.editCell,
       keys: ['Enter']
     });
     shortcuts.push({
-      feature: tableTexts.shortcuts.previousColumn,
+      feature: texts.table2.shortcuts.previousColumn,
       keys: ['Arrow-Left']
     });
     shortcuts.push({
-      feature: tableTexts.shortcuts.nextColumn,
+      feature: texts.table2.shortcuts.nextColumn,
       keys: ['Arrow-Right']
     });
   } else if (meta.onRowClick) {
     shortcuts.push({
-      feature: tableTexts.shortcuts.rowClick,
+      feature: texts.table2.shortcuts.rowClick,
       keys: ['Enter']
     });
   }
   if (table.options.enableRowSelection) {
     shortcuts.push({
-      feature: tableTexts.shortcuts.selectRow,
+      feature: texts.table2.shortcuts.selectRow,
       keys: ['Space']
     });
     shortcuts.push({
-      feature: tableTexts.shortcuts.selectAllRows,
+      feature: texts.table2.shortcuts.selectAllRows,
       keys: ['Ctrl', 'A']
     });
   }
   if (table.options.enableExpanding) {
     shortcuts.push({
-      feature: tableTexts.shortcuts.expandRow,
+      feature: texts.table2.shortcuts.expandRow,
       keys: ['Ctrl', 'Right']
     });
     shortcuts.push({
-      feature: tableTexts.shortcuts.collapseRow,
+      feature: texts.table2.shortcuts.collapseRow,
       keys: ['Ctrl', 'Left']
     });
   }
   return /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "View keyboard shortcuts",
+    "aria-label": texts.table2.shortcuts.tooltip,
     icon: "shortcuts",
     popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
       align: "end"
@@ -13340,9 +13434,13 @@ const ShortcutsGuideButton = ({
 
 const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeButton(props, ref) {
   const {
+    scrollToIndex,
     table,
     tableRef
   } = props;
+  const {
+    texts
+  } = useLocalization();
   const internalRef = useMergedRef(ref);
   const meta = table.options.meta;
   const {
@@ -13364,26 +13462,40 @@ const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeB
   });
   React__default.useEffect(() => {
     window.addEventListener('beforeunload', showWarning);
-    return () => window.removeEventListener('beforeunload', showWarning);
+    return () => {
+      window.removeEventListener('beforeunload', showWarning);
+    };
   }, [showWarning]);
   const handleClick = () => {
     var _tableRef$current;
     meta.editMode.toggleEditing();
     (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+    scrollToIndex(meta.activeRowIndex + 1);
   };
+  const hasVisibleEditableColumns = React__default.useMemo(() => {
+    const hasColumns = table.getVisibleFlatColumns().some(column => {
+      var _column$columnDef$met;
+      return ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control) !== undefined;
+    });
+    if (!hasColumns && isEditing) {
+      handleClick();
+    }
+    return hasColumns;
+  }, [table.getState().columnVisibility]);
   return /*#__PURE__*/React__default.createElement(Button$1, {
     onClick: handleClick,
     className: cn({
       '!wcag-blue-100': meta.editMode.isEditing
     }),
+    disabled: !hasVisibleEditableColumns,
     ref: internalRef,
-    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Edit", /*#__PURE__*/React__default.createElement(Shortcut$1, {
+    tooltip: hasVisibleEditableColumns ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.editing.tooltip, /*#__PURE__*/React__default.createElement(Shortcut$1, {
       className: "ml-2",
       keys: ['Ctrl', 'E']
-    }))
+    })) : texts.table2.editing.tooltipDisabled
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "edit"
-  }), "Edit");
+  }), texts.table2.editing.button);
 });
 
 function Column$2(_) {
@@ -13470,7 +13582,15 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
           meta.setActiveRowIndex(rows.length - 1);
           virtualiser.scrollToOffset(virtualiser.totalSize + 1);
         } else {
-          meta.moveToNextRow(rows, nextIndex => virtualiser.scrollToIndex(nextIndex + 2));
+          meta.moveToNextRow(rows, nextIndex => {
+            // the virtualiser doesn't always scroll right to the bottom for the last row
+            if (nextIndex === rows.length - 1) {
+              var _tableRef$current;
+              (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.scrollTo(0, tableRef.current.scrollHeight);
+            } else {
+              virtualiser.scrollToIndex(nextIndex + 2);
+            }
+          });
         }
         return;
       }
@@ -13554,7 +13674,6 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
       }
     };
   }
-  // extract - infinite loading
   // TODO: this can probably be extracted into a hook
   // we only show the pinned shadow on display columns when scrolling is active
   const [scrolled, setScrolled] = React__default.useState(false);
@@ -13609,7 +13728,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     // sometimes the row's onMouseLeave doesn't trigger, this adds some extra redundancy
     handleMouseLeave = () => meta.setHoveredRowIndex(undefined);
   }
-  const className = cn('bg-white border border-grey-300 focus:yt-focus focus:border-blue-500 grid overflow-auto relative rounded group', props.className);
+  const className = cn('bg-white border border-grey-300 focus:yt-focus focus:border-blue-500 grid auto-rows-max overflow-auto relative rounded group', props.className);
   const enableSettingsButton = table.options.enablePinning || table.options.enableHiding || meta.enableColumnReordering;
   const hasInternalToolbar = enableSettingsButton || meta.editMode.enableEditMode || table.options.enableColumnFilters || meta.enableRowDensity || table.options.enableGlobalFilter;
   const hasToolbar = !!toolbar || hasInternalToolbar;
@@ -13627,7 +13746,8 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
   }, meta.editMode.enableEditMode ? /*#__PURE__*/React__default.createElement(EditModeButton, {
     ref: editButtonRef,
     table: table,
-    tableRef: tableRef
+    tableRef: tableRef,
+    scrollToIndex: virtualiser.scrollToIndex
   }) : null, table.options.enableColumnFilters ? /*#__PURE__*/React__default.createElement(FiltersButton, {
     length: length,
     table: table
@@ -13638,12 +13758,12 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
   }) : null, table.options.enableGlobalFilter ? /*#__PURE__*/React__default.createElement(Search$2, {
     disabled: meta.shouldDisableTableActions,
     onSearch: table.setGlobalFilter,
-    placeholder: "Search...",
     value: globalFilter
   }) : null) : null, /*#__PURE__*/React__default.createElement(ShortcutsGuideButton, {
     table: table
   })) : null, /*#__PURE__*/React__default.createElement("div", {
     className: className,
+    "data-taco": "table2",
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     onMouseLeave: handleMouseLeave,
@@ -13660,6 +13780,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "contents",
+    "data-taco": "table2-header",
     role: "rowgroup"
   }, table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React__default.createElement("div", {
     className: "contents",
@@ -13675,6 +13796,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     tableRef: tableRef
   }))))), rows.length ? /*#__PURE__*/React__default.createElement("div", {
     className: "contents",
+    "data-taco": "table2-body",
     role: "rowgroup"
   }, virtualiserOffsets.top ? /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -13715,7 +13837,8 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     className: "col-span-full min-h-[theme(spacing.8)]"
   }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null), hasFooters ? /*#__PURE__*/React__default.createElement("div", {
     role: "rowgroup",
-    className: "contents"
+    className: "contents",
+    "data-taco": "table2-footer"
   }, table.getFooterGroups().map(footerGroup => /*#__PURE__*/React__default.createElement("div", {
     key: footerGroup.id,
     role: "row",