pagamio-frontend-commons-lib/lib/dashboard-visuals/components/DataTable.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, Text, Tooltip } from '@mantine/core';
import { IconCopy } from '@tabler/icons-react';
import { MantineReactTable } from 'mantine-react-table';
import { useMemo } from 'react';
const ReusableTable = ({ columns, data, title, initialState, enableGlobalSearch = false, enableColumnFilters = false, enableSorting = true, enablePagination = false, enableRowSelection = false, enableColumnReordering = false, enableStickyHeader = false, tableOptions, }) => {
    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: ({ cell }) => {
                        return extendedColumn.formattedCellElement(cell.getValue());
                    },
                };
            }
            return column;
        });
    }, [columns]);
    const memoizedData = useMemo(() => data, [data]);
    const tableOptionsMerged = useMemo(() => ({
        columns: enhancedColumns,
        data: memoizedData,
        initialState,
        enableGlobalFilter: enableGlobalSearch,
        enableColumnFilters,
        enableSorting,
        enablePagination,
        enableRowSelection,
        enableColumnReordering,
        enableStickyHeader,
        ...tableOptions,
    }), [
        enhancedColumns,
        memoizedData,
        initialState,
        enableGlobalSearch,
        enableColumnFilters,
        enableSorting,
        enablePagination,
        enableRowSelection,
        enableColumnReordering,
        enableStickyHeader,
        tableOptions,
    ]);
    return (_jsx(MantineReactTable, { ...tableOptionsMerged, renderTopToolbarCustomActions: () => title ? (_jsx(Text, { size: "lg", weight: 700, children: title })) : null }));
};
export default ReusableTable;