@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
94 lines (93 loc) • 7.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableExportControl = TableExportControl;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_material_1 = require("@mui/icons-material");
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 export_utils_1 = require("../../utils/export-utils");
const slot_helpers_1 = require("../../utils/slot-helpers");
function TableExportControl({ exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, } = {}) {
const { table, apiRef, slots, slotProps, dataMode, isExporting, onCancelExport, exportFilename: contextExportFilename, onServerExport: contextOnServerExport, onExportProgress: contextOnExportProgress, onExportComplete: contextOnExportComplete, onExportError: contextOnExportError, } = (0, data_table_context_1.useDataTableContext)();
const exportFilename = propsExportFilename || contextExportFilename || 'export';
const onServerExport = propsOnServerExport || contextOnServerExport;
const onExportProgress = propsOnExportProgress || contextOnExportProgress;
const onExportComplete = propsOnExportComplete || contextOnExportComplete;
const onExportError = propsOnExportError || contextOnExportError;
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 = (format) => tslib_1.__awaiter(this, void 0, void 0, function* () {
var _a, _b;
try {
if (dataMode === 'server' && onServerExport) {
const currentState = table.getState();
const currentFilters = {
globalFilter: currentState.globalFilter,
sorting: currentState.sorting,
columnFilters: currentState.columnFilters,
};
const selectionData = (_b = (_a = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.getSelectionState();
yield (0, export_utils_1.exportServerData)(table, {
format,
filename: exportFilename,
fetchData: (filters, selection) => onServerExport(filters || currentFilters, selection),
currentFilters,
selection: selectionData,
onProgress: onExportProgress,
onComplete: onExportComplete,
onError: onExportError,
});
}
else {
yield (0, export_utils_1.exportClientData)(table, {
format,
filename: exportFilename,
onProgress: onExportProgress,
onComplete: onExportComplete,
onError: onExportError,
});
}
}
catch (error) {
console.error('Export failed:', error);
onExportError === null || onExportError === void 0 ? void 0 : onExportError({
message: error instanceof Error ? error.message : 'Export failed',
code: 'PROCESSING_ERROR',
});
}
});
const selectedRowCount = Object.keys(table.getState().rowSelection).filter(key => table.getState().rowSelection[key]).length;
const summary = {
filteredRows: table.getFilteredRowModel().rows.length,
totalColumns: table.getVisibleLeafColumns().filter(col => col.getIsVisible()).length,
selectedRows: selectedRowCount,
hasSelection: selectedRowCount > 0,
};
return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Export data", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: isExporting, sx: {
flexShrink: 0,
color: isExporting ? 'warning.main' : 'text.secondary',
}, children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
p: 1,
minWidth: 280,
}, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
mb: 2,
p: 1,
bgcolor: 'grey.50',
borderRadius: 1,
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "Export Summary" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: summary.hasSelection
? `${summary.selectedRows} selected • ${summary.totalColumns} visible columns`
: `${summary.filteredRows} filtered • ${summary.totalColumns} visible columns` }), summary.hasSelection ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "primary.main", sx: { fontWeight: 'medium' }, children: "Will export selected rows only" })) : null] }), isExporting ? ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
onCancelExport === null || onCancelExport === void 0 ? void 0 : onCancelExport();
handleClose();
}, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({ fontSize: "small", color: "warning" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Cancel Export", secondary: "Stop current export" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
yield handleExport('csv');
handleClose();
}), disabled: isExporting, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.csvIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Export as CSV", secondary: ".csv format" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
yield handleExport('excel');
handleClose();
}), disabled: isExporting, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.excelIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Export as Excel", secondary: ".xlsx format" })] })] }))] })) }));
}