如何将外部数据添加到material-table中的表数据

Question

我想将这一行添加到material-table中作为默认数据。在我的代码中，我已经有data={tableData}在材料表作为数据被添加到表的形式。
下面是我要添加的行

<Row>
<Col lg={6}>
<TextField
label='Borrower/Applicant Name'
variant='standard'
color='warning'
name='borrower_Applicant'
className='mb-3'
onChange={(e) => setBorrower_Applicant(e.target.value)}
value={borrower_Applicant}
disabled={isView || borrower_Applicant?.length > 0}
/>
{error && error?.borrower_Applicant && ( <span style={{color: "#da251e", width: "100%", textAlign: "start", }}>
{error.borrower_Applicant}
</span>
)}
</Col>
<Col lg={6}>
<TextField
label='lenders'
variant='standard'
color='warning'
name='lenders'
className='mb-3'
onChange={(e) => setLenders(e.target.value)}
value={lenders}
disabled={isView || borrower_Applicant?.length > 0}
/>
{error && error?.lenders && (<span style={{ color: "#da251e", width: "100%", textAlign: "start"}}>{error.lenders}</span> )}
</Col>
</Row>

**下面是我的材料表。我想找到一种方法来插入上面的行显示在表中。* *

<MaterialTable
title=""
columns={[
{ title: 'Name', field: 'name.label' },
{ title: 'Label', field: 'type.label' },
]}
data={tableData}
actions={isView ? [{
icon: 'preview',
tooltip: 'View Product',
onClick: (event, rowData) => { setShowEditModal(!showEditModal); setRowEditData(rowData); setView(isView) }
}] : [
{
icon: 'edit',
tooltip: 'Edit Product',
onClick: (event, rowData) => { setRowEditData(rowData); setShowEditModal(!showEditModal); console.log('rowData ==', rowData) }
},
{
icon: 'preview',
tooltip: 'View Product',
onClick: (event, rowData) => { setShowEditModal(!showEditModal); setRowEditData(rowData) }
}
]}
options={{
filtering: true,
actionsColumnIndex: -1,
sorting: true,
pageSize: 10,
search: false,
emptyRowsWhenPaging: false,
}}
/>

Answer 1

我如何解决这个问题是通过在他们的材料表文档中通过材料表自定义渲染。在material-table中有一个渲染属性，可以让你覆盖任何列的渲染。

在我的例子中，我想呈现一个无法编辑的默认表。我是这样做的

<MaterialTable
title=""
columns={[
{ title: 'Name', field: 'name.label' },
{ title: 'Label', field: 'type.label' },
{ title: 'Borrower/Applicant', render: rowData =>  
<Row>
<Col lg={12} className="mb-4">
<TextField
label='Borrower/Applicant Name'
variant='standard'
color='warning'
name='borrower_Applicant'

// onChange={(e) => setBorrower_Applicant(e.target.value)}
value={getBorrower}
disabled={true}
/>
</Col>
</Row>},
{ title: 'Lender', render: rowData =>  
<Row>
<Col lg={12} className="mb-4">
<TextField
label='Lenders'
variant='standard'
color='warning'
name='lenders'

// onChange={(e) => setLenders(e.target.value)}
value={getLender}
disabled={true}
/>
</Col>
</Row>},


]}
data={tableData}
actions={isView ? [{
icon: 'preview',
tooltip: 'View Product',
onClick: (event, rowData) => { setShowEditModal(!showEditModal); setRowEditData(rowData); setView(isView) }
}] : [
{
icon: 'edit',
tooltip: 'Edit Product',
onClick: (event, rowData) => { setRowEditData(rowData); setShowEditModal(!showEditModal); console.log('rowData ==', rowData) }
},
{
icon: 'preview',
tooltip: 'View Product',
onClick: (event, rowData) => { setShowEditModal(!showEditModal); setRowEditData(rowData) }
}
]}
options={{
filtering: true,
actionsColumnIndex: -1,
sorting: true,
pageSize: 10,
search: false,
emptyRowsWhenPaging: false,
}}
/>