Блог

Название говорит само за себя.

Я не могу найти хорошее решение.

то, что я хочу реализовать, приведено ниже..

«всего найдено 10 000 ключей»

далее следует мой код

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <List
            {...props}
            exporter={false}
            filters={<ComponentFilter choices={productPiNames} />}
            bulkActionButtons={<BulkActionButtons />}
          >
            <Datagrid>
             ...
            </Datagrid>
          </List>
        </Grid>
      </Grid>
    </div>
  );
  

Не используйте <List> компонент, а вместо этого используйте <ListBase> , который позволяет вам определить точный макет, который вы хотите для списка в JSX. Например:

 import { 
    Datagrid,
    ListBase,
    ListToolbar,
    BulkActionsToolbar,
    Pagination,
    useListContext,
} from 'react-admin';
import Card from '@material-ui/core/Card';

const PostList = props => (
    <MyList {...props}>
        <Datagrid>
            ...
        </Datagrid>
    </MyList>
);

const MyList = props => (
    <ListBase>
        <h1>{props.title}</h1>
        <ListToolbar
            filters={props.filters}
            actions={props.actions}
        />
        <Card>
            <BulkActionsToolbar>
                {props.bulkActionButtons}
            </BulkActionsToolbar>
            {cloneElement(children, {
                hasBulkActions: props.bulkActionButtons !== false,
            })}
            <Pagination />
        </Card>
    </ListBase>
);
  

Проверьте документ ListBase в <List> главе документа react-adminhttps://marmelab.com/react-admin/List.html#listbase