rez-table-listing-mui/src/types/table.ts

A rez table listing component built on TanStack Table

import {
  ColumnDef,
  ColumnOrderState,
  Header,
  Row,
  Table,
} from "@tanstack/react-table";
import {
  CraftTableFeatureProps,
  craftTableFilterSettingsOptionsProps,
  CraftTableOptionsProps,
} from "./table-options";
import React from "react";

export interface CraftTablePaginationProps {
  totalRows?: number;
  rowsPerPageArray?: number[];
  showPagination?: boolean;
  paginationPosition?: "top" | "bottom";
  paginationView?: "full" | "compact";
}

interface LoadingOptionsProps {
  isLoading: boolean;
  loaderText?: string;
  loadingComponent?: React.ReactNode;
}

export interface TopbarOptionsProps {
  tableStates: CraftTableOptionsProps;
  leftSideComponent?: React.ReactNode;
  rightSideComponent?: React.ReactNode;
  showColumnToggle?: boolean;
  showCompactTableToggle?: boolean;
  showChangeLayoutToggle?: boolean;
  viewMoreToggle?: boolean;
  showSearch?: boolean;
  showSortingToggle?: boolean;
  showFilterToggle?: boolean;
  searchValue?: string;
  onSearchChange?: (val: string) => void;
  onFilterButtonClick?: () => void;
}

export interface CustomRenderContext<T> {
  value: unknown;
  row: Row<T>;
  table: Row<T>[];
}

export type CustomRenderFnMap<T> = {
  [key: string]: (ctx: CustomRenderContext<T>) => React.ReactNode;
};

type CustomColumnMeta = {
  type?: "custom";
  propName?: string;
  [key: string]: any;
};

type CustomColumnDef<T> = ColumnDef<T> & {
  meta?: CustomColumnMeta;
};

interface CraftTableStyleProps {
  wrapperStyle?: React.CSSProperties;
}

export interface FilterOptionsProps {
  onClick?: () => void;
  show?: boolean;
  component: React.ReactNode;
}

export interface settingsOptionsProps {
  showIcon?: boolean;
  onClick?: () => void;
}

export interface CraftTableProps<T> {
  data: T[];
  columns: CustomColumnDef<T>[];
  tableStates: CraftTableOptionsProps;
  paginationOptions?: CraftTablePaginationProps;
  featureOptions?: CraftTableFeatureProps;
  nestedComponent?: React.ComponentType<{ row: Row<T> }>;
  loadingOptions?: LoadingOptionsProps;
  topbarOptions?: TopbarOptionsProps;
  customRenderFn?: CustomRenderFnMap<T>;
  shouldHideColumn?: (accessorKey?: string) => boolean;
  styleOptions?: CraftTableStyleProps;
  emptyListComponent?: React.ReactNode;
  filterOptions?: FilterOptionsProps;
  settingsOptions?: settingsOptionsProps;
  craftTableFilterSettingsOptions?: craftTableFilterSettingsOptionsProps;
}
export interface CraftTableComponentProps<T> {
  table: Table<T>;
  featureOptions: CraftTableFeatureProps;
  NestedComponent?: React.ComponentType<{ row: Row<T> }>;
  columnOrder: ColumnOrderState;
  setColumnOrder: React.Dispatch<React.SetStateAction<ColumnOrderState>>;
  isCompactTable: boolean;
  tableStates: CraftTableOptionsProps;
}

export interface TableHeaderProps<T> {
  header: Header<T, unknown>;
  featureOptions: CraftTableFeatureProps;
  tableStates: CraftTableOptionsProps;
}