@fewangsit/wangsvue-gsts 1.0.0-alpha.9 → 2.0.0-alpha.10

package/datatable/index.d.ts

@@ -0,0 +1,913 @@
+import {
+  AllowedComponentProps,
+  Component,
+  ComponentCustomProps,
+  VNode,
+  VNodeProps,
+} from 'vue';
+
+import { DialogConfirmProps } from '../dialogconfirm';
+import { MenuItem } from '../menuitem';
+import { DateOptions } from '../utils/date.util';
+
+import { WangsIconseverities } from '../icon';
+import { EmitFn, HintedString } from '../ts-helpers.d';
+
+export interface DataTableLocaleConfig {
+  /**
+   * Message to display on loading ovevrlay while downloading
+   */
+  downloadingMessage?: string;
+
+  /**
+   * Text when booleanValue is true
+   */
+  trueText?: string;
+
+  /**
+   * Text when booleanValue is false
+   */
+  falseText?: string;
+
+  /**
+   * Text on paginator when data exist
+   */
+  paginationReportFound?: string;
+
+  /**
+   * Text on paginator when data doesn't exist
+   */
+  paginationReportNotFound?: string;
+
+  /**
+   * Specify the error message download excel
+   *
+   * @example 'Error, failed to download {fileName}' - fileName will be replaced
+   */
+  excelToastErrorMessage?: string;
+  /**
+   * Custom message when data table is empty
+   *
+   * Will be shown bellow no-data animation
+   */
+  emptyTableMessage?: string;
+}
+
+export type ChildGroup<T extends Data = Data> = {
+  groupHeader: string;
+  groupItems: T[];
+};
+
+export type Data<T = Record<string, any>> = T & {
+  children?: ChildGroup<T>[];
+  hasChildren?: boolean;
+};
+
+export type QueryParams = Partial<Record<string, any>>;
+
+/**
+ * Custom sort event.
+ * @see {@link BaseDataTableEmits.sort}
+ */
+export interface DataTableSortEvent {
+  /**
+   * Browser event.
+   */
+  originalEvent: Event;
+  /**
+   * Number of rows to display in new page
+   */
+  rows: number;
+  /**
+   * Field to sort against
+   */
+  sortField: string | undefined;
+  /**
+   * Sort order as integer
+   */
+  sortOrder: 1 | 0 | -1 | undefined | null;
+}
+
+/**
+ * Custom pagination event.
+ * @see {@link BaseDataTableEmits.page}
+ * @extends DataTableSortEvent
+ */
+export interface DataTablePageEvent extends DataTableSortEvent {
+  /**
+   * New page number
+   */
+  page: number;
+  /**
+   * Total page count
+   */
+  pageCount: number;
+}
+
+/**
+ * Custom datatable operator filter metadata.
+ */
+export interface DataTableOperatorFilterMetaData {
+  /**
+   * Filter operator
+   */
+  operator: string;
+  /**
+   * Array of filter meta data.
+   */
+  constraints: DataTableFilterMetaData[];
+}
+
+/**
+ * Custom datatable filter metadata.
+ */
+export interface DataTableFilterMetaData {
+  /**
+   * Filter value
+   */
+  value: any;
+  /**
+   * Filter match mode
+   */
+  matchMode:
+    | HintedString<
+        | 'startsWith'
+        | 'contains'
+        | 'notContains'
+        | 'endsWith'
+        | 'equals'
+        | 'notEquals'
+        | 'in'
+        | 'lt'
+        | 'lte'
+        | 'gt'
+        | 'gte'
+        | 'between'
+        | 'dateIs'
+        | 'dateIsNot'
+        | 'dateBefore'
+        | 'dateAfter'
+      >
+    | undefined;
+}
+
+/**
+ * Custom datatable filter metadata.
+ */
+export interface DataTableFilterMeta {
+  /**
+   * Extra options
+   */
+  [key: string]:
+    | string
+    | DataTableFilterMetaData
+    | DataTableOperatorFilterMetaData;
+}
+
+export type FetchListResponse<T extends Data = Data> = {
+  message: string;
+  data: {
+    data: T[];
+    totalRecords: number;
+  };
+};
+
+export type ShortFetchListResponse<T = Data> = {
+  status: number;
+  message: string;
+  data: T[];
+};
+
+export type TableCellComponent<T extends Data = Data> = {
+  component: Component;
+  /**
+   * Props to pass to the component
+   */
+  props?: object;
+  /**
+   * Events or emits to pass to the component
+   */
+  events?: any;
+  /**
+   * Model to pass to the component
+   * @deprecated use `props` instead
+   */
+  model?: any;
+  /**
+   * Callback when component model changed
+   * @param itemData The row data object.
+   * @returns The new value of the component.
+   * @deprecated use `events` instead
+   */
+  onChange?: (itemData: T) => void;
+  disabled?: boolean;
+  /**
+   * To tell DataTable component whether this component should stop propagation or not
+   *
+   * @default true - since old logic was automatically stop event click from bodyComponent
+   */
+  stop?: boolean;
+};
+
+export type TogglePresetConfirmDialogProps<T extends Data = Data> = Omit<
+  DialogConfirmProps,
+  'visible' | 'list' | 'onConfirm'
+> & {
+  /**
+   * When the dialog should be shown?
+   * Pass a boolean returning function to show dialog when it returns true.
+   *
+   * @default both - leave this as undefined to show on both states
+   */
+  showWhen?:
+    | 'active'
+    | 'inactive'
+    | ((data: T, state: boolean) => boolean)
+    | ((data: T, state: boolean) => Promise<boolean>);
+};
+
+interface ColumnConfirmActionPresetBase<T extends Data = Data> {
+  /**
+   * Use dialog confirmation
+   */
+  confirmDialogProps?:
+    | TogglePresetConfirmDialogProps<T>
+    | ((state: boolean, data: T) => TogglePresetConfirmDialogProps<T>);
+
+  /**
+   * Callback for confirmation
+   */
+  onConfirm?: (state: boolean, data: T, revertFunction: () => void) => void;
+}
+
+export interface ColumnTogglePreset<T extends Data = Data>
+  extends ColumnConfirmActionPresetBase<T> {
+  type: 'toggle';
+
+  /**
+   * Callback function when toggle state changes
+   *
+   * IMPORTANT: This callback is ALWAYS called regardless of whether confirmation dialog is shown
+   * The 'state' parameter represents the NEW state that user sees on screen
+   *
+   * Usage Pattern:
+   * 1. Check if confirmation dialog will be shown using your business logic
+   * 2. If confirmation needed: Don't call API here, wait for onConfirm callback
+   * 3. If no confirmation needed: Call API immediately to persist state
+   * 4. If API fails: Call revertFunction() to restore previous state
+   *
+   * @param state boolean - NEW toggle state (what user sees on screen)
+   * @param data T - The row data object
+   * @param revertFunction - Function to revert state when API call fails or user cancels
+   * @returns void
+   */
+  onToggle?: (state: boolean, data: T, revertFunction: () => void) => void;
+
+  /**
+   * Add conditional disabling for each row
+   */
+  disabled?: boolean | ((data: T) => boolean);
+}
+
+export interface ColumnCheckboxPreset<T extends Data = Data>
+  extends ColumnConfirmActionPresetBase<T> {
+  type: 'checkbox';
+
+  /**
+   * Callback function when checkbox state changes
+   *
+   * IMPORTANT: This callback is ALWAYS called regardless of whether confirmation dialog is shown
+   * The 'state' parameter represents the NEW state that user sees on screen
+   *
+   * Usage Pattern:
+   * 1. Check if confirmation dialog will be shown using your business logic
+   * 2. If confirmation needed: Don't call API here, wait for onConfirm callback
+   * 3. If no confirmation needed: Call API immediately to persist state
+   * 4. If API fails: Call revertFunction() to restore previous state
+   *
+   * @param state boolean - NEW checkbox state (what user sees on screen)
+   * @param data T - The row data object
+   * @param revertFunction - Function to revert state when API call fails or user cancels
+   * @returns void
+   */
+  onCheck?: (state: boolean, data: T, revertFunction: () => void) => void;
+
+  /**
+   * Add conditional disabling for each row
+   */
+  disabled?: boolean | ((data: T) => boolean);
+}
+export interface ColumnMultiRowPreset<T extends Data = Data> {
+  type: 'multirow';
+  fieldAttributes?: (data: T) => MultiRowAttribute[];
+}
+
+export interface MultiRowAttribute<T extends Data = Data> {
+  class?: string | string[];
+  value?: string;
+  bodyComponent?: TableCellComponent<T>;
+}
+
+export type ColumnPreset<T extends Data = Data> =
+  | ColumnTogglePreset<T>
+  | ColumnMultiRowPreset<T>
+  | ColumnCheckboxPreset<T>;
+
+export interface CombinedHeaders<T extends Data = Data> {
+  parent: TableParentHeader<T>[];
+  child: TreeTableColumns<T>[];
+}
+
+export interface TableParentHeader<T extends Data = Data>
+  extends Pick<
+    TableColumn<T>,
+    'header' | 'info' | 'infoSeverity' | 'headerClass' | 'sortable'
+  > {
+  /**
+   * Field is used as the header's key, parent headers with
+   * the same field will be grouped into one cell
+   */
+  field: string;
+  /**
+   * Note: colspan is calculated automatically
+   * @ignore
+   */
+  colspan?: number;
+  /**
+   * Note: rowspan is calculated automatically
+   * @ignore
+   */
+  rowspan?: number;
+}
+
+export interface TableColumn<T extends Data> {
+  /**
+   * The text rendered on th on each column
+   */
+  header?: string;
+  /**
+   * The headers placed above certain child headers. If there are
+   * multiple child headers with the same parent header, the parent
+   * will have its colspan extended. The parent header will be shown
+   * when at least one of its child headers is visible.
+   */
+  parentHeader?: TableParentHeader<T>;
+  /**
+   * The field name of the column.
+   * Field is representing field on the row object to be displayed on the column.
+   * The field is crucial for sorting and filtering the data.
+   */
+  field: string;
+  fieldType?: 'string' | 'number' | 'boolean' | 'array';
+  /**
+   * Display information icon on the column header and show tooltip information about the column.
+   */
+  info?: string;
+  /**
+   * The severity of the information icon.
+   */
+  infoSeverity?: WangsIconseverities;
+
+  /**
+   * Whether the column is editable.
+   * Editable column will set contenteditable to true on the cell.
+   */
+  editable?: boolean;
+  /**
+   * If the column is editable, only allow number inputs.
+   */
+  numberInputOnly?: boolean;
+
+  /**
+   * Whether the column is sortable.
+   * Sortable column will add sort icon on the column header. It will produce query `sortBy` and `sortOrder`. The value for sortBy determined by column 'field'.
+   */
+  sortable?: boolean;
+
+  /**
+   * Controls whether column appears in column visibility menu for reordering
+   * @default true
+   * @example
+   * // Column appears in menu and can be reordered
+   * { field: 'name', reorderable: true }
+   *
+   * // Column does NOT appear in menu (but still visible in table)
+   * { field: 'id', reorderable: false }
+   */
+  reorderable?: boolean;
+
+  /**
+   * Controls whether column can be dragged to reorder position in column visibility menu
+   * @default true
+   * @example
+   * // Column can be reordered by dragging
+   * { field: 'category', dragable: true }
+   *
+   * // Column cannot be dragged (but may still appear in menu)
+   * { field: 'code', dragable: false }
+   */
+  dragable?: boolean;
+
+  /**
+   * Makes column completely fixed - no visibility changes allowed
+   * @default false
+   * @example
+   * // Fixed column - never appears in visibility menu AND cannot be hidden
+   * { field: 'id', fixed: true }
+   *
+   * // Normal behavior - can be hidden/shown as needed
+   * { field: 'name', fixed: false }
+   */
+  fixed?: boolean;
+
+  /**
+   * Controls initial visibility state of column
+   * @default true
+   * @example
+   * // Column starts visible
+   * { field: 'name', visible: true }
+   *
+   * // Column starts hidden
+   * { field: 'internalId', visible: false }
+   */
+  visible?: boolean;
+
+  /**
+   * Use commonly used component as preset, simplify the common use-cases of bodyComponent with DataTable component.
+   */
+  preset?: ColumnPreset<T>;
+  /**
+   * Whether the column is checked by default, only for Custom Report Table
+   * @default true
+   */
+  checkedByDefault?: boolean;
+  /**
+   * The column width in pixel.
+   */
+  width?: number | string;
+  /**
+   * Exclude column from download/export excel.
+   */
+  excluded?: boolean;
+  /**
+   * Set the field for Export Excel, when you need to export different field of column field.
+   *
+   * @default undefined - the export field using column 'field'
+   */
+  exportField?: string;
+  /**
+   * Specify the header when exported
+   */
+  exportHeader?: string;
+  /**
+   * Specify the property or field which value in the array should be used for exporting to Excel.
+   *
+   * @example 'field.name.fullName'
+   */
+  arrayValueField?: string;
+  /**
+   * Download Excel Config
+   *
+   * When needs to export only the property has Truthy value, set this to true,
+   * The Excel result will only get the property object which the value is truthy.
+   *
+   * @example
+   * Example Object:
+   * "roles": {
+   *    roleA: true,
+   *    roleB: true,
+   *    roleC: false,
+   *    roleD: null, // falsy
+   *    roleE: '', // falsy
+   *    roleF: 'role', // truthy
+   * }
+   *
+   * The result will be: "roleA, roleB, roleF" - Only the properties with truthy values will be included.
+   */
+  includeTruthyProperties?: boolean;
+  /**
+   * Convert boolean into text Yes/No
+   */
+  booleanValue?: boolean;
+  /**
+   * The text to display in the Excel cell when the value is true. (should be used with booleanValue)
+   */
+  trueText?: string;
+  /**
+   * The text to display in the Excel cell when the value is false. (should be used with booleanValue)
+   */
+  falseText?: string;
+  /**
+   * Specify the options for formatting date values using the formatDate utility.
+   *
+   * The date format primarily uses the general settings configurations.
+   * Within this property, you only need to set the `showTime` or `showDate` options.
+   */
+  dateFormatOptions?: DateOptions;
+  /**
+   * Set the fallback text when the cell value is empty. Used in export excel.
+   *
+   * @example 'N/A'
+   */
+  emptyText?: string;
+  /**
+   * Customize the cell content rendered in the table body. Use this when the value of `field` specified needs custom formatting.
+   *
+   * @param data The row data object.
+   * @param index The index of the row.
+   * @returns The custom cell content as a string or undefined.
+   */
+  bodyTemplate?: (data: T, index: number) => string | undefined;
+  /**
+   * Customize the cell component rendered in the table body. Use this when the value of `field` specified needs custom component rendering.
+   *
+   * @param data The row data object.
+   * @param index The index of the row.
+   * @returns The custom cell component as a TableCellComponent or undefined.
+   */
+  bodyComponent?: (data: T, index: number) => TableCellComponent<T>;
+  /**
+   * Inline style of header, body and footer cells.
+   */
+  style?: string | (() => string);
+  /**
+   * Style class of header, body and footer cells.
+   */
+  class?: string | string[] | (() => string | string[]);
+  /**
+   * Inline style of the column header.
+   */
+  headerStyle?: string | (() => string);
+  /**
+   * Style class of the column header.
+   */
+  headerClass?: string | string[] | (() => string | string[]);
+  /**
+   * Inline style of the column body.
+   */
+  bodyStyle?: string | (() => string);
+  /**
+   * Style class of the column body.
+   */
+  bodyClass?: string | string[] | ((data: T) => string | string[]);
+  /**
+   * Style class of the column body if the row is selected (useful for dark classes).
+   */
+  bodySelectedClass?: string | ((data: T) => string);
+}
+
+/**
+ * Extending the base table column, tree table column will only available when props.treeTable is sets to be `true`
+ */
+export interface TreeTableColumns<T extends Data> extends TableColumn<T> {
+  /**
+   * How much the column spanning
+   */
+  colspan?: number;
+  /**
+   * The list of parents columns fields
+   * The colspan will be counted from it lengths
+   * This column will be shown when at least one of parent columns is visible
+   *
+   * @example
+   * This column spans from parent column A to C,
+   * this property value should be ['a', 'b', 'c'],
+   * which each value in array is a 'column.field' of the parent columns
+   *
+   * The counted colspan will be 3
+   */
+  parentColumnsFields?: string[];
+}
+
+/**
+ * Emit payload for `cellEdited`
+ */
+export interface DataTableCellEditedEvent<T extends Data = Data> {
+  /**
+   * The row item were edited
+   */
+  item: T;
+  /**
+   * The column field were edited
+   */
+  field: string;
+  /**
+   * The index of row item
+   */
+  index: number;
+  /**
+   * The text content of editable field
+   */
+  value?: string;
+}
+
+/**
+ * Emit payload for `rowReorder`
+ */
+export interface DataTableRowReorderEvent<T extends Data = Data> {
+  item: T;
+  fromIndex?: number;
+  toIndex?: number;
+}
+
+/**
+ * Custom row click event.
+ * @see {@link DataTableEmits['row-click']}
+ */
+export interface DataTableRowClickEvent<T extends Data = Data> {
+  /**
+   * Browser event.
+   */
+  originalEvent: Event;
+  /**
+   * Selected row data.
+   */
+  data: T;
+  /**
+   * Row index.
+   */
+  index: number;
+}
+
+export type ChildTableProps<T = Data> = Partial<
+  Omit<TreeTableProps<T>, 'fetchFunction'>
+> & {
+  /**
+   * Use the header of each column in child table
+   *
+   * @default false
+   */
+  useColumnsHeader?: boolean;
+  /**
+   * The function to fetch data on row expand
+   */
+  fetchFunction?: (
+    parentData: T,
+  ) => Promise<ShortFetchListResponse<ChildGroup<T>> | undefined>;
+};
+
+export interface DataTableBaseProps<T extends Data = Data> {
+  /**
+   * Optional unique table name for ID generation and integration with components like FilterContainer, ButtonSearch, ButtonBulkAction.
+   * Must be unique to avoid collisions.
+   *
+   * @optional
+   */
+  tableName?: string;
+  /**
+   * Optional property to set a unique table title for export into excel.
+   *
+   * @optional
+   */
+  tableTitle?: string;
+  /**
+   * Whether show single action option.
+   * @default true;
+   */
+  useOption?: boolean;
+  /**
+   * An array of objects to display in the table.
+   * Mainly used for static table. For dynamic table that need to fetch data on demand, use fetchFunction instead.
+   */
+  data?: T[];
+  /**
+   * The key of the data object to use as a unique identifier.
+   * Each row data must have a unique value for this key. Otherwise, the behavior of the table may be unpredictable.
+   *
+   * @default '_id' - You can specify a custom key if your data object uses a different unique identifier.
+   */
+  dataKey?: string;
+  /**
+   * Style class of the row body.
+   */
+  rowClass?: string | string[] | ((data?: any) => string | string[]);
+  /**
+   * The key of the data object to determine whether the row data should be disabled.
+   * If the value of this key is truthy, the row will be disabled.
+   */
+  disableKey?: string;
+  /**
+   * Determine whether disabled rows should be included in the check all process or not
+   */
+  includeCheckDisabledRows?: boolean;
+  /**
+   * The key of data object to determine whether the row data has context highlighted or not
+   * If the value of this key is truthy, the row will be highlighted.
+   */
+  highlightKey?: string;
+  /**
+   * Boolean to specify whether all rows should be disabled.
+   */
+  disableAllRows?: boolean;
+
+  /**
+   * Determine the type of DataTable.
+   *
+   * Sets to lazy if you need to dynamically shows data.
+   */
+  lazy?: boolean;
+  /**
+   * The default query params that must be included every fetch request.
+   * Will be merged with query params from fetchFunction.
+   */
+  defaultQueryParams?: Readonly<Record<string, any>>;
+  /**
+   * The function to fetch data on DataTable mounted and on queryParams dependencies updated.
+   *
+   * @param params this is required
+   */
+  fetchFunction?: (
+    params: QueryParams,
+  ) => Promise<FetchListResponse<T> | undefined>;
+
+  /**
+   * The number of rows to display per page.
+   * @defaultValue 10
+   */
+  rows?: number;
+
+  /**
+   * Sets loading animation for DataTable that's not lazy.
+   */
+  loading?: boolean;
+  /**
+   * Whether to enable 'checkbox' | 'single' selection.
+   *
+   * @default 'checkbox'
+   */
+  selectionType?: 'single' | 'checkbox' | 'none';
+  /**
+   * An array of selected objects from `data`.
+   */
+  selectedData?: T[];
+  /**
+   * An array of selected objects from `data`.
+   */
+  expandedRows?: { [key: string]: boolean };
+  /**
+   * Whether display pagination under the table or not.
+   */
+  usePaginator?: boolean;
+  /**
+   * The options that will be visible for each row data.
+   * To use this, set 'useOption' to true.
+   * The options menu will be displayed on the right side of the table row.
+   */
+  options?: MenuItem[];
+  /**
+   * Whether the column is customizable or not.
+   *
+   * @default true - the table is able to reorder and toggle visibility column;
+   */
+  customColumn?: boolean;
+  /**
+   * Props to set scroll height, this will make table content scrollable
+   * @example '50vh' or '300px'
+   */
+  scrollHeight?: string;
+  /**
+   * When the row height sets to fixed, it will have 35px height
+   *
+   * @defaultValue 'fixed'
+   */
+  rowHeight?: 'fixed' | 'auto';
+  /**
+   * To determine if row table is reorder-able
+   */
+  reorderable?: boolean;
+  /**
+   * Total disabled rows in table (used for synchronizing with bulk action button)
+   */
+  totalDisabledRows?: number;
+}
+
+export interface DataTableProps<T extends Data> extends DataTableBaseProps<T> {
+  /**
+   * Disable tree table mode
+   */
+  treeTable?: false;
+  childTableProps?: undefined;
+  /**
+   * An array of table columns to display.
+   */
+  columns: TableColumn<T>[];
+}
+
+export interface TreeTableProps<T extends Data> extends DataTableBaseProps<T> {
+  /**
+   * Activate tree table mode
+   */
+  treeTable: true;
+  /**
+   * V-model single selection. Works with selectionType 'single'
+   */
+  singleSelection?: T;
+  /**
+   * An array of table columns to display.
+   */
+  columns: TreeTableColumns<T>[];
+  /**
+   * Properties to be passed into sub table
+   */
+  childTableProps?: ChildTableProps<T>;
+}
+
+export interface BaseDataTableEmits<T extends Data> {
+  /**
+   * Emits when option menu button clicked.
+   */
+  'toggleOption': [data: T];
+  /**
+   * Emits when an item is double clicked.
+   */
+  'doubleClick': [data: T];
+  'rowSelect': [data: DataTableRowClickEvent<T>];
+  /**
+   * Event emitted when the page changes in the data table.
+   *
+   * @event page
+   * @param {DataTablePageEvent} data - The event data containing information about the new page.
+   *
+   * @example
+   * <DataTable @page="handlePageChange" />
+   *
+   * This will call the `handlePageChange` method whenever the page changes in the data table.
+   */
+  'page': [data: DataTablePageEvent];
+
+  /**
+   * Event emitted when the sort order changes in the data table.
+   *
+   * @event sort
+   * @param {DataTableSortEvent} data - The event data containing information about the new sort order.
+   *
+   * @example
+   * <DataTable @sort="handleSortChange" />
+   *
+   * This will call the `handleSortChange` method whenever the sort order changes in the data table.
+   */
+  'sort': [data: DataTableSortEvent];
+  /**
+   * Event emitted when the `selectedData` property is updated.
+   *
+   * @event update:selectedData
+   * @param {Data[]} datas - The updated array of selected data objects.
+   *
+   * @example
+   * <DataTable v-model:selected-data="selectedData" />
+   *
+   * This will update the `selectedData` value whenever a row is selected or deselected.
+   */
+  'update:selectedData': [datas: T[]];
+}
+
+export interface TreeTableEmits<T extends Data> extends BaseDataTableEmits<T> {
+  /**
+   * Emitted when a row is clicked/selected. Only available on `single` selectionType
+   */
+  'update:singleSelection': [data: T];
+  /**
+   * Emitted when cell has lost focus.
+   */
+  'cellEdited': [payload: DataTableCellEditedEvent<T>];
+  /**
+   * Emitted on Drop Event occurred after dragging a row.
+   * Only available on
+   *
+   */
+  'rowReorder': [payload?: DataTableRowReorderEvent<T>];
+}
+
+export interface DataTableEmits<T extends Data> extends TreeTableEmits<T> {}
+
+export interface DataTableSlots<T extends Data> {
+  /**
+   * Slot for rendering sub content below a table row.
+   */
+  'row-subcontent': (props: { item: T }) => VNode[];
+}
+
+/**
+ * **WangsVue - DataTable**
+ *
+ *  * _DataTable displays data in tabular format._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/table)
+ * --- ---
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare const DataTable: <T extends Data = Data>(
+  props: (DataTableProps<T> | TreeTableProps<T>) &
+    VNodeProps &
+    AllowedComponentProps &
+    ComponentCustomProps,
+  context?: {
+    slots: DataTableSlots<T>;
+    emit: EmitFn<DataTableEmits<T>>;
+    attrs: Record<string, any>;
+  },
+) => VNode & { __ctx?: { props: typeof props; slots: typeof context.slots } };
+
+export default DataTable;