Как переписать стили @ devexpress / dx-реагировать-grid-material-ui? - PullRequest
Новая
       28

Как переписать стили @ devexpress / dx-реагировать-grid-material-ui?

1 голос
/ 11 июля 2019

Есть ли способ переписать стили TableSummaryRow из библиотеки '@ devexpress / dx-Reaction-grid-material-ui'?

Что у меня есть: компонент, который отображает таблицу(используя библиотеку '@ devexpress / dx-Reaction-grid-material-ui') и в последней строке выводит общее количество строк в таблице.

Что мне нужно сделать: ячейка таблицы стилей, в которой TableSummaryRow отображает результат.

Я уже пробовал это решение , но оно не работает для меня.

Вот простой код моего компонента: 

import React from 'react';
import { SummaryState } from '@devexpress/dx-react-grid';
import {
  TableHeaderRow,
  TableSummaryRow
} from '@devexpress/dx-react-grid-material-ui';
import { ExtendedGrid } from 'components/DxGrid/index';

const Table = ({ rows }) => (
  <ExtendedGrid rows={rows} columns={reportColumns}>
    <SummaryState totalItems={[{ columnName: 'userName', type: 'count' }]} />
    <TableHeaderRow />
    <TableSummaryRow messages={{ count: 'Number of rows' }} />
  </ExtendedGrid>
);

export default Table;

Ответы [ 2 ]

1 голос
/ 12 июля 2019

Согласно документации TableSumRow вам необходимо использовать SummaryState компонент. Кроме того, по какой-то причине я не могу заставить его работать без компонента IntegratedSummary, даже если он помечен как необязательный.

Рабочее демо можно найти здесь .

А вот код из демо. Для всей команды есть общий весовой ряд. 

import React from "react";
import { render } from "react-dom";
import { SummaryState, IntegratedSummary } from "@devexpress/dx-react-grid";
import {
  Grid,
  Table,
  TableHeaderRow,
  TableSummaryRow
} from "@devexpress/dx-react-grid-material-ui";

class App extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      totalSummaryItems: [{ columnName: "weight", type: "sum" }],
      columns: [
        { name: "name", title: "Name" },
        { name: "weight", title: "Weight" }
      ],
      rows: [
        { name: "Sandra", weight: 123 },
        { name: "Andy", weight: 9000 },
        { name: "Einstein", weight: 56 },
        { name: "Bob", weight: 11 }
      ]
    };
  }
  render() {
    const { rows, columns } = this.state;

    return (
        <Grid rows={rows} columns={columns}>
          <SummaryState totalItems={this.state.totalSummaryItems} />
          <IntegratedSummary />
          <Table />
          <TableHeaderRow />
          <TableSummaryRow messages={{ sum: "Total weight of the group" }} />
        </Grid>
      </Paper>
    );
  }
}

render(<App />, document.getElementById("root"));
0 голосов
/ 13 июля 2019

Я понял это сам, может быть, это кому-нибудь пригодится.

Эта официальная страница документации помогла мне. Поэтому я использовал makeStyles метод.

Вот рабочая ДЕМО .

И последний компонент (на основе ответа Андрея Константинова): 

import React from "react";
import { render } from "react-dom";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/styles";
import { SummaryState, IntegratedSummary } from "@devexpress/dx-react-grid";
import {
  Grid,
  Table,
  TableHeaderRow,
  TableSummaryRow
} from "@devexpress/dx-react-grid-material-ui";

const useStyles = makeStyles({
  root: {
    "& tfoot": {
      "& td": {
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
        "&:empty": {
          background: "none"
        }
      }
    }
  }
});

const Hook = () => {
  const data = {
    totalSummaryItems: [{ columnName: "weight", type: "sum" }],
    columns: [
      { name: "name", title: "Name" },
      { name: "weight", title: "Weight" }
    ],
    rows: [
      { name: "Sandra", weight: 123 },
      { name: "Andy", weight: 9000 },
      { name: "Einstein", weight: 56 },
      { name: "Bob", weight: 11 }
    ]
  };
  const { rows, columns } = data;
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Grid rows={rows} columns={columns}>
        <SummaryState totalItems={data.totalSummaryItems} />
        <IntegratedSummary />
        <Table />
        <TableHeaderRow />
        <TableSummaryRow messages={{ sum: "Total weight of the group" }} />
      </Grid>
    </Paper>
  );
};

render(<Hook />, document.getElementById("root"));
...