@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
25 lines (24 loc) • 2.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { HiPlusSm } from 'react-icons/hi';
import { FilterComponent, IconButton } from '../../components';
import ExportDropdown from './ExportButton';
const TableToolbar = ({ searchable, searchQuery, onSearch, filters = [], appliedFilters, exportable, columns, data, onTableFilter = () => { }, addButton, addText, searctInputPlaceHolder, onAdd = () => { }, handleSearchTable, handleApplyFilters, onClearFilters = () => { }, showClearFilters = false, showApplyFilterButton = true, isNarrow, extraExportOptions = [], pdfExportOptions, xlsxExportOptions, csvExportOptions, exportAll, fetchData, }) => {
const handleFilter = (columnKey, value) => {
onTableFilter(columnKey, value ?? '');
};
return (_jsx(FilterComponent, { filters: filters.map((filterObj) => ({
name: filterObj.columnKey,
type: filterObj.type || 'select',
options: filterObj.options,
placeholder: filterObj.placeholder,
rangeKeys: filterObj.rangeKeys,
})), searctInputPlaceHolder: searctInputPlaceHolder, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, selectedFilters: appliedFilters, handleFilterChange: (name, value) => {
if (value instanceof Date) {
handleFilter(name, value.toISOString());
}
else {
handleFilter(name, value);
}
}, handleApplyFilters: handleApplyFilters ?? handleSearchTable, resetFilters: onClearFilters, showSearch: searchable, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: isNarrow ? 'flex flex-col items-stretch space-y-2 pt-5' : 'flex items-center flex-wrap gap-2', children: [exportable && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: _jsx(ExportDropdown, { containerClassName: "w-full", columns: columns, data: data, buttonClassName: "h-10", extraOptions: extraExportOptions, pdfOptions: pdfExportOptions, xlsxOptions: xlsxExportOptions, csvOptions: csvExportOptions, exportAll: exportAll, fetchData: fetchData }) })), addButton && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd, icon: HiPlusSm, label: "add-new-entry", className: "items-center w-full text-nowrap", children: addText ?? 'Add New Entry' })) : (addButton) }))] }) }));
};
export default TableToolbar;