reactjs - 将排序添加到 MDBTable
问题描述
我正在尝试将排序添加到我的表中。我试图避免使用列重新格式化 json:[{}]。
相反,我想直接在 MDBTable 数据中添加排序选项。
这可能吗?或者我可以指定 MDBTable 的列吗?
下面的代码工作正常,但列不可排序。
render() {
return (
<div>
<h1 className="text-center">Coronastatistik för sverige</h1>
<MDBTable>
<MDBTableHead>
<tr>
<th>Regtion</th>
<th>Fall</th>
<th>Fall per 100 000 invånare</th>
<th>Procent av fall i Sverige</th>
</tr>
</MDBTableHead>
<MDBTableBody>
{this.state.regions.map(region => (
<tr>
<td>{region.Region}</td>
<td>{region.Fall.toLocaleString()}</td>
<td>{region.Incidens}</td>
<td>{region.Procent} %</td>
</tr>
))}
</MDBTableBody>
</MDBTable>
</div>
);
}
解决方案
为了能够首先对 MDBTable 进行排序,您必须将其作为 MDBDataTable 进行。然后在我的情况下,我必须使用它需要的数据创建 json 对象。对我来说,混乱的部分是了解如何构建合适的 json 对象。但在那之后,桌子就没有问题了。
这需要这种格式的对象
data: {
columns: [{
label: 'Name',
field: 'name',
sort: 'asc',
width: 150 }],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '$320'
}}
然后你返回 MDBDataTable
return (
<MDBDataTable
striped
bordered
small
data={data}
/>
);
推荐阅读
- python-3.x - 如何修复“NGNIX 504 网关超时”
- java - Mockito 的 when() 不存根超类的方法
- scala - AWS EMR 添加步骤:如何在 --jars 和 --driver-class-path 选项中从 s3 添加多个 jar?
- python-2.7 - 生成 HTML 页面时出现 KeyError
- android - E/RecyclerView:没有附加适配器;跳过布局 - kotlin
- data-structures - 具有 n 个元素的堆的高度
- windows - 所有 Windows 字体都以相同的方式表达扩展 ASCII 吗?
- micrometer - 使用 Timer 进行批处理操作
- c++ - 有什么方法可以更快地打印 2D 阵列?
- r - 如何从数据中生成 R 中与 igraph 兼容的边集