React-Admin - Как создать сетку данных без списка в React-Admin

Question

Как создать Datagrid без списка в React-Admin?

В React-admin можно использовать Datagrid для отображения значений, которые вам нужны для его встраивания в список вроде:

<List {...props}>
 <Datagrid> 
  <Textfield source"name" />
 <Datagrid />
<List/>

Но мне нужно использовать dDatagrid вне списка. Значения таблицы данных должны отображаться на экране типа внутри вкладки.

Answer 1

Вот как я решил эту проблему, используя React-Admin 2.9

Сначала я использовал import {Query} из'act-admin '; для извлечения данных из конечной точки data / product и после этого он преобразовал идентификаторы в ключ своих собственных данных.

В компонент CustomDatagrid было передано два массива, которые будут использоваться для отображения значений , Первый - это массив идентификаторов, а второй - массив, который содержит данные и использует идентификаторы в качестве ключа для доступа к значениям.

ProductShow. js

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
  TextField,
  Query,
  showNotification,
  // ReferenceField,
  DateField,
} from 'react-admin';
import CustomDatagrid from './CustomDatagrid';

const convertKeyToIndice = (datas) => {
  const { data } = datas;
  let ids = [];
  const dataKey = [];

  if (data) {
    ids = data.map((elemento) => {
      dataKey[elemento.id] = elemento;
      return elemento.id;
    });
    return ({ ids, dataKey });
  }
  return ({});
};

const ProductShow = (props) => {
  const { record } = props;
  const { productId, dateValue } = record;

  const [newPage, setNewPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(50);

  const filter = {
    pagination: { page: newPage + 1, perPage: rowsPerPage },
    sort: { field: 'id', order: 'ASC' },
    filter: { productId, dateValue: dateValue },
  };

  return (
    <Query type="GET_LIST" resource="data/product" payload={filter}>
      {(datas) => {
        if (datas.loading && !datas.error) { return <div>Wait...</div>; }
        if (datas.error) {
          props.showNotification('Not Found');
          return <div />;
        }

        const dataGridValues = {
          ...convertKeyToIndice(datas),
          total: datas.total,
          rowsPerPage,
          setRowsPerPage,
          newPage,
          setNewPage,
        };

        return (
          <>
            <CustomDatagrid dataGridValues={dataGridValues}>
              {/* <ReferenceField
                sortBy="product.id"
                source="productId"
                reference="product"
                linkType={false}
                allowEmpty
                {...props}
                label="product"
              >
                <TextField source="name" />
              </ReferenceField> */}
              <DateField label="Date" source="valueDate" showTime />
              <TextField label="Value1" source="value1" />
              <TextField label="Value2"  source="value2" />
              <TextField label="Value3"  source="value3" />
              <TextField label="Value4" source="value4" />
              <TextField label="Value5" source="value5" />

            </CustomDatagrid>
          </>

        );
      }}
    </Query>
  );
};

ProductShow.propTypes = {
  productId: PropTypes.string.isRequired,
  dateValue: PropTypes.string.isRequired,
  showNotification: PropTypes.func.isRequired,
  record: PropTypes.oneOfType([PropTypes.object]).isRequired,
};

export default connect(null, { showNotification })(ProductShow);

В TableHead он показывает метку каждого столбца в том порядке, в котором вы упаковываете Компоненты в CustomDatagrid внутри родительского элемента ProductShow component.

Для отображения компонентов Как показывает список React-Admin, используется

                    {React.cloneElement(child,
                      { record: dataKey[id] },
                      (child.props.children ? child.props.children : null))}

CustomDatagrid. js

import React from 'react';
import {
  Table,
  TableRow,
  TableHead,
  TableCell,
  TableBody,
  TablePagination,
} from '@material-ui/core';
import PropTypes from 'prop-types';

const CustomDatagrid = (propsDataGrid) => {
  const { children, dataGridValues } = propsDataGrid;
  const {
    dataKey,
    ids,
    total,
    rowsPerPage,
    setRowsPerPage,
    setNewPage,
    newPage,
  } = dataGridValues;

  const handleChangePage = (event, page) => {
    setNewPage(page);
  };

  const handleChangeRowsPerPage = (event) => {
    const vlrDecimal = parseInt(event.target.value, 10);
    setRowsPerPage(vlrDecimal);

    setNewPage(0);
  };

  return (
    <>
      <Table style={{ width: '100%' }}>
        <TableHead>
          <TableRow>
            {children && children.map(({ props }) => (
              <TableCell>
                {props && props.label ? props.label : props.source}
              </TableCell>
            ))
          }
          </TableRow>
        </TableHead>
        <TableBody>
          {ids && ids.map(id => (
            <TableRow>
              {React.Children.map(children,
                child => (
                  <TableCell>

                    {React.cloneElement(child,
                      { record: dataKey[id] },
                      (child.props.children ? child.props.children : null))}

                  </TableCell>
                ))}
            </TableRow>
          ))
          }
        </TableBody>
      </Table>
      <TablePagination
        rowsPerPageOptions={[50, 100, 250]}
        component="div"
        count={total}
        rowsPerPage={rowsPerPage}
        page={newPage}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
        labelRowsPerPage="Results per Page:"
      />
    </>
  );
};


CustomDatagrid.propTypes = {
  source: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
};


export default CustomDatagrid;