@mantine-vue/table 2.4.0 → 3.1.0

package/lib/types.d.ts

@@ -6,6 +6,7 @@ import { type MVT_AggregationFns } from './fns/aggregationFns';
 import { type MVT_FilterFns } from './fns/filterFns';
 import { type MVT_SortingFns } from './fns/sortingFns';
 import { type MVT_Icons } from './icons';
+import type { MVT_ColumnServerGroupingOptions, MVT_ServerGroupingExpandedState, MVT_ServerGroupingOptions, MVT_ServerGroupingSelectAllState, MVT_ServerGroupingTableApi } from './server-grouping/serverGrouping.types';
 export type { MVT_Icons };
 /**
  * A Vue renderable node. Used for
@@ -120,6 +121,31 @@ export interface MVT_Localization {
     goToNextPage: string;
     goToPreviousPage: string;
     grab: string;
+    /** Optional (falls back to English) shown while a server-grouping level loads. */
+    loading?: string;
+    /** Optional (falls back to English) server-grouping load failure message. */
+    errorLoadingData?: string;
+    /** Optional (falls back to English) retry button of a failed server-grouping level. */
+    retry?: string;
+    /** Optional (falls back to English) group-by toolbar button label. */
+    groupBy?: string;
+    /** Optional (falls back to English) clear-grouping menu action. */
+    clearGrouping?: string;
+    /** Optional (falls back to English) empty group-by menu message. */
+    noGroupableColumns?: string;
+    /** Optional (falls back to English) reorder grouping level up. */
+    moveUp?: string;
+    /** Optional (falls back to English) reorder grouping level down. */
+    moveDown?: string;
+    /** Optional (falls back to English) select every record matching the filters. */
+    selectAllMatching?: string;
+    /** Optional (falls back to English) shown while a query selection is active. */
+    allMatchingRecordsSelected?: string;
+    /**
+     * Optional (falls back to English) selection count without a total — used
+     * while server grouping is active, where the row count refers to groups.
+     */
+    selectedCountRowsSelected?: string;
     groupByColumn: string;
     groupedBy: string;
     hideAll: string;
