#

zhou zhou

1 天以前 2e114371163bbc7ca5a3ab525b11bf48d0b3b2b8

 rsf-admin/src/page/components/StickyDataTable.jsx

@@ -63,6 +63,10 @@
 * DataTable 样式常量
 */
const tableStyles = {
    '& .RaBulkActionsToolbar-toolbar': {
        top: 0,
        zIndex: 6,
    },
    '& .MuiTableCell-head': {
        zIndex: 4,
        borderBottom: 'none'
@@ -74,6 +78,11 @@
        backgroundColor: '#FFFFFF',
    },
    '& .MuiTableFooter-root .MuiTableCell-root': {
        backgroundColor: '#f5f5f5',
        fontWeight: 'bold',
        borderTop: '2px solid #e0e0e0',
    },
    '& .RaDataTable-thead': {
        backgroundColor: '#f5f5f5',
        fontWeight: 'bold',
        borderTop: '2px solid #e0e0e0',
@@ -135,12 +144,14 @@
 *   - label: 显示的标签，支持翻译 key 或直接显示的文本
 *   - render: 可选，自定义渲染函数 (value, data) => ReactNode
 * @param {string} props.footerLabel - footer 第一列标签，默认'合计'
 * @param {number} props.bulkActionsOffsetY - 批量操作栏展开时向下偏移（px）
 */
export const StickyDataTable = ({
    stickyLeft = [],
    stickyRight = [],
    footerConfig,
    footerLabel = '合计',
    bulkActionsOffsetY = 0,
    children,
    ...props
}) => {
@@ -192,9 +203,30 @@
        return () => <StickyTableFooter footerConfig={footerConfig} footerLabel={footerLabel} />;
    }, [footerConfig, footerLabel]);

    const dataTableStyles = useMemo(() => {
        return {
            ...tableStyles,
            '& .RaBulkActionsToolbar-toolbar:not(.RaBulkActionsToolbar-collapsed)': {
                transform: `translateY(${bulkActionsOffsetY}px)`,
            },
        };
    }, [bulkActionsOffsetY]);

    return (
        <DataTable {...props} foot={footerComponent} sx={tableStyles}>
            {processedChildren}
        <DataTable {...props} foot={footerComponent} sx={dataTableStyles}>
            {/* {processedChildren} */}
            {processedChildren
                .map((column) => (
                    <DataTable.Col
                        key={column.key || column.props.source}
                        source={column.props.source}
                        label={column.props.label}
                        sx={column.props.sx}
                    >
                        {column}
                    </DataTable.Col>
                ))
            }
        </DataTable>
    );
};