@dazzadev/vuetify-datatable 1.1.0 → 1.2.1

package/README.md

@@ -73,6 +73,94 @@ so point it at whatever your bulk endpoint expects — not necessarily `id`.
 marks every loaded row, `single` allows one row at a time. With server-side pagination `page` is
 usually what you want — the table only holds the rows it has fetched.
 
+## Wide Tables
+
+When the columns don't fit, the table helps the user find and keep what they need. Nothing of
+this shows while every column fits.
+
+- **Hidden columns indicator**: a fade on the side with more columns, a round arrow on the header
+  row that scrolls about 300 px, and a "Scroll to see more columns" hint above it until the first
+  scroll.
+- **Pinned actions column**: the header with key `actions` always goes last and sticks to the
+  right edge, with a shadow while columns pass under it.
+- **Column chooser**: a "Columns" button above the table to show, hide, search and reorder
+  columns (drag, or the arrow keys on the handle). It reads "Columns · N hidden" while columns are
+  hidden, and stays visible in that case even if the rest fits. `actions`, expand and select
+  columns are never listed.
+
+The choices are saved in `localStorage`, keyed by the set of header keys. Texts and the storage
+key can be set in the global config:
+
+```ts
+app.use(
+  createDataTableConfig({
+    texts: {
+      columns: () => i18n.global.t("dataTable.columns"),
+      hiddenColumns: (count) => i18n.global.t("dataTable.hiddenColumns", { count }, count),
+      scrollHint: "Desliza para ver más columnas",
+    },
+    storageKey: (key) => `${tenant}:${key}`,
+  }),
+);
+```
+
+Each text accepts a string or a function, which is read on every render so it follows the
+current locale. Available texts: `columns`, `hiddenColumns`, `searchColumns`, `showAllColumns`,
+`hideAllColumns`, `resetColumns`, `moveColumn`, `scrollHint`, `scrollLeft`, `scrollRight`.
+
+Attributes that are not props (`row-props`, `density`, `hover`…) are passed to the inner
+`v-data-table-server`.
+
+### Custom column chooser
+
+The `column-chooser` slot replaces the default button and dropdown, for example with a dialog.
+It is shown in the same place and under the same conditions as the default one. The table keeps
+the state and saves it; the slot only renders it.
+
+```vue
+<DataTable :headers="headers" :items="items" @onLoadData="loadData">
+  <template #column-chooser="{ columns, label, setVisible, move, reset }">
+    <v-btn size="small" @click="dialog = true">{{ label }}</v-btn>
+    <v-dialog v-model="dialog" max-width="420">
+      <v-card title="Columns">
+        <v-list>
+          <v-list-item v-for="column in columns" :key="column.key">
+            <v-checkbox-btn
+              :model-value="column.visible"
+              :label="column.title"
+              @update:model-value="setVisible(column.key, !!$event)"
+            />
+            <template #append>
+              <v-btn icon="mdi-arrow-up" variant="text" size="small" @click="move(column.key, -1)" />
+              <v-btn icon="mdi-arrow-down" variant="text" size="small" @click="move(column.key, 1)" />
+            </template>
+          </v-list-item>
+        </v-list>
+        <v-card-actions>
+          <v-btn @click="reset">Reset</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </template>
+</DataTable>
+```
+
+| Slot prop     | Type                                         | Description                                       |
+| ------------- | -------------------------------------------- | ------------------------------------------------- |
+| `columns`     | `DataTableColumn[]`                          | `{ key, title, visible }` in the current order    |
+| `hiddenCount` | `number`                                     | How many columns are hidden                       |
+| `label`       | `string`                                     | "Columns", or "Columns · N hidden"                |
+| `setVisible`  | `(key: string, visible: boolean) => void`    | Shows or hides one column                         |
+| `toggleAll`   | `() => void`                                 | Shows all, or hides all when every one is visible |
+| `move`        | `(key: string, step: -1 \| 1) => void`       | Moves a column one place up or down               |
+| `place`       | `(key: string, targetKey: string) => void`   | Moves a column to another one's position (drag)   |
+| `reset`       | `() => void`                                 | Restores the original order and visibility        |
+
+To only restyle the default chooser, target its classes: `.vdt-columns__button` (the button),
+`.vdt-columns` (the dropdown card), `.vdt-columns__list`, `.vdt-columns__item` and
+`.vdt-columns__handle`. The dropdown is rendered in Vuetify's overlay container, so its rules
+must not be scoped to the table.
+
 ## Icon Configuration
 
 Icons can be configured at 4 levels of priority (highest to lowest):
