@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
27 lines (26 loc) • 4.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTableToolbar = DataTableToolbar;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const column_custom_filter_control_1 = require("./column-custom-filter-control");
const column_pinning_control_1 = require("./column-pinning-control");
const column_reset_control_1 = require("./column-reset-control");
const column_visibility_control_1 = require("./column-visibility-control");
const table_export_control_1 = require("./table-export-control");
const table_search_control_1 = require("./table-search-control");
const table_size_control_1 = require("./table-size-control");
const data_table_context_1 = require("../../contexts/data-table-context");
const slot_helpers_1 = require("../../utils/slot-helpers");
function DataTableToolbar({ extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, }) {
const { table, slots, slotProps = {} } = (0, data_table_context_1.useDataTableContext)();
const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', material_1.Toolbar);
const TableSearchControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchInput', table_search_control_1.TableSearchControl);
const TableSizeControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeControl', table_size_control_1.TableSizeControl);
const ColumnCustomFilterControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnCustomFilterControl', column_custom_filter_control_1.ColumnCustomFilterControl);
const ColumnPinningControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnPinningControl', column_pinning_control_1.ColumnPinningControl);
const ColumnVisibilityControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnVisibilityControl', column_visibility_control_1.ColumnVisibilityControl);
const ColumnResetControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'resetButton', column_reset_control_1.ColumnResetControl);
const TableExportControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportButton', table_export_control_1.TableExportControl);
return ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ table: table }, slotProps.toolbar, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(title || subtitle) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [title ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { flex: 1 }, children: [enableGlobalFilter ? (0, jsx_runtime_1.jsx)(TableSearchControlSlot, Object.assign({}, slotProps.searchInput)) : null, enableTableSizeControl ? (0, jsx_runtime_1.jsx)(TableSizeControlSlot, Object.assign({}, slotProps.tableSizeControl)) : null, enableColumnFilter ? (0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, Object.assign({}, slotProps.columnCustomFilterControl)) : null, enableColumnPinning ? (0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, Object.assign({}, slotProps.columnPinningControl)) : null, enableColumnVisibility ? (0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, Object.assign({}, slotProps.columnVisibilityControl)) : null, enableReset ? (0, jsx_runtime_1.jsx)(ColumnResetControlSlot, Object.assign({}, slotProps.resetButton)) : null, enableExport ? (0, jsx_runtime_1.jsx)(TableExportControlSlot, Object.assign({}, slotProps.exportButton)) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: extraFilter })] })] }) })));
}