我可以讓 Material-Table 列呈現這樣的數據嗎？

Question

我正在使用標准的材料表。 我想呈現如下圖所示的列status 。 我可以使用 ANT Design 來執行此操作，但 Material-Table 需要更少的代碼來進行搜索和過濾。

這是我的表的一個非常簡單的示例。 我正在使用一些options來設置標題顏色、字體等。我還使用rowStyle在每一行上交替顏色。

const [intakes, setIntakes] = useState([]);
const columns = [
        { title: "Status", field: "Status" },
    ];

function Table() {
  return (
    <MaterialTable data={intakes.intakes} columns={columns} />
  );
}

Answer 1

在您的列定義中，您將需要使用列對象的渲染屬性。 一個類似的問題是here

代碼示例：

<MaterialTable       
    columns={[
      { title: "Name", field: "name" },
      { title: "Surname", field: "surname" },
      { title: "Id", field: "tableData.id" },
      { title: "Id+1", render: rowData => rowData.tableData.id + 1 },
    ]}/>

這是這里的重要部分：

render: rowData => rowData.tableData.id + 1

使用 rowData，您可以在此處使用示例中的 id 以外的特定字段調用函數（假設

render: rowData => generateFlagText(rowData.tableData.Status)

你的函數應該返回一些帶有類名的 div 來顯示這些狀態