How do you eliminate row highlighting on the <TableRow> component within Material-UI's <Table> using ReactJS?

I am facing an issue with a table and row highlighting in my code. Even after clicking on a row, it remains highlighted. I attempted to use the 

<TableRow disableTouchRipple={true}>
but it didn't work as expected. What can I do to remove the highlight once the row has been clicked?

Below is the snippet of code causing the problem:


    <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>
javascriptcssreactjsmaterial-ui

Answer №1

To customize the appearance of a table, you can define a specific "className" for the table or its rows and then make the background-color of the cells 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 CustomTable 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()}>
    <CustomTable />
  </MuiThemeProvider>
);

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

Check out the example on https://jsfiddle.net/mzt8pvtu/1/

Answer №2

To start off, the first step is to install Jquery.

Use the command npm install jquery --save

Next, you need to import it into your component file.

import $ from 'jquery';

In order to target a specific table row based on its ID, follow this format:

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

If you need to delete a row, create a function like this:

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

Answer №3

To prevent highlighting, utilize the selectable attribute in this manner:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Error: The functionality of finding places on Google Maps is not

I've encountered an issue while trying to integrate Google Maps into my Node application. The map is loading correctly and I'm able to retrieve my location. However, I am facing a problem with implementing the Google Places API code to allow user ...

javascriptangularjsnode.js

Utilizing JQuery to request a file input and subsequently handle its processing

I am working towards creating a functionality where users can click a button, select a file, and have the program perform actions on that file, such as sending it through an AJAX request for processing. Currently, I have set up a hidden form along with a b ...

javascriptjquery

The ESLint tool seems to be struggling to detect the package named "@typescript-eslint/eslint-plugin"

Struggling with getting ESLint to function properly on a new Angular project in VS Code. The error message I keep encountering is about failing to load "@typescript-eslint/eslint-plugin". After spending the past 3 hours troubleshooting, I have searched hig ...

javascriptangulartypescriptvisual-studio-codetypescript-eslint

PHP array manipulation to filter specific elements

In my code, I am using a foreach loop to reorganize data based on location and appointment dates/times: $temp = []; $remappedData=[]; $intCurrentIndex = -1; foreach ($result as $value) { if(isset($temp[$value['Location']] ...

phparraysreactjsforeach

Guide on adding data from Express.js and Node.js to a database

I'm dealing with a code that involves image uploads and handling input text. I am facing an issue in inserting these values into the mysql database. The problem arises when trying to insert multiple values into the database; however, I can successfull ...

javascriptmysqlnode.jsexpress

How to handle a Node.js promise that times out if execution is not finished within a specified timeframe

return await new Promise(function (resolve, reject) { //some work goes here resolve(true) }); Using Delayed Timeout return await new Promise(function (resolve, reject) { //some work goes here setTimeout(function() { resolve(true); }, 5000); } ...

javascriptnode.jstypescriptpromise

Responsive Bar Chart using jQuery Mobile and ChartJS that appears on the screen only after resizing

I have been experimenting with adding a responsive bar chart using Chart.js in one of my JQM projects. Here is what I have accomplished so far: http://jsfiddle.net/mauriciorcruz/1pajh3zb/3/ The Chart needs to be displayed on Page Two and it should be res ...

javascriptjqueryjquery-mobilecharts

Tips for modifying a particular element within a class?

I am seeking guidance on how to modify a specific class attribute in CSS/JS/JQuery when hovering over a different element. Here is an example: <h1 class="result">Lorium</h1> <h1 class="result">Ipsum</h1> <h1 class="result">Do ...

javascriptjqueryhtmlcss

URL not functioning properly on Django CMS menu

After setting up django-cms and creating a collapsible menu with categories and subcategories, I encountered an issue. When clicking on a main category, the URL appears correct but it does not navigate to the corresponding page. Main categories without chi ...

javascriptdjangomenudjango-cms

Utilizing HTML data retrieved from an ajax request

I am utilizing a load more button to display content fetched from a database via ajax. Here is how the ajax call is structured: // JavaScript Document // Function to load more builds $(document).ready(function(){ var pageIndex = 1; $('#loadmorebuild ...

javascriptjqueryhtmlajaxjson

React Native is having issues with text cutting off during rendering

I have been developing an app using React Native, and everything seems to work fine on most devices. However, I have noticed that on some Honor and Samsung devices, the text is getting cut off suddenly. How can I address this issue? Here's an exampl ...

androidreactjsreact-nativetext

Steps to successfully set up a React application without encountering any installation errors

Hey everyone, I've been trying to install React on my system for the past two days but keep encountering errors. Initially, I used the commands below to install the React app and it worked smoothly: 1. npm install -g create-react-app 2. create-react- ...

javascriptnode.jsreactjsreact-nativenpm

"Implementing a click event handler on a button within an iframe

On my website, I have embedded an iframe containing external content. Within the code of this iframe is a button identified by the id "XYZ." I want to create an onclick function for this button. Here's what I've attempted: $( "#XYZ" ).click(fun ...

javascriptjqueryiframeonclick

Personalized path-finding tree iterator

I am trying to implement a custom iterator in JavaScript that can traverse a DOM tree based on specific criteria provided by a callback function. The goal is to return an array of the nodes that match the criteria as the generator iterates through the tree ...

javascripttypescriptiteratorgenerator

The production build of Angular 2 with special effects amplification

I am currently working on an Angular 2 Beta 8 app that I need to bundle and minify for production deployment. Despite configuring the system to generate a Single File eXecutable (SFX) bundle, I am encountering issues with creating a minified version of the ...

javascriptangularbundling-and-minificationsystemjses6-module-loader

A guide on integrating a timeline reference using the @prismicio/client library in your Next.js/React application

I am currently utilizing the @prismicio/client library to retrieve data from Prismic within my Next.js application. However, I am facing difficulty connecting the preview mode and preview reference it offers to the client.query call for fetching data relat ...

reactjsnext.jsprismic.io

React Axios POST request causing Express session cookie not to be set

My Current Development Setup I have set up a frontend environment using create-react-app. Within this environment, I utilize Axios to send a POST request to the /login endpoint on my Node.js Express Backend Server. I have configured sessions middleware us ...

reactjsexpresscookiesredisaxios

Express.js encountering an `ERR_HTTP_HEADERS_SENT` issue with a fresh Mongoose Schema

My Objective Is If data is found using the findOne() function, update the current endpoint with new content. If no data is found, create a new element with the Schema. Issue If there is no data in the database, then the first if statement throws an ERR_H ...

javascriptnode.jsexpressmongoosenosql

Vue.js encountered an error while trying to load the component: either the template or render function is not

Currently I am delving into the realm of Vue.js paired with Laravel by following this series, where the narrator seems to breeze through without encountering any errors. Unfortunately, when I attempted to change the route, a pesky error made an appearance. ...

javascriptlaravelvue.js

Validating object keys

I am dealing with an array of objects and I need to find a way to pass multiple keys in the function checkArray to validate these keys within each object. var test = [ { // Object details here... }, { // Another object details here... } ...

javascriptjson