Блог

Как я могу добавить данные в свою таблицу материалов из массива?

У меня есть следующая таблица:

 <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
            }
        })
    }
/>
 

попробуйте это-

 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