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

Question

我是 MERN 的新手，如有任何帮助，我们将不胜感激。我正在尝试创建一个股票应用程序。我已经使用 axios 检索了数据，并使用 Material-Table.

将其显示在 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

但是现在，我希望能够将我 select 的任何公司的行数据保存到 mongoDb 数据库中，并且应该能够查看我 [=23] 的所有公司=]ed.

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

中的数据一起添加

Answer 1

根据 Material-Table documentation，<MaterialTable> 组件存在 onClick 操作属性：

onClick: This event will be fired when the button is clicked. Parameters are event and row or rows

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

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

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

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

Adding Custom columns in React Material-table

mongodb

reactjs

material-ui

react-hooks

material-table