1

我正在使用反应固定数据表。

  <Table
                rowHeight={50}
                rowsCount={rows.length}
                width={800}
                height={300}
                headerHeight={50}>
                <Column
                    header={<Cell>Name</Cell>}
                    cell={({ rowIndex}) => (
                        <Cell>
                            {rows[rowIndex].userId}
                        </Cell>
                        ) }
                    width={200}
                />
                <Column
                    header={<Cell>Description</Cell>}
                    cell={({ rowIndex }) => (
                        <Cell >
                            {rows[rowIndex].description}
                        </Cell>
                        ) }
                    width={200}
                />

目前它将标题名称作为名称（静态），对于单元格值，我需要给出列名。

我已经写了根据 json 响应显示动态标题和行值。

    renderTableHeader() {
    if(this.state.data !== 'undefined' && this.state.data !==null && this.state.data.length >0)
    {
    let header = Object.keys(this.state.data[0])
    return header.map((key, index) => {
       return <th key={index}>{key.toUpperCase()}</th>
    })
    }
 }

 renderTableData() {
    return this.state.data.map((student, index) => {
       let col = Object.keys(student)
       return (
          <tr key={student.id}>
             {col.map((val, index) => {
                return <td key={index}>{student[col[index]]}</td>
             })}
          </tr>
       )
    })
 }

但不知道如何给这里。

     <Column
                header={<Cell>Name</Cell>}
                cell={({ rowIndex}) => (
                    <Cell>
                        {rows[rowIndex].userId}
                    </Cell>
                    ) }
                width={200}
            />

另外我想根据我的 json 响应给出过滤器选项，而不是硬编码。

   class Record extends React.Component {

constructor(props){
    super(props);
    this.state = {
        data: [],
        selectTableOptions : [],
    }
    this.handleTableChange = this.handleTableChange.bind(this);
    //All these fields i want come as json response
    this.options = [
        {
            columnField: "Name",
            type:"text"
        },
        {
            columnField: "description",
            type:"text"
        },
        {
            columnField: "Status",
            type:"selection"
        },
        {
            columnText: "Email @",
            columnField: "Email",
            type:"text"
        }
    ];

    this.customAutoComplete = new CustomAutoComplete(this.state.data,this.options);
}
4

0 回答 0