I am eager to create a vibrant striped table using React.js, making use of the map function

Using the map function to display fetched device data, but struggling to create a striped color table. I want to alternate the background color of the tbody tag in stripes, using Bootstrap.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

https://i.sstatic.net/RWsfT.png

React.js

<table className="table table-striped table-bordered">
<thead className="table_thead ">
  <tr className="table_font_color">
    <th scope="col">Device Name</th>
    <th scope="col">Type</th>
    <th scope="col">Room</th>
  </tr>
</thead>
{entities.map((entity, i) => (
<tbody>
  <tr className="table_font_color">
    <th scope="row">
      <Icon entityKey={entity.key} type={entity.type} state={entity.state} entityID={entity.entity_id} objectID={entity.object_id} />
      <p className="">{entity.entity_id}</p>
    </th>
    <td className="align-middle">
      {entity.key === "camera" && <div>Smart Camera</div>}
      {entity.key === "cover" && <div>Garage</div>}
      {entity.key === "climate" && <div>Smart Themostat</div>}
      {entity.key === "lock" && <div>Smart Lock</div>}
      {entity.key === "light" && <div>Smart Light</div>}
      {entity.key === "sensor" && <div>Sensor</div>}
      {entity.key === "switch" && <div>Smart Plug</div>}
    </td>
    <td className="align-middle table_rightside">
      {entity.key === "switch" && <button className="btn btn-primary button_table_rightside">Unassigned</button>}
      {entity.key === "sensor" && <button className="btn btn-primary button_table_rightside">Unassigned</button>}
      {entity.key === "light" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "camera" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "climate" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "cover" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "lock" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
    </td>
  </tr>

</tbody>
))};
</table>

CSS

.table_thead {
  background-color: #152D58 !important;
}

.table-bordered {
  border: none !important;
}

.table-striped > tbody > tr:nth-child(0) > td, .table-striped > tbody > tr:nth-child(0) > th {
  background-color: #152D58 !important;
}

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
  background-color: #1E3E75 !important;
}

.table-striped > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n) > th {
  background-color: #152D58 !important;
}

table.table-bordered > thead > tr > th{
  border:3px solid #022055 !important;
}

.table-bordered td {
  border:3px solid #022055 !important;
}

.table-bordered th {
  border:3px solid #022055 !important;
}

.table_font_color {
  color: white !important;
}

Added photo https://i.sstatic.net/iYgGq.png

Answer №1

To style your table rows differently based on their index in the map method, use conditional classes like this:

<tr className={`table_row ${i % 2 === 0 ? 'striped' : ''}`}>

Then, add the following CSS:

.striped > td {
  background-color: #152D58 !important;
}

Answer №2

By utilizing the nth-child selector with odd and even values, you can create alternating styles for table rows.

tbody tr:nth-child(odd){
  background-color: #111;
  color: #fff;
}

tbody tr:nth-child(even){
  background-color: #222;
  color: #fff;
}

Update:

If you are working with a map function, you have the option to access the index parameter and determine if it is an odd or even number. This allows you to apply different classes and adjust the CSS styles accordingly.

map((element, index) => {
    return <TableRow
            class = {index % 2 !== 0 ? "odd-row" : "even-row"}
        />
});

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

Guide on inserting text within a Toggle Switch Component using React

Is there a way to insert text inside a Switch component in ReactJS? Specifically, I'm looking to add the text EN and PT within the Switch Component. I opted not to use any libraries for this. Instead, I crafted the component solely using CSS to achie ...

Is it possible for 'will-change' to achieve the intended outcome when implemented using the Web Animations API?

Google recommends: Google suggests that if an animation may occur within the next 200ms [...] it's a good idea to use will-change on elements being animated. In most cases, any element in your app's current view that you plan to animate should ...

Tips for making modal body text reactive to different screen sizes

The text sent from JavaScript to the modal does not make the text_description element in the modal body responsive Modal Image https://i.sstatic.net/UJEG8.png HTML Code Snippet <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boot ...

What can I do to adjust the position of the div wrapper if the floating sidebar is taller than

