如何在材料表中创建onHover操作? [英] How do I create an onHover action in material-table?

问题描述

我正在使用

我认为关键是重写Row组件以获取对onMouseEnter和onMouseLeave事件的访问权限:

  components = {{行:props =>{返回 (< MTableBodyRow{...道具}onMouseEnter = {e =>handleRowHover(e，props)}onMouseLeave = {e =>handleRowHoverLeave(e，props)}/>);}}} 

还可以像这样设置 rowStyle 选项:

  rowStyle:rowData =>({背景颜色:rowData.tableData.id === hoveringOver?#0471ff":"}) 

这是完整的示例代码:

 从"react"导入React，{片段，useState}；从"material-table"导入MaterialTable {MTableBodyRow}；导出默认功能CustomEditComponent(props){const [hoveringOver，setHoveringOver] = useState("));const tableColumns = [{标题:客户"，字段:客户"，宽度:"40％"}，{标题:名称"，字段:名称"，宽度:"40％"；}，{title:"Year"，字段:"year"，宽度:"20％"}];const tableData = [{客户:"client1"，名称:"Mary"，年:"2019"}，{客户:"client2"，名称:"Joe"，年:"2018"}，{客户:"client3"，名称:"Kal"，年:"2019"}，{客户:"client4"，名称:"Dal"，年:"2012"}];const handleRowHover =(event，propsData)=>setHoveringOver(propsData.index);const handleRowHoverLeave =(event，propsData)=>setHoveringOver(")；返回 (<片段><材料表列= {tableColumns}数据= {tableData}title=材料表样本"；选项= {{tableLayout:固定"，搜索:错误，rowStyle:rowData =>({背景颜色:rowData.tableData.id === hoveringOver?#0471ff":"})}}组件= {{行:props =>{返回 (< MTableBodyRow{...道具}onMouseEnter = {e =>handleRowHover(e, props)}onMouseLeave = {e =>handleRowHoverLeave(e, props)}/>);}}}/></片段>);} 

这是沙盒.我希望这对您有用！

I am working with material-table and trying to implement a highlight to the row I am currently hovering over.

The documentation only provide a color change on a onRowClick action in the 3rd example:

function SelectedRowStyling() {
  const { useState } = React;
  const [selectedRow, setSelectedRow] = useState(null);
  
  return (
    <MaterialTable
      title="Selected Row Styling Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}
      onRowClick={((evt, selectedRow) => setSelectedRow(selectedRow.tableData.id))}
      options={{
        rowStyle: rowData => ({
          backgroundColor: (selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
        })
      }}
    />
  )
}

I read the available props in the source code and did not found anything like onRowHover. Tried some ThemeProvider solutions but did not manage to make it work, how could I implement the color change with the hover action?

解决方案

I made the following example using the approach provided here enter link description here and enter link description here

I think the key is to overwritte Row component to gain access to onMouseEnter and onMouseLeave events:

components={{
      Row: props => {
        return (
          <MTableBodyRow
            {...props}
            onMouseEnter={e => handleRowHover(e, props)}
            onMouseLeave={e => handleRowHoverLeave(e, props)}
          />
        );
      }
    }}

Also setting rowStyle option like this:

rowStyle: rowData => ({
        backgroundColor:
          rowData.tableData.id === hoveringOver ? "#0471ff" : ""
      })

Here is the complete sample code:

    import React, { Fragment, useState } from "react";
import MaterialTable, { MTableBodyRow } from "material-table";

export default function CustomEditComponent(props) {
const [hoveringOver, setHoveringOver] = useState("");

const tableColumns = [
    { title: "Client", field: "client", width: "40%" },
    { title: "Name", field: "name", width: "40%" },
    { title: "Year", field: "year", width: "20%" }
];

const tableData = [
    {
    client: "client1",
    name: "Mary",
    year: "2019"
    },
    {
    client: "client2",
    name: "Joe",
    year: "2018"
    },
    {
    client: "client3",
    name: "Kal",
    year: "2019"
    },
    {
    client: "client4",
    name: "Dal",
    year: "2012"
    }
];

const handleRowHover = (event, propsData) => setHoveringOver(propsData.index);

const handleRowHoverLeave = (event, propsData) => setHoveringOver("");

return (
    <Fragment>
    <MaterialTable
        columns={tableColumns}
        data={tableData}
        title="Material Table sample"
        options={{
        tableLayout: "fixed",
        search: false,
        rowStyle: rowData => ({
            backgroundColor:
            rowData.tableData.id === hoveringOver ? "#0471ff" : ""
        })
        }}
        components={{
        Row: props => {
            return (
            <MTableBodyRow
                {...props}
                onMouseEnter={e => handleRowHover(e, props)}
                onMouseLeave={e => handleRowHoverLeave(e, props)}
            />
            );
        }
        }}
    />
    </Fragment>
);
}

Here is the sandbox. I hope this works for you!

这篇关于如何在材料表中创建onHover操作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！