Question

我正在使用物料表从一系列产品中创建一个表。 https://material-table.com/#/docs/all-props

这是我当前的代码。

weeknum

目标是能够单击表中的一行并将其链接到单个产品。产品的URL结构如下：<MaterialTable title="" style={{boxShadow: "none"}} columns={[ { title: 'Title', field: 'ProductTitle' }, { title: 'Status', field: 'Status' }, { title: 'Email', field: 'BuyerEmail' }, { title: 'ID', field: 'id' }, ]} data={this.state.ProductList} options={{ filtering: true, rowStyle: (data, index) => { if (index % 2) { return {backgroundColor: "#F8F9FC"} } } }} />。（mysite.com/product/id是在id中显示的那个）

我确实注意到他们有一个道具{ title: 'ID', field: 'id' }，这里的例子是https://github.com/mbrn/material-table/issues/820。但是产生了太多的错误。

目标是：

使每一行链接到各自的URL页面，并将CSS类添加到悬停行。

感谢您的帮助。

Answer 1

您尝试过吗？

      <MaterialTable
        onRowClick={(event, rowData) => {
          // Get your id from rowData and use with link.
          window.open(`mysite.com/product/${rowData.id}`, "_blank")
          event.stopPropagation();
        }}
      ...

在这里检查-https://codesandbox.io/s/material-table-selection-different-data-from-table-txl39?file=/src/index.js

物料表可点击

1 个答案: