@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
68 lines (67 loc) • 4.72 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableExportControl = TableExportControl;
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_material_1 = require("@mui/icons-material");
const react_1 = __importDefault(require("react"));
const material_1 = require("@mui/material");
const menu_dropdown_1 = require("../droupdown/menu-dropdown");
const data_table_context_1 = require("../../contexts/data-table-context");
const icons_1 = require("../../icons");
const slot_helpers_1 = require("../../utils/slot-helpers");
function TableExportControl(props = {}) {
const { exportFilename: propsExportFilename, iconButtonProps, tooltipProps, menuSx, menuItemProps, } = props;
const { apiRef, slots, slotProps, isExporting,
// Export callbacks from context (DataTable props)
exportFilename: contextExportFilename, } = (0, data_table_context_1.useDataTableContext)();
// Use props if provided, otherwise fall back to context values
const exportFilename = propsExportFilename || contextExportFilename || 'export';
// Extract slot-specific props with enhanced merging
const exportIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'exportIcon');
const csvIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'csvIcon');
const excelIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'excelIcon');
const ExportIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportIcon', icons_material_1.CloudDownloadOutlined);
const CsvIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'csvIcon', icons_1.CsvIcon);
const ExcelIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'excelIcon', icons_1.ExcelIcon);
const handleExport = async (format) => {
if (!(apiRef === null || apiRef === void 0 ? void 0 : apiRef.current))
return;
try {
if (format === 'csv') {
await apiRef.current.export.exportCSV({
filename: exportFilename,
});
}
else {
await apiRef.current.export.exportExcel({
filename: exportFilename,
});
}
}
catch (error) {
console.error('Export failed:', error);
}
};
// Merge all props for maximum flexibility
const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
size: 'small',
disabled: isExporting,
sx: { flexShrink: 0 },
}, exportIconSlotProps, iconButtonProps || {});
const mergedMenuItemProps = (0, slot_helpers_1.mergeSlotProps)({
sx: { minWidth: 150 },
}, menuItemProps || {});
return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: isExporting ? 'Export in progress...' : 'Export data', ...tooltipProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedIconButtonProps, children: (0, jsx_runtime_1.jsx)(ExportIconSlot, { ...exportIconSlotProps }) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
minWidth: 200,
...menuSx,
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { p: 2, pb: 1 }, children: "Export Format" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
handleExport('csv');
handleClose();
}, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, { ...csvIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "CSV", secondary: "Comma-separated values" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
handleExport('excel');
handleClose();
}, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, { ...excelIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Excel", secondary: "Microsoft Excel format" })] }), isExporting && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2, pt: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', textAlign: 'center' }, children: "Export in progress..." }) }))] })) }));
}