pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
117 lines (116 loc) • 3.77 kB
TypeScript
import { type TableProps } from '@mantine/core';
import type { MRT_ColumnDef, MRT_Row, MRT_TableInstance } from 'mantine-react-table';
import { type ChangeEvent } from 'react';
export type CoreTableColumnDef<T extends Record<string, any>> = MRT_ColumnDef<T> & {
showHeader?: boolean;
};
export type PagamioMantineTableProps<T extends Record<string, any>> = {
columns: CoreTableColumnDef<T>[];
data: T[];
selectable?: boolean;
sortable?: boolean;
enableGlobalFilters?: boolean;
enableManualSorting?: boolean;
enableManualPagination?: boolean;
enablePagination?: boolean;
rowCount: number;
onClearFilters?: () => void;
showClearFilters?: boolean;
showApplyFilterButton?: boolean;
pagination?: {
enabled: boolean;
pageIndex: number;
totalPages?: number;
onPageChange: (page: number) => void;
pageSize: number;
itemsPerPage: number;
itemsPerPageOptions: number[];
onPaginationChange: (index: number, itemsPerPage: number) => void;
};
sorting?: {
multiSorting?: boolean;
sortConfig: SortConfig;
onSort: (sortKey: string, sortDirection: 'asc' | 'desc') => void;
setSortBy?: (sortKey: string) => void;
setSortDir?: (dir: string) => void;
};
filtering?: {
filters: BaseFilter[];
appliedFilters: Record<string, string>;
onTableFilter: (columnKey: string, value: string) => void;
};
search?: {
enabled: boolean;
searchQuery: string;
onSearch: (e: ChangeEvent<HTMLInputElement>) => void;
};
exportable?: boolean;
addButton?: boolean;
searctInputPlaceHolder?: string;
addText?: string;
onAdd?: () => void;
handleSearchTable: () => void;
renderEmptyRowsFallback?: React.ReactNode;
mantineTableProps?: TableProps;
mantineTableContainerProps?: React.ComponentPropsWithoutRef<'div'>;
mantinePaperProps?: React.ComponentPropsWithoutRef<'div'>;
mantinePaginationProps?: React.ComponentPropsWithoutRef<'div'>;
defaultColumn?: Partial<MRT_ColumnDef<T>>;
manualFilters?: boolean;
manualSorting?: boolean;
manualPagination?: boolean;
enableStickyHeader?: boolean;
enableRowSelection?: boolean;
enableColumnResizing?: boolean;
expandable?: boolean;
renderExpandableComponent?: (props: {
row: MRT_Row<T>;
table: MRT_TableInstance<T>;
}) => React.ReactNode;
};
export type TableToolbarProps<T extends Record<string, any>> = {
searchable: boolean;
searchQuery: string;
onSearch: (e: ChangeEvent<HTMLInputElement>) => void;
onClearFilters?: () => void;
showClearFilters?: boolean;
showApplyFilterButton?: boolean;
filters?: BaseFilter[];
appliedFilters: Record<string, string>;
exportable: boolean;
columns: MRT_ColumnDef<T>[];
data: T[];
onTableFilter?: (columnKey: string, value: string) => void;
addButton: boolean;
addText?: string;
isNarrow: boolean;
searctInputPlaceHolder?: string;
onAdd: () => void;
handleSearchTable: () => void;
handleApplyFilters?: () => void;
};
export interface BaseEntity {
id: number | string;
createdById?: number;
lastModifiedById?: number;
createdDate?: string;
lastModifiedDate?: string;
state?: number;
[key: string]: any;
}
export interface BaseFilter {
columnKey: string;
label?: string;
type?: 'select' | 'multi-select' | 'date' | 'range' | 'boolean';
options: Array<{
label: string;
value: string;
}>;
defaultValue?: string | string[];
placeholder?: string;
}
export interface SortConfig {
sortBy?: string;
sortDir?: 'asc' | 'desc';
multiSorting?: boolean;
}