[英]Displaying firstname and last name in the same column in react-table-2
I have an API rendering some user data, first- and last name etc.:我有一个 API 呈现一些用户数据,名字和姓氏等:
users = [{
firstname: 'Peter',
lastname: 'Pan'
address: 'someAddress'
},
firstname: 'Winnie',
lastname: 'thePoo'
address: 'someOtherAddress'
}]
Now, I would like to display the name in the same column in the react-table-2 to enable searching for both first- and last name.现在,我想在 react-table-2 的同一列中显示名称,以便同时搜索名字和姓氏。 What is the best way to do this?
做这个的最好方式是什么? I have tried formatting the data through the "formatter" property, but it does not seem to work well when searching.
我曾尝试通过“格式化程序”属性格式化数据,但在搜索时似乎效果不佳。
Any ideas?有任何想法吗? I would like to avoid changing the API
我想避免更改 API
import React, { Component } from 'react';
const data = [
{
firstname: 'Peter',
lastname: 'Pan',
address: 'someAddress'
},
{
firstname: 'Winnie',
lastname: 'thePoo',
address: 'someOtherAddress'
}
]
class TwoFielSameColumn extends Component{
render(){
const finalData = data.map(item => ({
...item,
fullName: `${item.firstname} ${item.lastname}` || "",
}))
return(
<div>
{finalData.map((q) => <div>{q.fullName}</div>)}
</div >
)
}
}
export default TwoFielSameColumn;
Use finalData of tabledata使用 tabledata 的 finalData
While defining the column:在定义列时:
...
{
Header: "Name",
accessor: "name",
Cell: ( {row} ) => {return (`${row.original.firstname} ${row.original.lastname}`)}
},
Since I was using service side pagination and filters I am not sure how would it behave when we use filters.由于我使用的是服务端分页和过滤器,我不确定当我们使用过滤器时它会如何表现。 Sorting is not working so I thought.
排序不起作用所以我想。 May be someone can elaborate it.
可能有人可以详细说明一下。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.