@digitalwalletcorp/vue-core 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalwalletcorp/vue-core",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "type": "module",
   "description": "Basic UI components for Vue 3",
   "main": "lib/index.cjs",

package/src/data-table.vue

@@ -19,12 +19,12 @@
 <template>
   <section
     class="dwui-data-table"
-    :class="{ 'dwui-selectable': props.selectable }"
+    :class="{ 'dwui-selectable': settings.selectable }"
   >
     <DataTableControls
-      v-if="props.controls === 'both' || props.controls === 'top'"
+      v-if="settings.controls === 'both' || settings.controls === 'top'"
       v-bind="controlProps"
-      :pagination="props.pagination === 'both' || props.pagination === 'top'"
+      :pagination="settings.pagination === 'both' || settings.pagination === 'top'"
       @emit:change-page="emit('emit:changePage', $event)"
       @emit:change-limit="emit('emit:changeLimit', $event)"
       @emit:download-page="emit('emit:downloadPage')"
@@ -33,14 +33,14 @@
     <div
       ref="refContent"
       class="dwui-data-table-content"
-      :class="[{ 'dwui-loading': props.loading }, props.contentClass]"
-      :style="props.contentStyle"
+      :class="[{ 'dwui-loading': props.loading }, settings.contentClass]"
+      :style="settings.contentStyle"
       tabindex="-1"
       @keydown="onKeyDown"
     >
       <table
-        :class="props.tableClass"
-        :style="props.tableStyle"
+        :class="settings.tableClass"
+        :style="settings.tableStyle"
       >
         <thead ref="refThead">
           <tr>
@@ -57,8 +57,8 @@
               <div class="dwui-data-table-header">
                 <span
                   class="dwui-data-table-sort"
-                  :role="props.sortable ? 'button' : undefined"
-                  :tabindex="props.sortable ? 0 : undefined"
+                  :role="settings.sortable ? 'button' : undefined"
+                  :tabindex="settings.sortable ? 0 : undefined"
                   @click="onClickSort(header)"
                   @keydown.enter.prevent="onClickSort(header)"
                   @keydown.space.prevent="onClickSort(header)"
@@ -76,7 +76,7 @@
                 </span>
               </div>
               <div
-                v-if="props.resizable && index < innerHeaders.length - 1"
+                v-if="settings.resizable && index < innerHeaders.length - 1"
                 class="dwui-data-table-resizer"
                 @pointerdown="onResizeStart($event, index)"
                 @pointermove="onResizing"
@@ -96,7 +96,7 @@
               :selected-index="selectedIndex"
             />
             <tr
-              v-if="props.dataList.length === 0 && props.showNoData"
+              v-if="props.dataList.length === 0 && settings.showNoData"
               class="dwui-data-table-no-data"
             >
               <td :colspan="totalColSize">
@@ -116,9 +116,9 @@
       </div>
     </div>
     <DataTableControls
-      v-if="props.controls === 'both' || props.controls === 'bottom'"
+      v-if="settings.controls === 'both' || settings.controls === 'bottom'"
       v-bind="controlProps"
-      :pagination="props.pagination === 'both' || props.pagination === 'bottom'"
+      :pagination="settings.pagination === 'both' || settings.pagination === 'bottom'"
       @emit:change-page="emit('emit:changePage', $event)"
       @emit:change-limit="emit('emit:changeLimit', $event)"
       @emit:download-page="emit('emit:downloadPage')"
@@ -128,32 +128,130 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
-import type { StyleValue } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import type { ClassValue, StyleValue } from 'vue';
 import { SvgPointingTriangle } from '@digitalwalletcorp/vue-svg-icons';
 import DataTableControls from '@/internal/data-table-controls.vue';
 import { compareValues, getValueByPath, resolveLabel, stringifyValue } from '@/internal/data-table-value';
-import type { DataTableEmits, DataTableHeader, DataTableLabels, DataTableProps, DataTableResolvedLabels, DataTableSlots, DataTableSortContext } from '@/types/data-table';
+import { vueCoreOptionsKey } from '@/helpers/vue-core-options';
+import type { DataTableOptions } from '@/helpers/vue-core-options';
+import type { DataTableControlsPlacement, DataTableHeader, DataTableLabels, DataTableResolvedLabels, DataTableSortContext, DataTableSortMode } from '@/types/data-table';
 
