CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
user6898719
user6898719

Reputation:

ReactJS: How to remove row highlight on <TableRow> of Material-UI's <Table>?

I have a <Table/> and <TableRow> within, and upon clicking on the row, the row stays highlighted. I tried <TableRow disableTouchRipple={true}>, but no luck. How can I remove this highlight even though it has been clicked on?

Here is the code:

    <Table>
      <TableBody displayRowCheckbox={false}>
        <TableRow>
          <TableRowColumn>Row 1</TableRowColumn>
          <TableRowColumn>Content 1</TableRowColumn>
        </TableRow>
        <TableRow>
          <TableRowColumn>Row 2</TableRowColumn>
          <TableRowColumn>Content 2</TableRowColumn>
        </TableRow>
      </TableBody>
    </Table>

Upvotes: 1

Views: 4272

Answers (3)

Raj Jaril
Raj Jaril

Reputation: 376

First you have to install Jquery.

npm install jquery --save

then you define import in component.

import $ from 'jquery';

Identify table row with ID like this:

<TableRow id={data.bookingNumber} key={data.bookingNumber}>

For remove the row, you can define function.

handleAllowDeleteBooking() {
      const { removeBooking, fetchBookingHistory, params, fetchBookingHistoryStore } = this.props      
      this.setState({
        showDeleteDailog: false
      })
      removeBooking(this.state.bookingId)
      $('#' + this.state.bookingId).remove()
    }

Upvotes: 1

Fabian Schultz
Fabian Schultz

Reputation: 18546

Use the selectable prop to disable the highlighting like so:

<Table selectable={false}>
  <TableBody displayRowCheckbox={false}>
    <TableRow>
      <TableRowColumn>Row 1</TableRowColumn>
      <TableRowColumn>Content 1</TableRowColumn>
    </TableRow>
    <TableRow>
      <TableRowColumn>Row 2</TableRowColumn>
      <TableRowColumn>Content 2</TableRowColumn>
    </TableRow>
  </TableBody>
</Table>

Upvotes: 0

Jeff McCloud
Jeff McCloud

Reputation: 5927

You can set the "className" on the table (or its rows), and then set the background-color of the tables' cells to transparent...

.table-no-highlight td {
  background-color: transparent !important;
}

<div id="container"></div>

const { Table, TableHeader, TableBody, TableRow, RaisedButton, TableRowColumn, TableHeaderColumn, MuiThemeProvider, getMuiTheme } = MaterialUI;

 class Example extends React.Component {
  render() {
    return (
      <Table className="table-no-highlight">
        <TableHeader>
          <TableRow>
            <TableHeaderColumn>ID</TableHeaderColumn>
            <TableHeaderColumn>Name</TableHeaderColumn>
            <TableHeaderColumn>Status</TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableRowColumn>1</TableRowColumn>
            <TableRowColumn>John Smith</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>2</TableRowColumn>
            <TableRowColumn>Randal White</TableRowColumn>
            <TableRowColumn>Unemployed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>3</TableRowColumn>
            <TableRowColumn>Stephanie Sanders</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>4</TableRowColumn>
            <TableRowColumn>Steve Brown</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
        </TableBody>
      </Table>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

See example at https://jsfiddle.net/mzt8pvtu/1/

Upvotes: 1

Related Questions