@mozaic-ds/vue-3/src/components/datatablev2/MDataTable.types.ts

Vue.js implementation of Mozaic Design System

export type MDataTableSortDirection = 'ASC' | 'DESC' | null;

export type MDatatableSortType = {
  direction?: MDataTableSortDirection;
  column: string;
};

export interface MDatatableHeaderType {
  label: string;
  /** The key of item to generate cell slot name */
  value: string;

  sortable?: boolean;
  sortDirectionDefault?: MDataTableSortDirection;
  class?: any;
  type?: string;

  /** Misc */
  e2eSelector?: string;
}

export type MDataTableProps = {
  /** Functional */
  items: any[];
  headers?: MDatatableHeaderType[];
  loading?: boolean;
  indexKey?: string;

  /** Pagination */
  pageable?: boolean;
  itemsPerPage?: number;
  itemsPerPageOptions?: PageSizeOption[] | number[];
  currentPage?: number;
  totalItems?: number;
  itemsPerPageLabel?: string;

  /** Sort */
  sort?: MDatatableSortType | null;

  /** Display Options */
  size?: 's' | 'm' | 'l';
  hidePageCount?: boolean;

  /** Misc */
  e2eSelector?: string;
};

export type PageSizeOption = { text: string; value: string };

export type MDatatableUpdatePayloadType = {
  sort?: MDatatableSortType | null;
  size: number;
  page: number;
};