如何使用React-Table

时间:2019-10-21 09:16:35

标签: javascript reactjs contenteditable react-table

我已经使用React-Table模块在React中制作了这个功能组件。 一切工作正常,将数据库加载到“ Datos”对象中,并在其各自的列中显示数据。

问题是,如何使此表可编辑?我看到的所有示例都使用State,在我的情况下这是不可能的,因为我不在App.js上并且正在使用功能组件。 代码如下。如果您需要其他信息,请告诉我。先感谢您。

import React from "react";
import ReactTable from 'react-table'
import 'react-table.css'                

const Capturas = ({datos}) => { 

    const columns = [
        {
            id:'timeStamp',     
            Header: 'TIME STAMP',
            accessor: datos=>   timeFormat(datos.day) + '/'+ timeFormat(datos.month) + '/' + timeFormat(datos.year) + ' ' +   
                                timeFormat(datos.hour) + ':' + timeFormat(datos.minute) + ':' + timeFormat(datos.second),   
        },
        {
            id:'NAME',
            Header: 'NAME',
            accessor: datos=>datos.NAME,
        },
        {
            id:'SURNAME',
            Header: 'SURNAME',
            accessor:datos=>datos.SURNAME,
        },
        {
            id: 'location',
            Header: 'LOCATION',
            accessor: datos=>datos.location,
            width: 150,
        },
        {
            id: 'range',
            Header: 'RANGE (m)',
            accessor: datos=>datos.range,
            width: 150,
        },
    ]
    return( 
            <ReactTable 
            className = "center -striped -highlight bg-light"
            filterable={true}
            data = {datos}                      
            columns = {columns}                 
            />
    )
} 
export default Capturas;

}

0 个答案:

没有答案