divide/split 将一列分为两部分并在 material table 中设置每个部分的样式?
divide/split a column into two parts and style each part in material table?
我试图将 material table 列分成两部分,但它不起作用。我试图为特定数据应用自定义 css 但再次无法正常工作。这是我的代码。
<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,
},
}}
/>
如何将特定列的数据分成两部分并在该列上应用 css?请帮助我,因为我是 material-table.
的新手
我不确定这是否正是您所需要的,但是由于没有开箱即用的方法可以直接在 material-table 中执行此操作,您可以使用自定义渲染并在您的单元格中创建一个 <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
我试图将 material table 列分成两部分,但它不起作用。我试图为特定数据应用自定义 css 但再次无法正常工作。这是我的代码。
<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,
},
}}
/>
如何将特定列的数据分成两部分并在该列上应用 css?请帮助我,因为我是 material-table.
的新手我不确定这是否正是您所需要的,但是由于没有开箱即用的方法可以直接在 material-table 中执行此操作,您可以使用自定义渲染并在您的单元格中创建一个 <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