在 React Material-table 中添加自定义列

Question

我是 MERN 的新手，因此我们将不胜感激。我正在尝试创建一个股票应用程序。 我已经使用 axios 检索数据并使用 Material-Table 将其显示在表格中。

    import React, {useState, useEffect} from 'react'
    import MaterialTable from 'material-table'
    import axios from "axios";
    
    const DataTable = () => {
      const [tableData, setTableData] = useState([]);
      const columns = [
        {title: 'NAME', field: 'name', width: 200},
        {title: 'SYMBOL', field: 'symbol', width: 200},
        {title: 'MARKET CAP', field: 'market_cap', width: 200},
        {title: 'CURRENT PRICE', field: 'price', width: 200}
      
      ]
      useEffect(() => {
            axios
              .get(
                "https://api.nomics.com/v1/currencies/ticker?key=xyz&interval=1d,30d&convert=USD&per-page=100"`
              )
              .then((res) => {
                console.log(res);
                setTableData(res.data);
              })
          }, []);
    
      return (
          <div>
              <div >
          <MaterialTable style={{height: 400, width: '70%', left: '14%', top: 100}}
            data={tableData}
            columns={columns}
            title={"Stock Details Table"}
            options={{
          search: true
          
        }}
            
          />
        </div>
          </div>
        
      )
    }
    
    export default DataTable

但是现在，我希望能够将我选择的任何公司的行数据保存到 mongoDb 数据库中，并且应该能够查看我选择的所有公司。

我的问题是，我如何添加一个单独的列，其中包含每个公司的按钮，以使我能够将行数据添加到我的 mongodb 数据库中。我不知道如何将自定义数据与来自 api 的数据一起添加。

Answer 1

根据材料表documentation，<MaterialTable> 组件存在一个onClick 操作属性：

onClick：单击按钮时将触发此事件。参数为event和row或rows

因此，您需要将一个函数传递给onClick 属性。 此函数将获取行详细信息，以便您可以通过另一个 API 调用将其发布到服务器。

const handleSelectedRow = (event, row) => {
  // console.log(row) to see the data and choose your require to send with API calling
  axios.post("/saveMySelection", row).then(() => {}).catch(() => {}) // don't forget to use then and catch method with proper actions
}


<MaterialTable style={{height: 400, width: '70%', left: '14%', top: 100}}
  data={tableData}
  columns={columns}
  title={"Stock Details Table"}
  options={{
    search: true      
  }}
  actions={[
    {
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) => hadnleSelectedRow
    }
  ]}
/>

您还可以在我之前提到的文档链接上查看工作版本的第一个示例。