@@ -187,7 +275,7 @@ If no configuration is provided, the component uses Material Design Icons (inclu
 | `view-icon`              | Custom view icon                           |
 | `edit-icon`              | Custom edit icon                           |
 | `delete-icon`            | Custom delete icon                         |
-| `item.tfoot`             | Table footer content                       |
+| `item.tfoot`             | Table footer content. Receives `{ columns }`: the visible headers, in display order |
 | `selection-actions`      | Bar above the table, for bulk actions. Only rendered when `showSelect`. Receives `{ selected, count, clear }` |
 
 ## Peer Dependencies

package/dist/components/DataTable.vue.d.ts

@@ -1,4 +1,4 @@
-import type { TableHeader } from '../types';
+import type { TableHeader, DataTableColumn } from '../types';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onOnLoadData?: ((...args: any[]) => any) | undefined;
@@ -53,6 +53,17 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
             columns: any;
             item: any;
         }) => any) | undefined;
+    } & {
+        'column-chooser'?: (props: {
+            columns: DataTableColumn[];
+            hiddenCount: number;
+            label: string;
+            setVisible: (key: string, visible: boolean) => void;
+            toggleAll: () => void;
+            reset: () => void;
+            move: (key: string, step: -1 | 1) => void;
+            place: (key: string, targetKey: string) => void;
+        }) => any;
     } & {
         'selection-actions'?: (props: {
             selected: (string | number)[];
@@ -74,7 +85,9 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
             item: any;
         }) => any;
     } & {
-        'item.tfoot'?: (props: {}) => any;
+        'item.tfoot'?: (props: {
+            columns: TableHeader[];
+        }) => any;
     };
     emit: (event: "onLoadData" | "editItem" | "deleteItem" | "viewItem" | "update:modelValue", ...args: any[]) => void;
 }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import DataTable from "./components/DataTable.vue";
 import { createDataTableConfig, DATA_TABLE_CONFIG_KEY } from "./config";
 export { DataTable };
 export { createDataTableConfig, DATA_TABLE_CONFIG_KEY };
-export type { DataTableConfig, DataTableIconConfig, TableHeader, SortItem, LoadDataParams, } from "./types";
+export type { DataTableColumn, DataTableConfig, DataTableIconConfig, DataTableText, DataTableTexts, TableHeader, SortItem, LoadDataParams, } from "./types";
 declare const _default: {
     install(app: App): void;
 };

package/dist/types.d.ts

@@ -15,10 +15,33 @@ export interface DataTableIconConfig {
     edit?: string | Component;
     delete?: string | Component;
 }
+/** A UI text, either fixed or read on every render (e.g. `() => i18n.global.t("key")`). */
+export type DataTableText = string | (() => string);
+export interface DataTableTexts {
+    columns?: DataTableText;
+    hiddenColumns?: (count: number) => string;
+    searchColumns?: DataTableText;
+    showAllColumns?: DataTableText;
+    hideAllColumns?: DataTableText;
+    resetColumns?: DataTableText;
+    moveColumn?: DataTableText;
+    scrollHint?: DataTableText;
+    scrollLeft?: DataTableText;
+    scrollRight?: DataTableText;
+}
+/** A column as listed by the column chooser, in its current order. */
+export interface DataTableColumn {
+    key: string;
+    title: string;
+    visible: boolean;
+}
 export interface DataTableConfig {
     icons?: DataTableIconConfig;
     iconProps?: Record<string, unknown>;
     tableClass?: string;
+    texts?: DataTableTexts;
+    /** Maps the localStorage key where column choices are saved (e.g. to add a tenant prefix). */
+    storageKey?: (key: string) => string;
 }
 export interface LoadDataParams {
     page: number;