如何在 react-admin Datagrid 中添加总和行

Question

我在我的项目中使用 react-admin，我使用带有分页的 Datagrid，我需要为每一页总行添加。首先，我在 dataProvider 中向我的数据添加了新项目，但在这种情况下，总行具有所有设置，例如（可选择、展开等），然后我只是在 Datagrid 之后添加新表，但列与不同屏幕宽度上的主 Datagrid 不匹配。 enter image description here 我搜索了将总行添加到数据网格的更好方法。如果您有类似的问题，请分享，谢谢。

Answer 1

你不能使用 react-admin 的 Datagrid 组件来做到这一点 - 你必须编写自己的 Datagrid 版本。它可能看起来像这样：

import React, {
    isValidElement,
    Children,
    createElement,
    useCallback,
} from 'react';
import Table from '@material-ui/core/Table';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

import { DatagridHeaderCell, DatagridBody, DatagridLoading } from 'react-admin';

const MyDatagrid = props => {
    const {
        basePath,
        children,
        currentSort,
        data,
        hover,
        ids,
        loading,
        loaded,
        onSelect,
        onToggleItem,
        resource,
        rowClick,
        rowStyle,
        selectedIds,
        setSort,
        total,
        version,
        ...rest
    } = props;

    /**
     * Define the aggregation logic by field here
     */
    const getTotalForField = field => {
        // something like
        return ids.map(id => data[id][field]).reduce((acc, curr) => acc + curr);
    }

    // the rest of the code is loosely copied from react-admin's Datagrid component source, simplified for comprehension

    const updateSort = useCallback(
        event => {
            event.stopPropagation();
            setSort(event.currentTarget.dataset.sort);
        },
        [setSort]
    );

    const handleSelectAll = useCallback(
        event => {
            if (event.target.checked) {
                onSelect(
                    ids.concat(selectedIds.filter(id => !ids.includes(id)))
                );
            } else {
                onSelect([]);
            }
        },
        [ids, onSelect, selectedIds]
    );

    if (loaded === false) {
        return (
            <DatagridLoading
                expand={expand}
                hasBulkActions={false}
                nbChildren={React.Children.count(children)}
                size={size}
            />
        );
    }

    if (loaded && (ids.length === 0 || total === 0)) {
        return null;
    }

    return (
        <Table>
            <TableHead>
                <TableRow>
                    {Children.map(children, (field, index) => (
                        <DatagridHeaderCell
                            currentSort={currentSort}
                            field={field}
                            isSorting={
                                currentSort.field ===
                                (field.props.sortBy || field.props.source)
                            }
                            key={field.props.source || index}
                            resource={resource}
                            updateSort={updateSort}
                        />
                    ))}
                </TableRow>
            </TableHead>
            {createElement(
                DatagridBody,
                {
                    basePath,
                    classes,
                    expand,
                    rowClick,
                    data,
                    hasBulkActions,
                    hover,
                    ids,
                    onToggleItem,
                    resource,
                    rowStyle,
                    selectedIds,
                    version,
                },
                children
            )}
            <!-- here starts the custom part -->
            <tfoot>
                <tr>
                    {Children.map(children, (field, index) => (
                        <td key={index}>{getTotalForField(field.props.source)}</td>
                    ))}
                </tr>
            </tfoot>
        </Table>
    );
}

MyDatagrid.defaultProps = {
    data: {},
    hasBulkActions: false,
    ids: [],
    selectedIds: [],
};

export default MyDatagrid;

查看the source code of the original Datagrid 获取更多灵感