Check out this example http://jsfiddle.net/NuzDj/ When you resize the window, the sidebar overlaps with the wrapper and footer. Is there a way to automatically adjust the height of the wrapper when the sidebar overlaps with it? ...

Ensuring Stripe Wallet buttons are constantly visible

I am currently working on integrating Stripe Wallet into a Next.js project. However, I have encountered an issue where only one wallet button is visible by default while the others are hidden. https://i.stack.imgur.com/2NFtM.png Upon clicking the See mor ...

Using Redux to Implement Conditional Headers in ReactJS

I am planning to develop a custom component named HeaderControl that can dynamically display different types of headers based on whether the user is logged in or not. This is my Header.jsx : import React from 'react'; import { connect } from &a ...

The syntax for importing JSON in JavaScript ES6 is incredibly straightforward and

Whenever I attempt to write my code following the ES6 standard and try to import a .json file, it ends up failing on me. import JsonT from "../../Data/t.json" //not functioning as expected var JsonT = require('../../Data/t.json'); //works fine ...

How can I include script tags and functions in Next.js?

As a newcomer to react and next.js, I am looking to integrate a custom script into my next.js project. The script has been added to the <head> tag: <script src="https://www.mews.li/distributor/distributor.min.js"></script> The ...

What could be causing the CSS loader in webpack to malfunction?

I am currently working on implementing the toy example mentioned in the css-loader documentation which can be found at https://github.com/webpack-contrib/css-loader Additionally, I have also followed a basic guide that recommends similar steps: https://cs ...

What is the interaction between CSS and URL fragments (the #stuff)?

Can URL fragments affect CSS behavior? For instance, let's consider a sample page at: http://example.boom/is_this_a_bug.html. You can view the code for this page on https://gist.github.com/3777018 Upon loading the page with the given URL, the element ...

Tips for effectively personalizing the dropdown menu made with ul-li elements

https://i.sstatic.net/7kkqL.png https://i.sstatic.net/dCwkI.png After creating a drop-down menu using ul and li tags, I realized that when the menu is opened, it shifts the blocks below on the screen. To prevent this from happening, I adjusted my CSS as ...

Choose a procedure to reset to the original setting

I'm attempting to achieve something that seems straightforward, but I'm having trouble finding a solution. I have a <select> tag with 5 <option> elements. All I want to do is, when I click a button (which has a function inside of it), ...

"Enhance your website with a creative CSS3 effect: rotating backgrounds on

Greetings, fellow coders! #div1{ position: fixed; top: 50%; left: 50%; margin-left:-100px; margin-top: 420px; width: 158px; height: 158px; background-image:url(imag ...

Tips for creating an animated effect on the active tab when it switches

Currently, I have a tab list containing li items. When an item is active, the li item has rounded corners and a box shadow effect. My goal is to add an animation that shows the active pill moving to its next position when it changes, but I am unsure of how ...

How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...

Revamp the button's visual presentation when it is in an active state

Currently, I'm facing a challenge with altering the visual appearance of a button. Specifically, I want to make it resemble an arrow protruding from it, indicating that it is the active button. The button in question is enclosed within a card componen ...

Bringing in a variable from a component that is dynamically imported

I have a dynamically imported (Map) component on my page. const Map = dynamic(() => import('../components/Mapcomp'), { ssr: false, }) In addition to the component, I also need to import a variable from it. const [taskImg, setTaskImg] = useS ...

Is it possible to create an Excel add-in taskpane using ReactJS and NextJS?

Can NextJS be integrated with an Excel task pane in a ReactJS app? If it is possible, could you provide me with an example or guide me to any resources on the web? ...

Struggling to align my Navbar items in one clean line, they seem to pile up and remain fixed on the left side. Utilizing ReactJS and MUi5

I'm struggling with aligning my Navbar items (NavLink) horizontally in one line instead of being stuck on the right side and stacked on top of each other. Can someone help me fix this issue? Here's the code snippet: import React from "react& ...

Material UI - Array of Chips

I have been working on creating a ReactJS component that displays an array of chips with unique styling for each one. To achieve this, I created individual makeStyles classes for the chips. However, I encountered difficulties in dynamically changing the cl ...