材料表使可點擊

Question

我正在使用材料表從一系列產品中創建一個表。 https://material-table.com/#/docs/all-props

這是我當前的代碼。

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

目標是能夠單擊表格中的一行並將其鏈接到單個產品。 產品go的URL結構如下： mysite.com/product/id 。 （ id是在{ title: 'ID', field: 'id' }中顯示的那個）

我確實注意到他們有一個道具onRowClick和這個例子在這里https://github.com/mbrn/material-table/issues/820 。 但是產生了太多錯誤。

目標是：

• 使每一行鏈接到它們各自的 URL 頁面並將 CSS class 添加到 ZE0542F579DF8E8132ZADE 行。

謝謝您的幫助。

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