-const props = withDefaults(defineProps<DataTableProps<T>>(), {
+/**
+ * DataTable の props
+ */
+export interface Props<T = unknown> {
+  /** 表示している行のデータ。スロットで描画する行と同じ順に並んでいること */
+  dataList: T[];
+  /** ヘッダ。id は一意であること */
+  headers: DataTableHeader<T>[];
+  /** 読み込み中。true の間は行を描画せず読み込み中の表示を出す */
+  loading?: boolean;
+  /** 総件数。未指定なら dataList の件数 */
+  totalCount?: number;
+  /** 現在ページ(1起点) */
+  current?: number;
+  /** 1ページあたりの表示件数 */
+  limit?: number;
+  /** 1ページあたりの表示件数の上限 */
+  maxLimit?: number;
+  /** ページネーションに並べるページ番号の最大数 */
+  maxPagination?: number;
+  /** 行をクリックで選択できるか */
+  selectable?: boolean;
+  /** コントロールを出す位置 */
+  controls?: DataTableControlsPlacement;
+  /** ページネーションを出す位置。controls が無い側には出ない */
+  pagination?: DataTableControlsPlacement;
+  /** ページダウンロードボタンを表示するか */
+  showDownloadPage?: boolean;
+  /** 全件ダウンロードボタンを表示するか */
+  showDownloadAll?: boolean;
+  /** 総件数を表示するか */
+  showTotal?: boolean;
+  /** 1ページあたりの表示件数の入力を表示するか */
+  showLimit?: boolean;
+  /** ページネーションにページ番号の選択を表示するか */
+  showPageSelect?: boolean;
+  /** dataList が空のときにデータが無い旨の行を表示するか */
+  showNoData?: boolean;
+  /** ヘッダの境界のドラッグで列幅を変えられるか */
+  resizable?: boolean;
+  /** ヘッダのクリックでソートできるか */
+  sortable?: boolean;
+  /** ソートの方式。未指定なら remote */
+  sortMode?: DataTableSortMode;
+  /** テーブルをスクロールする領域に付ける class */
+  contentClass?: ClassValue;
+  /** テーブルをスクロールする領域に付ける style */
+  contentStyle?: StyleValue;
+  /** table に付ける class */
+  tableClass?: ClassValue;
+  /** table に付ける style */
+  tableStyle?: StyleValue;
+  /** 表示する文言。未指定の項目は英語 */
+  labels?: DataTableLabels;
+  /** 総件数の整形。未指定なら en-US の桁区切り。SSR とクライアントで同じ文字列を返すこと */
+  formatTotalCount?: (count: number) => string;
+}
+
+/**
+ * DataTable が発行するイベント
+ */
+export interface Emits<T = unknown> {
+  /** 選択が変わった。クリックでの選択・解除、カーソルキーでの移動、読み込み完了時の解除で発行する。解除は undefined と -1 */
+  (e: 'emit:selectRow', value: T | undefined, index: number): void;
+  /** ソートの条件が変わった。sortMode に関わらず発行する */
+  (e: 'emit:changeSort', context: DataTableSortContext): void;
+  (e: 'emit:updateHeader', headers: DataTableHeader<T>[]): void;
+  (e: 'emit:dblclickRow', value: T, index: number): void;
+  (e: 'emit:changeLimit', limit: number): void;
+  (e: 'emit:changePage', page: number): void;
+  (e: 'emit:downloadPage'): void;
+  (e: 'emit:downloadAll'): void;
+}
+
+/**
+ * DataTable のスロット
+ */
+export interface Slots<T = unknown> {
+  /** 行。tr を rows と同じ順に並べ、tr の click で clickRow(row, index) を呼ぶ */
+  default?(props: {
+    /** 表示する行。sortMode が page のときはソートした順、それ以外は dataList そのもの */
+    rows: T[];
+    /** 行を選択する。選択している行なら選択を解除する */
+    clickRow: (row: T, index: number) => void;
+    /** 行を選択してダブルクリックを通知する */
+    dblclickRow: (row: T, index: number) => void;
+    /** 行のインデックスから、ページをまたいだ1起点の行番号を返す */
+    rowNumber: (index: number) => number;
+    /** 選択している行のインデックス。選択していなければ -1 */
+    selectedIndex: number;
+  }): unknown;
+  /** 読み込み中の表示。未指定なら既定のスピナー */
+  loading?(): unknown;
+}
+
+// 設定の props は未指定を undefined のまま受け、vueCoreOptionsKey の値とライブラリ既定で埋める(boolean が false にならないよう既定を明示する)
+const props = withDefaults(defineProps<Props<T>>(), {
   loading: false,
   totalCount: undefined,
   current: 1,
   limit: 100,
-  maxLimit: 9999,
-  maxPagination: 7,
-  selectable: true,
-  controls: 'both',
-  pagination: 'both',
-  showDownloadPage: true,
-  showDownloadAll: true,
-  showTotal: true,
-  showLimit: true,
-  showPageSelect: false,
-  showNoData: true,
-  resizable: true,
-  sortable: true,
-  sortMode: 'remote',
+  maxLimit: undefined,
+  maxPagination: undefined,
+  selectable: undefined,
+  controls: undefined,
+  pagination: undefined,
+  showDownloadPage: undefined,
+  showDownloadAll: undefined,
+  showTotal: undefined,
+  showLimit: undefined,
+  showPageSelect: undefined,
+  showNoData: undefined,
+  resizable: undefined,
+  sortable: undefined,
+  sortMode: undefined,
   formatTotalCount: undefined,
   contentClass: undefined,
   contentStyle: undefined,
@@ -162,9 +260,11 @@ const props = withDefaults(defineProps<DataTableProps<T>>(), {
   labels: undefined
 });
 
-const emit = defineEmits<DataTableEmits<T>>();
+const emit = defineEmits<Emits<T>>();
 
-defineSlots<DataTableSlots<T>>();
+defineSlots<Slots<T>>();
+
+const appOptions = inject(vueCoreOptionsKey, {});
 
 const refContent = ref<HTMLDivElement>();
 const refThead = ref<HTMLTableSectionElement>();
@@ -186,6 +286,45 @@ const innerHeaders = computed((): DataTableHeader<T>[] => {
   return props.headers.map(header => widths.value[header.id] == null ? header : { ...header, width: widths.value[header.id] });
 });
 
+/** 設定のライブラリ既定。labels は項目ごとに合わせるため別に持つ */
+const DEFAULT_SETTINGS: Omit<DataTableOptions, 'labels'> = {
+  maxLimit: 9999,
+  maxPagination: 7,
+  selectable: true,
+  controls: 'both',
+  pagination: 'both',
+  showDownloadPage: true,
+  showDownloadAll: true,
+  showTotal: true,
+  showLimit: true,
+  showPageSelect: false,
+  showNoData: true,
+  resizable: true,
+  sortable: true,
+  sortMode: 'remote',
+  contentClass: undefined,
+  contentStyle: undefined,
+  tableClass: undefined,
+  tableStyle: undefined,
+  formatTotalCount: undefined
+};
+
+type OptionalSettingKey = 'contentClass' | 'contentStyle' | 'tableClass' | 'tableStyle' | 'formatTotalCount';
+type DataTableSettings = Required<Omit<DataTableOptions, 'labels' | OptionalSettingKey>> & Pick<DataTableOptions, OptionalSettingKey>;
+
+/** 設定。props、vueCoreOptionsKey の dataTable、ライブラリ既定の順に、指定のあるものを使う */
+const settings = computed((): DataTableSettings => {
+  const resolved = { ...DEFAULT_SETTINGS } as DataTableSettings;
+  for (const source of [appOptions.dataTable ?? {}, props]) {
+    for (const key of Object.keys(DEFAULT_SETTINGS) as (keyof typeof DEFAULT_SETTINGS)[]) {
+      if (source[key] !== undefined) {
+        Object.assign(resolved, { [key]: source[key] });
+      }
+    }
+  }
+  return resolved;
+});
+
 const labels = computed((): DataTableResolvedLabels => {
   const merged: Required<DataTableLabels> = {
     totalCount: 'Total',
@@ -201,6 +340,7 @@ const labels = computed((): DataTableResolvedLabels => {
     nextPages: 'Next pages',
     nextPage: 'Next page',
     lastPage: 'Last page',
+    ...appOptions.dataTable?.labels,
     ...props.labels
   };
   const resolved = {} as DataTableResolvedLabels;
@@ -212,22 +352,22 @@ const labels = computed((): DataTableResolvedLabels => {
 });
 
 const limit = computed((): number => {
-  return Math.min(props.limit, props.maxLimit);
+  return Math.min(props.limit, settings.value.maxLimit);
 });
 
 const controlProps = computed(() => {
   return {
-    showTotal: props.showTotal,
-    showLimit: props.showLimit,
-    showPageSelect: props.showPageSelect,
-    showDownloadPage: props.showDownloadPage,
-    showDownloadAll: props.showDownloadAll,
+    showTotal: settings.value.showTotal,
+    showLimit: settings.value.showLimit,
+    showPageSelect: settings.value.showPageSelect,
+    showDownloadPage: settings.value.showDownloadPage,
+    showDownloadAll: settings.value.showDownloadAll,
     current: props.current,
     limit: limit.value,
-    maxLimit: props.maxLimit,
-    maxPagination: props.maxPagination,
+    maxLimit: settings.value.maxLimit,
+    maxPagination: settings.value.maxPagination,
     totalCount: props.totalCount ?? props.dataList.length,
-    formatTotalCount: props.formatTotalCount,
+    formatTotalCount: settings.value.formatTotalCount,
     labels: labels.value
   };
 });
@@ -237,7 +377,7 @@ const selectedRow = shallowRef<T | undefined>(undefined);
 
 /** 表示する行。ページ内ソート中は dataList を並べ替えたコピー、それ以外は dataList そのもの */
 const rows = computed((): T[] => {
-  const header = props.sortMode === 'page' ? props.headers.find(header => header.id === sortKey.value) : undefined;
+  const header = settings.value.sortMode === 'page' ? props.headers.find(header => header.id === sortKey.value) : undefined;
   if (!header) {
     return props.dataList;
   }
@@ -293,7 +433,7 @@ const ariaSort = (id: string): 'ascending' | 'descending' | undefined => {
 };
 
 const caretDirection = (id: string): 'up' | 'down' | undefined => {
-  if (!props.sortable || sortKey.value !== id) {
+  if (!settings.value.sortable || sortKey.value !== id) {
     return undefined;
   }
   return descending.value ? 'down' : 'up';
@@ -356,7 +496,7 @@ const select = (row: T | undefined, index: number): void => {
  * 行を選択する。選択している行なら選択を解除する
  */
 const clickRow = (row: T, index: number): void => {
-  if (!props.selectable) {
+  if (!settings.value.selectable) {
     return;
   }
   if (index === selectedIndex.value) {
@@ -395,7 +535,7 @@ const onKeyDown = (event: KeyboardEvent): void => {
 };
 
 const onClickSort = (header: DataTableHeader<T>): void => {
-  if (!props.sortable || props.dataList.length === 0) {
+  if (!settings.value.sortable || props.dataList.length === 0) {
     return;
   }
   descending.value = sortKey.value === header.id ? !descending.value : false;
@@ -410,7 +550,7 @@ const onClickSort = (header: DataTableHeader<T>): void => {
  * 列幅の変更を始める。すべての列の幅を今の表示幅で固定してから変更する
  */
 const onResizeStart = (event: PointerEvent, index: number): void => {
-  if (!props.resizable) {
+  if (!settings.value.resizable) {
     return;
   }
   event.preventDefault();
@@ -478,7 +618,7 @@ watch(() => props.loading, (newValue, oldValue) => {
   // 読み込みが終わったら、前のデータに対する選択は引き継がない。
   // ページ内ソートも同様だが、remote のソート条件は再取得後も有効なので保つ
   if (oldValue && !newValue) {
-    if (props.sortMode === 'page') {
+    if (settings.value.sortMode === 'page') {
       sortKey.value = '';
       descending.value = false;
     }

package/src/helpers/vue-core-options.ts

@@ -0,0 +1,20 @@
+import type { InjectionKey } from 'vue';
+import type { Props } from '@/data-table.vue';
+
+/**
+ * DataTable のアプリ既定の設定。vueCoreOptionsKey の dataTable で渡す。
+ * props のうちデータと表示の状態を除いた項目を持ち、DataTable の props に同じ名前の指定があればそちらが優先される
+ */
+export type DataTableOptions = Partial<Omit<Props, 'dataList' | 'headers' | 'loading' | 'totalCount' | 'current' | 'limit'>>;
+
+/** アプリ全体の設定 */
+export type VueCoreOptions = {
+  /** DataTable のアプリ既定の設定 */
+  dataTable?: DataTableOptions;
+};
+
+/**
+ * アプリ全体の設定を provide/inject するためのキー
+ * provide は任意。画面の上位または app.provide で使う
+ */
+export const vueCoreOptionsKey: InjectionKey<VueCoreOptions> = Symbol('dwui-vue-core-options');

package/src/index.ts

@@ -2,6 +2,7 @@ export * from '@/components';
 export type { Props as AccordionFieldsetProps, Slots as AccordionFieldsetSlots } from '@/accordion-fieldset.vue';
 export type { Props as AccordionSectionProps, Slots as AccordionSectionSlots } from '@/accordion-section.vue';
 export type { Props as CopyButtonProps, Emits as CopyButtonEmits, Slots as CopyButtonSlots } from '@/copy-button.vue';
+export type { Props as DataTableProps, Emits as DataTableEmits, Slots as DataTableSlots } from '@/data-table.vue';
 export type { Props as DarkModeSelectorProps, Emits as DarkModeSelectorEmits, Slots as DarkModeSelectorSlots } from '@/dark-mode-selector.vue';
 export type { Props as HelpButtonProps, Emits as HelpButtonEmits, Slots as HelpButtonSlots } from '@/help-button.vue';
 export type { Props as HelpPopperProps, Emits as HelpPopperEmits, Slots as HelpPopperSlots } from '@/help-popper.vue';
@@ -18,7 +19,7 @@ export type { Props as TabContentProps, Slots as TabContentSlots } from '@/tab-c
 export type { Props as TabGroupProps, Slots as TabGroupSlots } from '@/tab-group.vue';
 export type { Props as WarningPopperProps, Emits as WarningPopperEmits, Slots as WarningPopperSlots } from '@/warning-popper.vue';
 export { headersToCsvColumns, rowToCsvColumns } from '@/helpers/data-table-csv';
-export type { DataTableControlsPlacement, DataTableCsvColumn, DataTableEmits, DataTableHeader, DataTableLabels, DataTableProps, DataTableResolvedLabels, DataTableSlots, DataTableSortContext, DataTableSortMode, DataTableValueType } from '@/types/data-table';
+export type { DataTableControlsPlacement, DataTableCsvColumn, DataTableHeader, DataTableLabels, DataTableResolvedLabels, DataTableSortContext, DataTableSortMode, DataTableValueType } from '@/types/data-table';
 export { closeAllFloatingComponents, showFloatingComponent, showFloatingMessage, useFloatingComponent } from '@/helpers/show-floating-component';
 export type { FloatingComponentContentProps, FloatingComponentHandle, ShowFloatingComponentOptions, ShowFloatingMessageOptions } from '@/helpers/show-floating-component';
 export { showConfirmationDialog, showErrorDialog, showInformationDialog, showModalDialog, showWarningDialog } from '@/helpers/show-modal-dialog';
@@ -34,4 +35,6 @@ export type { SnackbarDirection, SnackbarPlacement } from '@/internal/snackbar-i
 export type { LabelPreset } from '@/types/label-preset';
 export type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '@/types/movable-window';
 export type { TabContentStatus } from '@/internal/tab-group-context';
+export { vueCoreOptionsKey } from '@/helpers/vue-core-options';
+export type { DataTableOptions, VueCoreOptions } from '@/helpers/vue-core-options';
 export type { PopoverPlacement } from '@/internal/anchored-position';

package/src/types/data-table.ts

@@ -1,5 +1,3 @@
-import type { ClassValue, StyleValue } from 'vue';
-
 /** 列の値の型。ソートの比較方法を決める */
 export type DataTableValueType = 'boolean' | 'string' | 'number' | 'object';
 
@@ -90,101 +88,6 @@ export interface DataTableLabels {
 /** 関数を評価した後の文言 */
 export type DataTableResolvedLabels = Record<keyof DataTableLabels, string>;
 
-/**
- * DataTable の props
- */
-export interface DataTableProps<T = unknown> {
-  /** 表示している行のデータ。スロットで描画する行と同じ順に並んでいること */
-  dataList: T[];
-  /** ヘッダ。id は一意であること */
-  headers: DataTableHeader<T>[];
-  /** 読み込み中。true の間は行を描画せず読み込み中の表示を出す */
-  loading?: boolean;
-  /** 総件数。未指定なら dataList の件数 */
-  totalCount?: number;
-  /** 現在ページ(1起点) */
-  current?: number;
-  /** 1ページあたりの表示件数 */
-  limit?: number;
-  /** 1ページあたりの表示件数の上限 */
-  maxLimit?: number;
-  /** ページネーションに並べるページ番号の最大数 */
-  maxPagination?: number;
-  /** 行をクリックで選択できるか */
-  selectable?: boolean;
-  /** コントロールを出す位置 */
-  controls?: DataTableControlsPlacement;
-  /** ページネーションを出す位置。controls が無い側には出ない */
-  pagination?: DataTableControlsPlacement;
-  /** ページダウンロードボタンを表示するか */
-  showDownloadPage?: boolean;
-  /** 全件ダウンロードボタンを表示するか */
-  showDownloadAll?: boolean;
-  /** 総件数を表示するか */
-  showTotal?: boolean;
-  /** 1ページあたりの表示件数の入力を表示するか */
-  showLimit?: boolean;
-  /** ページネーションにページ番号の選択を表示するか */
-  showPageSelect?: boolean;
-  /** dataList が空のときにデータが無い旨の行を表示するか */
-  showNoData?: boolean;
-  /** ヘッダの境界のドラッグで列幅を変えられるか */
-  resizable?: boolean;
-  /** ヘッダのクリックでソートできるか */
-  sortable?: boolean;
-  /** ソートの方式。未指定なら remote */
-  sortMode?: DataTableSortMode;
-  /** テーブルをスクロールする領域に付ける class */
-  contentClass?: ClassValue;
-  /** テーブルをスクロールする領域に付ける style */
-  contentStyle?: StyleValue;
-  /** table に付ける class */
-  tableClass?: ClassValue;
-  /** table に付ける style */
-  tableStyle?: StyleValue;
-  /** 表示する文言。未指定の項目は英語 */
-  labels?: DataTableLabels;
-  /** 総件数の整形。未指定なら en-US の桁区切り。SSR とクライアントで同じ文字列を返すこと */
-  formatTotalCount?: (count: number) => string;
-}
-
-/**
- * DataTable が発行するイベント
- */
-export interface DataTableEmits<T = unknown> {
-  /** 選択が変わった。クリックでの選択・解除、カーソルキーでの移動、読み込み完了時の解除で発行する。解除は undefined と -1 */
-  (e: 'emit:selectRow', value: T | undefined, index: number): void;
-  /** ソートの条件が変わった。sortMode に関わらず発行する */
-  (e: 'emit:changeSort', context: DataTableSortContext): void;
-  (e: 'emit:updateHeader', headers: DataTableHeader<T>[]): void;
-  (e: 'emit:dblclickRow', value: T, index: number): void;
-  (e: 'emit:changeLimit', limit: number): void;
-  (e: 'emit:changePage', page: number): void;
-  (e: 'emit:downloadPage'): void;
-  (e: 'emit:downloadAll'): void;
-}
-
-/**
- * DataTable のスロット
- */
-export interface DataTableSlots<T = unknown> {
-  /** 行。tr を rows と同じ順に並べ、tr の click で clickRow(row, index) を呼ぶ */
-  default?(props: {
-    /** 表示する行。sortMode が page のときはソートした順、それ以外は dataList そのもの */
-    rows: T[];
-    /** 行を選択する。選択している行なら選択を解除する */
-    clickRow: (row: T, index: number) => void;
-    /** 行を選択してダブルクリックを通知する */
-    dblclickRow: (row: T, index: number) => void;
-    /** 行のインデックスから、ページをまたいだ1起点の行番号を返す */
-    rowNumber: (index: number) => number;
-    /** 選択している行のインデックス。選択していなければ -1 */
-    selectedIndex: number;
-  }): unknown;
-  /** 読み込み中の表示。未指定なら既定のスピナー */
-  loading?(): unknown;
-}
-
 /**
  * ソートの状態
  */