单击 material-table 中的某个字段获取行数据
Grab row data onclick of a field in material-table
import MaterialTable from "material-table";
import ShipmentContext from "../context/ShipmentContext";
const ItemsTable: React.FC = () => {
const shipmentcontext = useContext(ShipmentContext);
const { filtered } = shipmentcontext.State;
return (
<>
<div style={{ width: "100%", overflowY: "hidden" }}>
<MaterialTable
options={{
search: false,
showTitle: false,
toolbar: false,
paging: false,
padding: "dense",
maxBodyHeight: "400px",
minBodyHeight:"400px",
paginationType: "stepped",
tableLayout: "fixed"
}}
columns={[
{ title: "AWB NUMBER", field: "awbno" ,},
{ title: "TRANSPORTER", field: "carrier" },
{ title: "SOURCE", field: "from" },
{ title: "DESTINATION", field: "to" },
{ title: "BRAND", field: "carrier" },
{ title: "START DATE", field: "pickup_date" },
{ title: "ETD", field: "" },
{
title: "STATUS",
field: "current_status",
cellStyle: {
color: "green",
},
},
]}
data={filtered}
/>
</div>
</>
);
};
export default ItemsTable;
我想收集我单击的字段的数据 row.As 这里的数据是动态的 我无法创建 onClick 方法来获取在行中单击的对象。
我的 table 看起来像这样:
table
我想要一个 onClick 方法,当我点击任何 AWB 号码时,它会抓取它的数据
您可以使用自定义 render
函数来添加自定义 onClick 处理程序,如下所示:
columns={[
{ title: "AWB NUMBER", field: "awbno" , render: row => <div onClick={() => console.log(row.awbno)}>{row.awbno}</div>}, // This will be called if this cell is clicked
{ title: "TRANSPORTER", field: "carrier" },
{ title: "SOURCE", field: "from" },
{ title: "DESTINATION", field: "to" },
{ title: "BRAND", field: "carrier" },
{ title: "START DATE", field: "pickup_date" },
{ title: "ETD", field: "" },
{
title: "STATUS",
field: "current_status",
cellStyle: {
color: "green",
},
},
]}
```
import MaterialTable from "material-table";
import ShipmentContext from "../context/ShipmentContext";
const ItemsTable: React.FC = () => {
const shipmentcontext = useContext(ShipmentContext);
const { filtered } = shipmentcontext.State;
return (
<>
<div style={{ width: "100%", overflowY: "hidden" }}>
<MaterialTable
options={{
search: false,
showTitle: false,
toolbar: false,
paging: false,
padding: "dense",
maxBodyHeight: "400px",
minBodyHeight:"400px",
paginationType: "stepped",
tableLayout: "fixed"
}}
columns={[
{ title: "AWB NUMBER", field: "awbno" ,},
{ title: "TRANSPORTER", field: "carrier" },
{ title: "SOURCE", field: "from" },
{ title: "DESTINATION", field: "to" },
{ title: "BRAND", field: "carrier" },
{ title: "START DATE", field: "pickup_date" },
{ title: "ETD", field: "" },
{
title: "STATUS",
field: "current_status",
cellStyle: {
color: "green",
},
},
]}
data={filtered}
/>
</div>
</>
);
};
export default ItemsTable;
我想收集我单击的字段的数据 row.As 这里的数据是动态的 我无法创建 onClick 方法来获取在行中单击的对象。
我的 table 看起来像这样:
table
我想要一个 onClick 方法,当我点击任何 AWB 号码时,它会抓取它的数据
您可以使用自定义 render
函数来添加自定义 onClick 处理程序,如下所示:
columns={[
{ title: "AWB NUMBER", field: "awbno" , render: row => <div onClick={() => console.log(row.awbno)}>{row.awbno}</div>}, // This will be called if this cell is clicked
{ title: "TRANSPORTER", field: "carrier" },
{ title: "SOURCE", field: "from" },
{ title: "DESTINATION", field: "to" },
{ title: "BRAND", field: "carrier" },
{ title: "START DATE", field: "pickup_date" },
{ title: "ETD", field: "" },
{
title: "STATUS",
field: "current_status",
cellStyle: {
color: "green",
},
},
]}
```