React-table 添加总计作为第一行
React-table add total as first row
我正在使用 react-table 6.9.2。我希望能够在顶部(header 正下方)添加一行来显示每列的总数。
这是我的函数,它只输出具有静态值的 table:
function App() {
const data = [
{
one: 2,
two: 10.4,
three: 10.1,
four: 54,
five: 5,
six: 5,
seven: 10,
eight: 10,
nine: 10
},
{
one: 1,
two: 10.4,
three: 10.1,
four: 54,
five: 5,
six: 5,
seven: 10,
eight: 10,
nine: 10
}
];
return (
<div className="App">
<ReactTable
data={data}
showPagination={false}
columns={[
{
Header: "Sales Overview",
columns: [
{
Header: "one",
id: "one",
accessor: "one",
show: true
},
{
Header: "two",
accessor: "two",
show: true
},
{
Header: "three",
id: "three",
accessor: "three",
show: true
},
{
Header: "four",
id: "four",
accessor: "four",
show: true
},
{
Header: "five",
id: "five",
accessor: "five",
show: true
},
{
Header: "six",
id: "six",
accessor: "six",
show: true
},
{
Header: "seven",
id: "seven",
show: true,
accessor: "seven"
},
{
Header: "eight",
id: "eight",
show: true,
accessor: "eight"
},
{
Header: "nine",
id: "nine",
accessor: "nine",
show: true
}
]
}
]}
loading={false}
minRows={1}
className="-striped -highlight"
/>
</div>
);
}
有什么方法可以在顶部添加总计行?即使我获得了数据中发送的每一列的总值,我是否可以命令它始终在顶部显示总计行?
如果有任何帮助,我还创建了一个沙箱来显示 table:https://codesandbox.io/s/2vz3z741op
提前致谢!
您可以只向数据数组添加总计条目:
https://codesandbox.io/s/qv7vjpr69
const getTotals = (data, key) => {
let total = 0;
data.forEach(item => {
total += item[key];
});
return total;
};
function App() {
const data = [
{
one: "first row",
two: 10.4,
...
},
{
one: "second row",
two: 10.4,
...
}
];
data.unshift({
one: "totals",
two: getTotals(data, "two"),
three: getTotals(data, "three"),
four: getTotals(data, "four"),
five: getTotals(data, "five"),
six: getTotals(data, "six"),
seven: getTotals(data, "seven"),
eight: getTotals(data, "eight"),
nine: getTotals(data, "nine")
});
我正在使用 react-table 6.9.2。我希望能够在顶部(header 正下方)添加一行来显示每列的总数。
这是我的函数,它只输出具有静态值的 table:
function App() {
const data = [
{
one: 2,
two: 10.4,
three: 10.1,
four: 54,
five: 5,
six: 5,
seven: 10,
eight: 10,
nine: 10
},
{
one: 1,
two: 10.4,
three: 10.1,
four: 54,
five: 5,
six: 5,
seven: 10,
eight: 10,
nine: 10
}
];
return (
<div className="App">
<ReactTable
data={data}
showPagination={false}
columns={[
{
Header: "Sales Overview",
columns: [
{
Header: "one",
id: "one",
accessor: "one",
show: true
},
{
Header: "two",
accessor: "two",
show: true
},
{
Header: "three",
id: "three",
accessor: "three",
show: true
},
{
Header: "four",
id: "four",
accessor: "four",
show: true
},
{
Header: "five",
id: "five",
accessor: "five",
show: true
},
{
Header: "six",
id: "six",
accessor: "six",
show: true
},
{
Header: "seven",
id: "seven",
show: true,
accessor: "seven"
},
{
Header: "eight",
id: "eight",
show: true,
accessor: "eight"
},
{
Header: "nine",
id: "nine",
accessor: "nine",
show: true
}
]
}
]}
loading={false}
minRows={1}
className="-striped -highlight"
/>
</div>
);
}
有什么方法可以在顶部添加总计行?即使我获得了数据中发送的每一列的总值,我是否可以命令它始终在顶部显示总计行?
如果有任何帮助,我还创建了一个沙箱来显示 table:https://codesandbox.io/s/2vz3z741op
提前致谢!
您可以只向数据数组添加总计条目:
https://codesandbox.io/s/qv7vjpr69
const getTotals = (data, key) => {
let total = 0;
data.forEach(item => {
total += item[key];
});
return total;
};
function App() {
const data = [
{
one: "first row",
two: 10.4,
...
},
{
one: "second row",
two: 10.4,
...
}
];
data.unshift({
one: "totals",
two: getTotals(data, "two"),
three: getTotals(data, "three"),
four: getTotals(data, "four"),
five: getTotals(data, "five"),
six: getTotals(data, "six"),
seven: getTotals(data, "seven"),
eight: getTotals(data, "eight"),
nine: getTotals(data, "nine")
});