在react-table中操作日期

Question

我想知道是否有任何方法可以操作从react-table组件中的API返回的日期？

例如，时间戳从格式化为2019-08-31 06:27:14的API返回...我希望它看起来像Monday 8th of August 2005 03:12:46 PM

我正在使用react-table组件来呈现该表，我想要操作的列是Signup Date列。

任何帮助都将不胜感激。

columns={[
    {
        Header: "ID",
        accessor: "id",
        show: false
    },
    {
        Header: "Signup Date",
        accessor: "signup_date"
    }
]}

Answer 1

您可以这样修改它：

columns : {[
    {
        Header:"Signup Date",
        accessor:"signup_date",
        //this is the func your looking for, it can retuen custom tableCell
        Cell : (props)=>{
            //props.value will contain your date
            //you can convert your date here
            const custom_date = 'custom_date'+props.value
            return <span>{custom_date}</span>
        }
    }
]}

作为另一种解决方案，最好将表包装在一个父容器中，该容器将修改后的数据传递到表中。像这样的东西：

container.js

componentDidMount(){
    const {data} = this.props;
    let tableData = []
    for(let me in data){
        let object = {
            //select and modify data from incoming server data
            date : 'fake date'
        }
        tableData.push(object)
    }
    this.setState({
        data : tableData
    })
}
render(){
    return(
        <React-Table
           //...settings
           data = {this.state.data}
        />
    )
}

希望这能有所帮助。