@pagamio/frontend-commons-lib/lib/dashboard-visuals/visuals/Table.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionIcon, Tooltip } from '@mantine/core';
import { IconCopy } from '@tabler/icons-react';
import { useCallback, useMemo, useState } from 'react';
import { usePaginatedApiSWR } from '../../api';
import PagamioTable from '../../pagamio-table/data-table';
import Card from '../components/CardWrapper';
import ErrorState from '../components/ErrorState';
import TileSkeleton from '../components/TileSkeleton';
import { DashboardPaths } from '../utils';
const DataTable = ({ columns, title, searchKey, url = DashboardPaths.PAGED, query, searctInputPlaceHolder, expandable = false, renderExpandableComponent, }) => {
    const [sortState, setSortState] = useState({});
    const [searchQuery, setSearchQuery] = useState('');
    const [appliedSearchQuery, setAppliedSearchQuery] = useState('');
    const [currentPage, setCurrentPage] = useState(0);
    const [itemsPerPage, setItemsPerPage] = useState(10);
    const enhancedColumns = useMemo(() => {
        return columns.map((column) => {
            const extendedColumn = column;
            if (extendedColumn.enableCopy) {
                return {
                    ...extendedColumn,
                    // eslint-disable-next-line @typescript-eslint/naming-convention
                    Cell: ({ cell }) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("span", { children: cell.getValue() }), _jsx(Tooltip, { label: "Copy", children: _jsx(ActionIcon, { size: "xs", onClick: () => navigator.clipboard.writeText(cell.getValue()), style: { marginLeft: 8 }, children: _jsx(IconCopy, { size: 16 }) }) })] })),
                };
            }
            if (extendedColumn.formattedCellElement) {
                return {
                    ...extendedColumn,
                    // eslint-disable-next-line @typescript-eslint/naming-convention
                    Cell: ({ row }) => {
                        return extendedColumn.formattedCellElement(row.original);
                    },
                };
            }
            return column;
        });
    }, [columns]);
    // Build the query parameters
    const queryParams = useMemo(() => {
        const resolvedSortDirection = sortState.sortDir ? sortState.sortDir.toUpperCase() : query.sortDirection;
        return JSON.stringify({
            ...query,
            filters: appliedSearchQuery ? { [searchKey]: appliedSearchQuery, ...query.filters } : query.filters,
            sortBy: sortState.sortBy ?? query.sortBy,
            sortDirection: resolvedSortDirection,
            page: currentPage,
            size: itemsPerPage,
        });
    }, [query, appliedSearchQuery, searchKey, sortState, currentPage, itemsPerPage]);
    const { data: response, error, isValidating: loading, mutate, } = usePaginatedApiSWR([url, queryParams], {
        method: 'POST',
        body: queryParams,
    });
    const tableData = response?.content ?? [];
    const totalItems = response?.totalElements ?? 0;
    const totalPages = response?.totalPages ?? 0;
    const handleRetry = useCallback(() => {
        mutate().then();
    }, [mutate]);
    const handleSort = useCallback((sortKey, sortDirection) => {
        setSortState({ sortBy: sortKey, sortDir: sortDirection });
        setCurrentPage(0);
    }, []);
    const handleSearch = (e) => {
        setSearchQuery(e.target.value);
    };
    const handleSearchTable = () => {
        setAppliedSearchQuery(searchQuery);
        setCurrentPage(0);
    };
    const handlePageChange = (page) => {
        setCurrentPage(page);
    };
    const handleItemsPerPageChange = useCallback((pageIndex, pageSize) => {
        setItemsPerPage(pageSize);
        setCurrentPage(0);
    }, []);
    const handleClearFilters = useCallback(() => {
        setSearchQuery('');
        setAppliedSearchQuery('');
        setCurrentPage(0);
        setSortState({});
    }, []);
    const sortConfig = sortState.sortBy
        ? { sortBy: sortState.sortBy, sortDir: sortState.sortDir ?? 'asc' }
        : { sortBy: 'asc' };
    const renderContent = () => {
        if (error) {
            return _jsx(ErrorState, { error: error, onRetry: handleRetry });
        }
        return (_jsx("div", { className: "mt-[19px]", children: _jsx(PagamioTable, { columns: enhancedColumns, data: tableData, addButton: false, rowCount: totalItems, searctInputPlaceHolder: searctInputPlaceHolder, pagination: {
                    enabled: true,
                    pageIndex: currentPage,
                    totalPages: totalPages,
                    onPageChange: handlePageChange,
                    pageSize: itemsPerPage,
                    itemsPerPage,
                    itemsPerPageOptions: [10, 20, 50],
                    onPaginationChange: handleItemsPerPageChange,
                }, sorting: {
                    multiSorting: false,
                    sortConfig: sortConfig,
                    onSort: handleSort,
                }, search: {
                    enabled: true,
                    searchQuery,
                    onSearch: handleSearch,
                }, handleSearchTable: handleSearchTable, onClearFilters: handleClearFilters, sortable: true, showApplyFilterButton: true, enableManualSorting: true, enableManualPagination: true, enablePagination: true, showClearFilters: true, exportable: true, enableGlobalFilters: false, expandable: expandable, renderExpandableComponent: renderExpandableComponent }) }));
    };
    return _jsx(Card, { title: title, children: loading ? _jsx(TileSkeleton, {}) : renderContent() });
};
export default DataTable;