reactjs - 对 MaterialTable 的常规反应表

Question

如何从数组中将数据添加到材料表中？

我有下表：

<table className="table">
    <thead>
        <tr>
            <th>Text1</th>
            <th>Text2</th>
            <th>text3 Comb</th>
        </tr>
    </thead>
    <tbody>
        {arr.map((values, index) => {
            const textComb = `${values.text1}, ${values.text2}`;
            return (
                <tr key={index}>
                    <td>{values.text1}</td>
                    <td>{values.text2}</td>
                    <td>{textComb}</td>
                    <td></td>
                </tr>
            )
        })}
    </tbody>
</table>

我有太多数据，所以我尝试使用 MaterialTable 来进行搜索、排序和分页选项。

<MaterialTable
    columns={[
        {title: 'Text1', field: 'text1'},
        {title: 'Text2', field: 'text2'},
        {title: 'Text3', field: 'text3'}
    ]}
    data={
        arr((values, index) => {
            {
               // I'm confused here
            }
        })
    }
/>

标签： reactjsmaterial-table

Answer 1

尝试这个-

const createData = item => ({
    text1: item.text1,
    text2: item.text2,
    text3: `${item.text1}, ${item.text2}`
});

const data = arr.map(item => createData(item));

在此处查看演示 - https://codesandbox.io/s/material-table-example-5cohx?file=/src/App.js