Tips for customizing the appearance of a React-Table header when sorting data

How can I change the header's background color in react-table based on a selected item? For example, if I click on ID, the ID header should change its background color to red.

I have tried various methods to update the background color upon selection.

Custom CSS

.ReactTable .rt-th  {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 7px 5px;
    overflow: hidden;
    transition: 0.3s ease;
    transition-property: width, min-width, padding, opacity;
    background: green;
  }

https://i.stack.imgur.com/JqStT.gif

javascriptcssreactjsreact-table

Answer №1

I concur with the previous statement regarding using state to toggle the className. Here is a simple example consisting of JavaScript, CSS, and HTML. The isActive property is initially set to false and changes its value when the handleClick method is triggered.

class App extends React.Component {

constructor (props) {
super (props);
    this.state = { isActive:false }
this.handleClick = this.handleClick.bind(this);
}

handleClick () {
this.state.isActive ? this.setState({ isActive: false }) : this.setState({ 
isActive: true })
}

render() {
return <div>
  <div onClick={this.handleClick} className = { this.state.isActive ? "red" : "green"} > Background Color </div>
</div>;
}}

React.render(<App />, document.getElementById('app'));

The CSS styling is relatively simple:

.red 
background-color: red 

.green 
background-color: green

As for the HTML markup:

<div id="app"></div>

Answer №2

Is it possible to activate the state and then evaluate the condition during component rendering?

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

Perform a jQuery AJAX GET request while passing the current session information

Is it possible to retrieve the HTML content of another webpage using jQuery, particularly when that page is already signed in? In simpler terms, can we use $.get() to fetch a different page on the same website and transfer the PHP/Javascript cookies with ...

phpjavascriptjqueryget

What are some javascript libraries that can be used to develop a mobile image gallery for both Android and iPhone

I currently have the touch gallery system in place, but unfortunately it isn't functioning properly on Android devices. ...

javascriptiphoneandroidgallery

Creating a sitemap.xml using react-router-sitemap and including only the URL

I have been attempting to utilize react-router-sitemap to create a sitemap.xml for our website. However, the generated output file only displays the URL without including any of the routes. Output file - <?xml version="1.0" encoding="UTF ...

reactjsreact-routerreact-router-dom

Tips for retrieving element height using Vue.js

I am attempting to retrieve the offsetHeight of an element but I keep getting undefined. When I use this code, it returns an HTML collection and everything works correctly: document.getElementsByClassName("plyr--full-ui"); However, when I add .offsetHei ...

javascriptvue.jsnuxt.jsoffsetheight

The map functionality within the TextField component is invalid when being used within the material-ui component

The issue arises with the map function in TextField when it is located within a component from material-ui library. I have two TextFields, where the radio button functionality works in the first one but not in the second. How can I ensure that the radio b ...

reactjsmaterial-ui

What is the appropriate way to notify Gulp when a task has been completed?

I have been working on developing a gulp plugin that counts the number of files in the stream. Taking inspiration from a helpful thread on Stack Overflow (source), I started implementing the following code: function count() { var count = 0; function ...

javascriptnode.jsgulpnode-modules

Move the items downwards to occupy any empty space vertically

Just a quick overview of the code I'm working with (I am using Material UI in React). This container is meant to hold chat messages exclusively. const ChatContainer = ({ chatMessages }) => { const classes = useStyles(); return ( <Paper ...

javascriptcssreactjsmaterial-ui

Using a JavaScript function, transmit information through an Express response

I am working on sending an application/javascript response from my Express server, utilizing data retrieved from MongoDB. This response is intended for loading content on a third party website. All components of the process have been developed, and now I ...

javascriptnode.jsexpress

Exploring the possibilities of using AngularJS for AJAX functionality in a Ruby On Rails

I recently started learning AngularJS and Rails, and I attempted to develop a Rails application incorporating AngularJS. Currently, I am looking to make a POST request to send data and insert it into the database. In the Activity Controller: def create ...

javascriptruby-on-railsangularjsrubyajax

Tips for positioning a label at the top of a table row in an asp.net C# application

I am facing an alignment issue in my asp.net page with a table that contains a label and a textbox. Despite trying various methods, the label consistently displays at the bottom of the row. How can I ensure that the label is aligned to either the center or ...

c#htmlcssasp.netcode-behind

Experience the dynamic expansion of a droppable div as you elegantly drop an element within

When the questions "question1" and "question2" are dragged into "questionslots," I want the "questionSlots" div to expand its size dynamically when the second question is dropped into it. This means that both questions should be accommodated and visible wi ...

jqueryhtmlcssjquery-uidraggable

Burger menu floating above container block element

I have set up a bootstrap container with the following styling: .container { margin-top: 12em; font-family: 'Amatic SC', cursive; border-bottom: 1px solid; border-color: #800000; } The purpose behind this is to have my navigatio ...

csscss-float

Make the adjustment from an H1 tag to an H2 tag with the help of

I need assistance with changing the HTML code from using an <h1> tag to a <h3> tag, using Vanilla JavaScript. Here is the code snippet in question: <h1 class="price-heading ult-responsive cust-headformat" data-ultimate-target=" ...

javascripthtml

Issue with BrowserRouter, improperly looping through the array using map

Encountering an issue with importing content in my React app project using <BrowserRouter>. Within the app, there are 3 Material-UI Tabs: /lights, /animations, /settings. <Switch> <Route path="/lights" component={LightsMenu} /> ...

javascriptreactjsmaterial-ui

Ways to avoid slider label overlap issues in Material UI?

https://i.stack.imgur.com/UBT3U.png I am using a slider in MUI to display the current percentage fetched from an API with an emoji, but when it reaches close to 75%, the labels overlap on mobile devices. Is there a way to move just the emoji label above t ...

reactjsuser-interfacematerial-uislider

Troubleshooting: Why the TableTools basic usage example is not functioning as

After replicating the code from http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html in my Visual Studio project, I organized the files by saving two css files as style1.css and style2.css, along with three js files named sc ...

javascripthtmlcsstabletools

Node polyfills are essential for AWS SDK Javascript v3 compatibility

I'm currently working on integrating AWS Translate into my React application and I've encountered a roadblock with the Node polyfills. I am unsure if the AWS SDK is meant solely for use with Node.js or if I need to install multiple polyfills. The ...

reactjsamazon-web-servicesaws-sdkaws-sdk-js

What is the most efficient way to evenly separate a CSS3 gradient?

Is there anyone who can assist me in achieving an even gradient break? body { height: 2500px; background: -webkit-linear-gradient(#000000 1%,#FFFFFF 1%,#FFFFFF 13%,#2ecc71 13%,#2ecc71 30%,#3498db 30%,#000000,#FFFFFF,#34495e); } I've been att ...

htmlcss

Various gulp origins and destinations

I am attempting to create the following directory structure -- src |__ app |__ x.ts |__ test |__ y.ts -- build |__ app |__ js |__ test |__ js My goal is to have my generated js files inside buil ...

javascripttypescriptgulpmocha.js

Parsing error encountered while trying to handle an unexpected token at line 214, character 33. It appears that an appropriate loader is missing to process this particular file type

I've been developing a Typescript React project for the past few months without any issues. However, things took a turn yesterday when I decided to run npm audit fix and npm audit fix --force in order to address some security concerns that appeared ou ...

reactjstypescriptwebpackbabeljscreate-react-app