@@ -220,7 +246,9 @@ export type MVT_TableInstance<TData extends MVT_RowData> = {
     setShowColumnFilters: MVT_SetState<boolean>;
     setShowGlobalFilter: MVT_SetState<boolean>;
     setShowToolbarDropZone: MVT_SetState<boolean>;
-} & Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'>;
+    /** @internal server-grouping engine, present when `serverGrouping.provider` is set */
+    _serverGrouping?: unknown;
+} & MVT_ServerGroupingTableApi<TData> & Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'>;
 export type MVT_DefinedTableOptions<TData extends MVT_RowData> = {
     icons: MVT_Icons;
     localization: MVT_Localization;
@@ -242,6 +270,8 @@ export type MVT_TableState<TData extends MVT_RowData> = Prettify<{
     isFullScreen: boolean;
     isLoading: boolean;
     isSaving: boolean;
+    serverGroupingExpanded: MVT_ServerGroupingExpandedState;
+    serverGroupingSelectAll: MVT_ServerGroupingSelectAllState;
     showAlertBanner: boolean;
     showColumnFilters: boolean;
     showGlobalFilter: boolean;
@@ -250,7 +280,7 @@ export type MVT_TableState<TData extends MVT_RowData> = Prettify<{
     showSkeletons: boolean;
     showToolbarDropZone: boolean;
 } & TableState>;
-export type MVT_ColumnDef<TData extends MVT_RowData, TValue = unknown> = {
+export type MVT_ColumnDef<TData extends MVT_RowData, TValue = unknown, TGroup = unknown> = {
     /**
      * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
      * Specify a function here to point to the correct property in the data object.
@@ -449,6 +479,7 @@ export type MVT_ColumnDef<TData extends MVT_RowData, TValue = unknown> = {
         onSelectFilterMode: (filterMode: MVT_FilterOption) => void;
         table: MVT_TableInstance<TData>;
     }) => MVT_Node;
+    serverGrouping?: MVT_ColumnServerGroupingOptions<TGroup>;
     sortingFn?: MVT_SortingFn<TData>;
     visibleInShowHideMenu?: boolean;
 } & Omit<ColumnDef<TData, TValue>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'>;
@@ -794,6 +825,8 @@ export type MVT_TableOptions<TData extends MVT_RowData> = {
     onHoveredColumnChange?: OnChangeFn<null | Partial<MVT_Column<TData>>>;
     onHoveredRowChange?: OnChangeFn<null | Partial<MVT_Row<TData>>>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
+    onServerGroupingExpandedChange?: OnChangeFn<MVT_ServerGroupingExpandedState>;
+    onServerGroupingSelectAllChange?: OnChangeFn<MVT_ServerGroupingSelectAllState>;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowColumnFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
@@ -880,6 +913,7 @@ export type MVT_TableOptions<TData extends MVT_RowData> = {
     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
     selectAllMode?: 'all' | 'page';
     selectDisplayMode?: 'checkbox' | 'radio' | 'switch';
+    serverGrouping?: MVT_ServerGroupingOptions<TData, any, any, any>;
     /**
      * Manage state externally any way you want, then pass it back into MVT.
      */

package/lib/utils/style.utils.d.ts

@@ -1,6 +1,18 @@
+import { type CSSProperties } from 'vue';
 import { type MantineTheme } from '@mantine-vue/core';
 import { type MantineShade } from '../types';
 export declare const parseCSSVarId: (id: string) => string;
+/**
+ * Width/flex styles that bind a cell to its column's live size variables, so
+ * custom cells (server-grouping group rows, …) stay aligned with the root
+ * table while columns are resized or reordered.
+ */
+export declare const getMVT_ColumnWidthStyles: ({ columnId, grow, layoutMode, minSize, }: {
+    columnId: string;
+    grow?: boolean | number;
+    layoutMode?: "grid" | "grid-no-grow" | "semantic";
+    minSize?: number;
+}) => CSSProperties;
 export declare const getPrimaryShade: (theme: MantineTheme) => number;
 export declare const getPrimaryColor: (theme: MantineTheme, shade?: MantineShade) => string;
 export declare function dataVariable(name: string, value: boolean | number | string | undefined): {

package/locales/en.cjs

@@ -2,12 +2,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/locales/en.ts
 var MVT_Localization_EN = {
 	actions: "Actions",
+	allMatchingRecordsSelected: "All records matching the current filters are selected",
 	and: "and",
 	cancel: "Cancel",
 	changeFilterMode: "Change filter mode",
 	changeSearchMode: "Change search mode",
 	clearFilter: "Clear filter",
 	clearSearch: "Clear search",
+	clearGrouping: "Clear grouping",
 	clearSelection: "Clear selection",
 	clearSort: "Clear sort",
 	clickToCopy: "Click to copy",
@@ -18,6 +20,7 @@ var MVT_Localization_EN = {
 	copiedToClipboard: "Copied to clipboard",
 	dropToGroupBy: "Drop to group by {column}",
 	edit: "Edit",
+	errorLoadingData: "Error loading data",
 	expand: "Expand",
 	expandAll: "Expand all",
 	filterArrIncludes: "Includes",
@@ -50,13 +53,18 @@ var MVT_Localization_EN = {
 	goToNextPage: "Go to next page",
 	goToPreviousPage: "Go to previous page",
 	grab: "Grab",
+	groupBy: "Group by",
 	groupByColumn: "Group by {column}",
 	groupedBy: "Grouped by ",
 	hideAll: "Hide all",
 	hideColumn: "Hide {column} column",
+	loading: "Loading…",
 	max: "Max",
 	min: "Min",
 	move: "Move",
+	moveDown: "Move down",
+	moveUp: "Move up",
+	noGroupableColumns: "No groupable columns",
 	noRecordsToDisplay: "No records to display",
 	noResultsFound: "No results found",
 	of: "of",
@@ -66,6 +74,7 @@ var MVT_Localization_EN = {
 	pinToRight: "Pin to right",
 	resetColumnSize: "Reset column size",
 	resetOrder: "Reset order",
+	retry: "Retry",
 	rowActions: "Row Actions",
 	rowNumber: "#",
 	rowNumbers: "Row Numbers",
@@ -73,7 +82,9 @@ var MVT_Localization_EN = {
 	save: "Save",
 	search: "Search",
 	selectedCountOfRowCountRowsSelected: "{selectedCount} of {rowCount} row(s) selected",
+	selectedCountRowsSelected: "{selectedCount} row(s) selected",
 	select: "Select",
+	selectAllMatching: "Select all matching records",
 	showAll: "Show all",
 	showAllColumns: "Show all columns",
 	showHideColumns: "Show/Hide columns",

package/locales/en.mjs

@@ -1,12 +1,14 @@
 //#region src/locales/en.ts
 var MVT_Localization_EN = {
 	actions: "Actions",
+	allMatchingRecordsSelected: "All records matching the current filters are selected",
 	and: "and",
 	cancel: "Cancel",
 	changeFilterMode: "Change filter mode",
 	changeSearchMode: "Change search mode",
 	clearFilter: "Clear filter",
 	clearSearch: "Clear search",
+	clearGrouping: "Clear grouping",
 	clearSelection: "Clear selection",
 	clearSort: "Clear sort",
 	clickToCopy: "Click to copy",
@@ -17,6 +19,7 @@ var MVT_Localization_EN = {
 	copiedToClipboard: "Copied to clipboard",
 	dropToGroupBy: "Drop to group by {column}",
 	edit: "Edit",
+	errorLoadingData: "Error loading data",
 	expand: "Expand",
 	expandAll: "Expand all",
 	filterArrIncludes: "Includes",
@@ -49,13 +52,18 @@ var MVT_Localization_EN = {
 	goToNextPage: "Go to next page",
 	goToPreviousPage: "Go to previous page",
 	grab: "Grab",
+	groupBy: "Group by",
 	groupByColumn: "Group by {column}",
 	groupedBy: "Grouped by ",
 	hideAll: "Hide all",
 	hideColumn: "Hide {column} column",
+	loading: "Loading…",
 	max: "Max",
 	min: "Min",
 	move: "Move",
+	moveDown: "Move down",
+	moveUp: "Move up",
+	noGroupableColumns: "No groupable columns",
 	noRecordsToDisplay: "No records to display",
 	noResultsFound: "No results found",
 	of: "of",
@@ -65,6 +73,7 @@ var MVT_Localization_EN = {
 	pinToRight: "Pin to right",
 	resetColumnSize: "Reset column size",
 	resetOrder: "Reset order",
+	retry: "Retry",
 	rowActions: "Row Actions",
 	rowNumber: "#",
 	rowNumbers: "Row Numbers",
@@ -72,7 +81,9 @@ var MVT_Localization_EN = {
 	save: "Save",
 	search: "Search",
 	selectedCountOfRowCountRowsSelected: "{selectedCount} of {rowCount} row(s) selected",
+	selectedCountRowsSelected: "{selectedCount} row(s) selected",
 	select: "Select",
+	selectAllMatching: "Select all matching records",
 	showAll: "Show all",
 	showAllColumns: "Show all columns",
 	showHideColumns: "Show/Hide columns",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/table",
-  "version": "2.4.0",
+  "version": "3.1.0",
   "description": "A fully featured Vue 3 implementation of TanStack Vue Table",
   "keywords": [
     "data grid",
@@ -65,9 +65,9 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/core": "2.4.0",
-    "@mantine-vue/dates": "2.4.0",
-    "@mantine-vue/hooks": "2.4.0",
+    "@mantine-vue/core": "3.1.0",
+    "@mantine-vue/dates": "3.1.0",
+    "@mantine-vue/hooks": "3.1.0",
     "@tabler/icons-vue": ">=3.0.0",
     "@tanstack/match-sorter-utils": ">=8.7",
     "@tanstack/vue-table": ">=8.20",

package/styles.css

@@ -210,6 +210,66 @@
 ._paginator-container-alert-banner_1k7ch_33 {
   position: relative !important;
 }
+._group-row_u9zpp_1 {
+  background-color: var(--mantine-color-gray-0);
+}
+  [data-mantine-color-scheme='dark'] ._group-row_u9zpp_1 {
+  background-color: var(--mantine-color-dark-6);
+}
+  ._group-row_u9zpp_1 {
+  width: 100%;
+}
+
+/* grid layout modes (used when column resizing is enabled) */
+._row-grid_u9zpp_7 {
+  display: flex;
+}
+
+._group-cell_u9zpp_11 {
+  white-space: nowrap;
+}
+
+._aggregate-cell_u9zpp_15 {
+  font-weight: 600;
+}
+
+._expand-spacer_u9zpp_19 {
+  display: inline-block;
+  width: calc(1.625rem * var(--mantine-scale));
+}
+
+._aux-row_u9zpp_24 {
+  background-color: transparent;
+}
+
+._aux-cell_u9zpp_28 {
+  padding-block: calc(0.375rem * var(--mantine-scale));
+}
+
+._pagination_u9zpp_32 {
+  justify-content: flex-start;
+}
+
+._pagesize_u9zpp_36 {
+  width: calc(5rem * var(--mantine-scale));
+}
+
+._groupby-control_u9zpp_40 {
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+._groupby-active-row_u9zpp_45 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.25rem * var(--mantine-scale));
+  padding: calc(0.125rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
+}
+
+._groupby-active-label_u9zpp_52 {
+  flex: 1;
+  min-width: calc(5rem * var(--mantine-scale));
+}
 ._symbol_1b3vj_1 {
   font-size: var(--mantine-font-size-xl);
   text-align: center;

package/styles.layer.css

@@ -211,6 +211,66 @@
 ._paginator-container-alert-banner_1k7ch_33 {
   position: relative !important;
 }
+._group-row_u9zpp_1 {
+  background-color: var(--mantine-color-gray-0);
+}
+  [data-mantine-color-scheme='dark'] ._group-row_u9zpp_1 {
+  background-color: var(--mantine-color-dark-6);
+}
+  ._group-row_u9zpp_1 {
+  width: 100%;
+}
+
+/* grid layout modes (used when column resizing is enabled) */
+._row-grid_u9zpp_7 {
+  display: flex;
+}
+
+._group-cell_u9zpp_11 {
+  white-space: nowrap;
+}
+
+._aggregate-cell_u9zpp_15 {
+  font-weight: 600;
+}
+
+._expand-spacer_u9zpp_19 {
+  display: inline-block;
+  width: calc(1.625rem * var(--mantine-scale));
+}
+
+._aux-row_u9zpp_24 {
+  background-color: transparent;
+}
+
+._aux-cell_u9zpp_28 {
+  padding-block: calc(0.375rem * var(--mantine-scale));
+}
+
+._pagination_u9zpp_32 {
+  justify-content: flex-start;
+}
+
+._pagesize_u9zpp_36 {
+  width: calc(5rem * var(--mantine-scale));
+}
+
+._groupby-control_u9zpp_40 {
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+._groupby-active-row_u9zpp_45 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.25rem * var(--mantine-scale));
+  padding: calc(0.125rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
+}
+
+._groupby-active-label_u9zpp_52 {
+  flex: 1;
+  min-width: calc(5rem * var(--mantine-scale));
+}
 ._symbol_1b3vj_1 {
   font-size: var(--mantine-font-size-xl);
   text-align: center;