разделить / разделить столбец на две части и стилизовать каждую часть в таблице материалов? - PullRequest
Новая
       47

разделить / разделить столбец на две части и стилизовать каждую часть в таблице материалов?

0 голосов
/ 08 мая 2020

Я пытаюсь разделить столбец таблицы материалов на две части, но это не работает. Я пытался применить пользовательский css для определенных c данных, но снова не работал. вот мой код. 

<MaterialTable
  title=""
  columns={[
    {
      title: "SCENARIO",
      field: "scenario",
      customSort: (a, b) => a.scenario.length - b.scenario.length,
    },
    {
      title: "SCORE",
      field: "score",
      type: "numeric",
      cellStyle: {
        backgroundColor: "#e1f5f8",
        color: "#000",
        borderRight: "2px solid #000",
        fontWeight: "bold",
      },
    },
    { title: "FILL RATE", field: "fillRate", type: "numeric" },
    {
      title: "REVENUE",
      field: "revenue",
      type: "numeric",
    },
    { title: "COST TO SERVE", field: "costToServe", type: "numeric" },
    { title: "MARGIN", field: "margin", type: "numeric" },
    {
      title: "IMPACTED DEMAND",
      field: "impactedDemand",
      type: "numeric",
    },
  ]}
  data={[
    {
      scenario: "Live -04-25-2020",
      score: 7.6,
      fillRate: 97.5,
      revenue: 63,
      costToServe: 0,
      margin: 6.9,
      impactedDemand: 0,
    },
    {
      scenario: "Live",
      score: 7.0,
      fillRate: 92.5,
      revenue: 63,
      costToServe: 0,
      margin: 6.9,
      impactedDemand: 0,
    },
    {
      scenario: "Recomended",
      score: 7.1,
      fillRate: 97.5,
      revenue: 63,
      costToServe: 0,
      margin: 6.9,
      impactedDemand: 0,
    },
    {
      scenario: "Override",
      score: 7.0,
      fillRate: 97.5,
      revenue: 63,
      costToServe: 0,
      margin: 6.9,
      impactedDemand: 0,
    },
    {
      scenario: "ML",
      score: 6.9,
      fillRate: 97.5,
      revenue: 63,
      costToServe: 0,
      margin: 6.9,
      impactedDemand: 0,
    },
  ]}
  options={{
    sorting: true,
    search: false,
    paging: false,
    fixedColumns: {
      left: 2,
    },
  }}
 />

Как я могу разделить определенные данные столбца c на две части и применить css к этому столбцу? Пожалуйста, помогите мне, так как я новичок в таблице материалов.

1 Ответ

1 голос
/ 09 мая 2020

Я не уверен, что это именно то, что вам нужно, но поскольку нет готового способа сделать это непосредственно внутри таблицы материалов, вы можете использовать собственный рендер и создать элемент <Grid> внутри вашей ячейки: 

render: rowData => {
  return (
    <Grid container spacing={0} className={classes.rateRevContainer}>
      <Grid item xs={6} className={classes.rateCol}>
        {rowData["fillRate"]}
      </Grid>
      <Grid item xs={6} className={classes.revCol}>
        {rowData["revenue"]}
      </Grid>
    </Grid>
  );

Вы можете увидеть полную рабочую версию здесь: https://codesandbox.io/s/material-table-split-column-ihdty?file= / demo. js

...