@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
82 lines (81 loc) • 2.45 kB
JavaScript
;
/**
* General table utilities for DataTable components
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.calculateSkeletonRows = calculateSkeletonRows;
exports.generateRowId = generateRowId;
exports.calculatePinnedColumnsWidth = calculatePinnedColumnsWidth;
exports.shouldUseFixedLayout = shouldUseFixedLayout;
exports.formatCellValue = formatCellValue;
exports.debounce = debounce;
exports.calculateTableMetrics = calculateTableMetrics;
/**
* Calculate skeleton rows count based on viewport and row height
*/
function calculateSkeletonRows(containerHeight, rowHeight, maxRows = 10) {
const estimatedRows = Math.ceil(containerHeight / rowHeight);
return Math.min(estimatedRows, maxRows);
}
/**
* Generate unique row ID for virtualization
*/
function generateRowId(row, index, idKey) {
if (idKey && row[idKey]) {
return String(row[idKey]);
}
return `row-${index}`;
}
/**
* Calculate total width of pinned columns
*/
function calculatePinnedColumnsWidth(columns, side) {
return columns
.filter(col => col.getIsPinned() === side)
.reduce((total, col) => total + (col.getSize() || 0), 0);
}
/**
* Check if table should use fixed layout
*/
function shouldUseFixedLayout(fitToScreen, enableColumnResizing, totalColumns) {
return fitToScreen || (enableColumnResizing && totalColumns > 5);
}
/**
* Format cell value based on column type
*/
function formatCellValue(value, type) {
if (value === null || value === undefined) {
return '-';
}
switch (type) {
case 'date':
return value instanceof Date ? value.toLocaleDateString() : String(value);
case 'number':
return typeof value === 'number' ? value.toLocaleString() : String(value);
case 'boolean':
return value ? 'Yes' : 'No';
default:
return String(value);
}
}
/**
* Debounce function for search and filters
*/
function debounce(func, wait) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), wait);
};
}
/**
* Get table performance metrics
*/
function calculateTableMetrics(totalRows, visibleRows, columns, renderStartTime) {
return {
totalRows,
visibleRows,
pinnedColumns: columns.filter(col => col.getIsPinned()).length,
renderTime: performance.now() - renderStartTime,
};
}