@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
53 lines (52 loc) • 6.17 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTableToolbar = DataTableToolbar;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = __importDefault(require("react"));
const column_filter_control_1 = require("./column-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(props = {}) {
const { extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, titleSx, subtitleSx, containerSx, leftSectionSx, rightSectionSx, ...otherProps } = props;
const { table, slots, slotProps = {} } = (0, data_table_context_1.useDataTableContext)();
// Extract slot-specific props with enhanced merging
const toolbarSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'toolbar');
const searchInputSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'searchInput');
const tableSizeControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeControl');
const columnCustomFilterControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnCustomFilterControl');
const columnPinningControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnPinningControl');
const columnVisibilityControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnVisibilityControl');
const resetButtonSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'resetButton');
const exportButtonSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'exportButton');
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_filter_control_1.ColumnFilterControl);
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);
// Merge all props for maximum flexibility
const mergedToolbarProps = (0, slot_helpers_1.mergeSlotProps)({
// Default toolbar props
table,
...otherProps,
}, toolbarSlotProps);
return ((0, jsx_runtime_1.jsx)(ToolbarSlot, { ...mergedToolbarProps, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
width: '100%',
...containerSx,
}, 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", sx: titleSx, children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: subtitleSx, 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,
...leftSectionSx,
}, children: [enableTableSizeControl ? ((0, jsx_runtime_1.jsx)(TableSizeControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, tableSizeControlSlotProps, props.tableSizeControlProps || {}) })) : null, enableColumnFilter ? ((0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, columnCustomFilterControlSlotProps, props.columnFilterProps || {}) })) : null, enableColumnPinning ? ((0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, columnPinningControlSlotProps, props.columnPinningProps || {}) })) : null, enableColumnVisibility ? ((0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, columnVisibilityControlSlotProps, props.columnVisibilityProps || {}) })) : null, enableReset ? ((0, jsx_runtime_1.jsx)(ColumnResetControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, resetButtonSlotProps, props.resetButtonProps || {}) })) : null, enableExport ? ((0, jsx_runtime_1.jsx)(TableExportControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, exportButtonSlotProps, props.exportButtonProps || {}) })) : null, enableGlobalFilter ? ((0, jsx_runtime_1.jsx)(TableSearchControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, searchInputSlotProps, props.searchInputProps || {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: rightSectionSx, children: extraFilter })] })] }) }));
}