@jackiemacklein/nettz-utils
Version:
Serviços de imagem, e-mail, códigos de barras, utilitários numéricos e componentes React para apps Node.js com TypeScript
87 lines (86 loc) • 4 kB
TypeScript
/**
* @author Onside
* @description Componente para exibir uma tabela com opções de seleção, ordenação, filtragem e paginação.
* @param {T} data - Dados da tabela.
* @param {Column<T>[]} columns - Colunas da tabela.
* @param {string} onSort - Função para ordenar os dados.
* @param {string} onFilter - Função para filtrar os dados.
* @param {number} currentPage - Página atual.
* @param {number} totalPages - Total de páginas.
* @param {number} itemsPerPage - Quantidade de itens por página.
* @param {number} onItemsPerPageChange - Função para alterar a quantidade de itens por página.
* @param {number} onSelectionChange - Função para alterar a seleção de itens.
* @param {number} selectedItems - Itens selecionados.
* @param {number} onRowAction - Função para executar uma ação ao clicar em um item.
* @param {boolean} selectable - Se a tabela é selecionável.
* @param {boolean} selectableItem - Função para verificar se um item é selecionável.
* @param {string} keyField - Campo chave do item.
* @param {string} onVisibleColumnsChange - Função para alterar as colunas visíveis.
* @param {string[]} initialHiddenColumns - Colunas iniciais ocultas.
* @param {string} tableClassName - Classe da tabela.
* @param {string} containerClassName - Classe do container da tabela.
* @param {string} rowClassName - Classe da linha da tabela.
* @param {string} emptyStateMessage - Mensagem de estado vazio.
* @param {boolean} loading - Se a tabela está carregando.
* @param {React.ReactNode} customButtons - Botões personalizados.
* @param {React.ReactNode} renderCell - Função para renderizar uma célula.
* @param {React.ReactNode} renderHeader - Função para renderizar o cabeçalho.
* @param {boolean} pagination - Se a tabela deve ter paginação.
*/
import React from "react";
import "./table.css";
export interface Column<T = any> {
filterBy?: string;
key: string;
label: string;
type: "string" | "number" | "date" | "actions" | "boolean" | "datetime" | "time" | "datetime-local";
align: "left" | "center" | "right";
minWidth?: number;
width?: number;
onClick?: (item: T) => void;
filterable?: boolean;
sortable?: boolean;
renderCell?: (item: T, index?: number) => React.ReactNode;
renderHeader?: (label: string) => React.ReactNode;
filterOptions?: {
id: any;
name: string;
}[];
pagination?: boolean;
}
export interface TableProps<T = any> {
data: T[];
columns: Column<T>[];
onSort?: (sortConfig: {
key: string;
direction: string;
}[]) => void;
onFilter?: (filters: {
[key: string]: string;
}) => void;
currentPage?: number;
totalPages?: number;
onPageChange?: (pageNumber: number) => void;
itemsPerPage?: number;
onItemsPerPageChange?: (itemsPerPage: number) => void;
itemsPerPageOptions?: number[];
onSelectionChange?: (selectedItems: T[]) => void;
selectedItems?: T[];
onRowAction?: (action: string, item: T) => void;
selectable?: boolean;
selectableItem?: (item: T) => boolean;
keyField?: string;
onVisibleColumnsChange?: (visibleColumns: string[]) => void;
initialHiddenColumns?: string[];
tableClassName?: string;
containerClassName?: string;
rowClassName?: (item: T) => string;
emptyStateMessage?: string;
loading?: boolean;
customButtons?: React.ReactNode;
totalItemCount?: number;
pagination?: boolean;
id?: string;
}
declare const OnTable: <T>({ data, columns, onSort, onFilter, currentPage, totalPages, onPageChange, itemsPerPage, onItemsPerPageChange, itemsPerPageOptions, onSelectionChange, selectedItems, onRowAction, selectable, selectableItem, keyField, onVisibleColumnsChange, initialHiddenColumns, tableClassName, containerClassName, rowClassName, emptyStateMessage, loading, customButtons, totalItemCount, pagination, id, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
export { OnTable };