Reactjs-表。如何将多个值连接到 1 个单元格中?
Reactjs-tables. How to join multiple values into 1 cell?
我正在使用 react-table,但我有 2 个值要加入到一个单元格中。有人知道怎么做吗?
假设我有这个示例代码,现在它有 "name" 作为名字和姓氏的组合。
如果在我的数据库中将名字和姓氏分开,会发生什么情况。我怎样才能在 ui 中将它们连接在一起(我知道我可以在数据库级别执行此操作,但这只是一个示例)
import ReactTable from 'react-table'
render() {
const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
}
},{
...
}]
const columns = [{
Header: 'Name',
accessor: 'name' // String-based value accessors!
}, {
Header: 'Age',
accessor: 'age',
Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
}, {
id: 'friendName', // Required because our accessor is not a string
Header: 'Friend Name',
accessor: d => d.friend.name // Custom value accessors!
}, {
Header: props => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age'
}]
<ReactTable
data={data}
columns={columns}
/>
}
这行得通吗?
const columns = [
{
Header: 'Full Name',
accessor: d => `${d.firstName} ${d.lastName}`
}
]
如果您想按其中一个值排序
{
Header: "Price",
accessor : "unit_price", // matters for grouping and sorting
Cell : props => <span>
{props.original.currency} {Numeral(props.original.unit_price).format('0,0.00')}
</span>
},
我正在使用 react-table,但我有 2 个值要加入到一个单元格中。有人知道怎么做吗?
假设我有这个示例代码,现在它有 "name" 作为名字和姓氏的组合。
如果在我的数据库中将名字和姓氏分开,会发生什么情况。我怎样才能在 ui 中将它们连接在一起(我知道我可以在数据库级别执行此操作,但这只是一个示例)
import ReactTable from 'react-table'
render() {
const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
}
},{
...
}]
const columns = [{
Header: 'Name',
accessor: 'name' // String-based value accessors!
}, {
Header: 'Age',
accessor: 'age',
Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
}, {
id: 'friendName', // Required because our accessor is not a string
Header: 'Friend Name',
accessor: d => d.friend.name // Custom value accessors!
}, {
Header: props => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age'
}]
<ReactTable
data={data}
columns={columns}
/>
}
这行得通吗?
const columns = [
{
Header: 'Full Name',
accessor: d => `${d.firstName} ${d.lastName}`
}
]
如果您想按其中一个值排序
{
Header: "Price",
accessor : "unit_price", // matters for grouping and sorting
Cell : props => <span>
{props.original.currency} {Numeral(props.original.unit_price).format('0,0.00')}
</span>
},