Tips for modifying the border of an entire column in react-table

My goal is to adjust the style according to the screenshot below.

This is what I expect:

However, this is what I currently have:

As you can see, the border bottom of the last column is not applied as expected.

I have tried using the props provided by react-table but I still cannot figure out how to achieve it.

List of props that I have used:

  1. styles
  2. getProps
  3. getTheadGroupTrProps
  4. getTrProps
  5. getTbodyProps
  6. getTdProps

For all the props I applied, I have used a condition to check if it is the last record and apply the border-bottom style accordingly.

If anyone has any suggestions or solutions, please help me.

Thank you for your kindness.

javascriptcssreactjsreact-table

Answer №1

To create a styling function based on the last row index, you can use the following code snippet:

const styleRow = (state, rowInfo) => {
  if (!rowInfo) return
  return {
    style: {
      borderBottom: rowInfo.index === lastRowIndex? ˋ1px solid;ˋ : ˋˋ
    }
  }
}

After defining this function, you can set it as geTrProps in your react-table.

Answer №2

<table class="table" id="table_Container">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42282d2a2c02273a232f322e276c212d2f">[email protected]</a></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6904081b10290c11080419050c470a0604">[email protected]</a></td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0baa5bca990b5a8b1bda0bcb5feb3bfbd">[email protected]</a></td>
      </tr>
    </tbody>
  </table>


       #table_Container tr th:last-child{ border-right: 1px solid red; border-left:1px solid red}
#table_Container tr td:last-child{ border-right: 1px solid red; border-left:1px solid red}
#table_Container tr:last-child td:last-child{border-bottom:1px solid red}
#table_Container tr td{border-top: 2px solid #dee2e6;}

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

When attempting to run HTML and JavaScript files locally, an error is encountered: "TypeError: The module name 'openai' is not resolving to a valid URL."

As a beginner in web development, I decided to follow a tutorial on creating a web application using the OpenAI API. The tutorial instructor runs the code in an environment called Scrimba, but I am working on my MacBook. This is how the app functions: it ...

javascriptnode.jsexpressopenai-api

Fs claims that a file does not exist, however, it actually does

Currently, I am facing an issue with a file that contains the following code: const cmds = JSON.parse(fs.readFileSync('./cmds.json')); The file where this code is running is located in the same folder as `cmds.json`, but for some reason, it cann ...

javascriptnode.jsfs

Customizing the style of a dropdown menu in React Material UI using NativeSelect

In our previous projects, we have utilized the NativeSelect components. Now, the task at hand involves altering the appearance of the dropdown Menu within the NativeSelect. If we were to switch to using Select instead, employing the MenuProps property wo ...

cssreactjsmaterial-ui

Locate the generated ID of the inserted child when saving the parent in MongoDB

If I have a document representing a post with comments like the one below: { "_id": "579a2a71f7b5455c28a7abcb", "title": "post 1", "link": "www.link1.com", "__v": 0, "comments": [ { "author": "Andy", "body": "Wis ...

javascriptmongodbmongoose

Cordova encountered an error: Execution of inline script was denied due to violation of Content Security Policy directive

As I delve into the world of Cordova and jquery mobile, I encountered a perplexing error that reads: Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: 'un ...

javascriptjqueryhtmlnode.jscordova

Unusual occurrences observed with table cell padding in CSS

When I include a TD padding in my CSS like this: #maincontent table td, #maincontent table th { padding: .333em 0 .333em .25em; } In Safari and IE, the padding is applied correctly to the TD, but not in Firefox. If I apply the TD padding only to th ...

csscross-browsercss-tables

Using boolean value as default input value in React

When trying to set the default value of a controlled checkbox input from my request, I encountered an error stating "Type 'boolean' is not assignable to type 'string | number | readonly string[] | undefined'". Do you have any suggestion ...

reactjstypescriptinput

Encountering an issue with NPM: "npm ERR! code ENOTEMPTY" appears while trying to install react-router-dom

After executing npm install -S react-router-dom@latest, I encounter the following issues: npm ERR! code ENOTEMPTY npm ERR! syscall rename npm ERR! path /Users/albertnt/my-portfolio/my-portfolio/node_modules/acorn-globals npm ERR! dest /Users/albertnt/my-p ...

reactjsnpmreact-router-domnpm-install

What is the best way to divide an array of objects into three separate parts using JavaScript?

I am looking to arrange an array of objects in a specific order: The first set should include objects where the favorites array contains only one item. The second set should display objects where the favorites array is either undefined or empty. The third ...

javascriptarraysecmascript-6javascript-objectsecmascript-5

Error message malfunction on the Express.js server side

Here is the server-side POST code that I am using. Before saving my task to the database, I am trying to find data in the database using a unique value called service. However, when I run this code, the console displays an error: ReferenceError: service is ...

javascriptnode.jsexpress

Problem with Sending POST Requests in ExpressJS

Having trouble with a POST request in Postman resulting in a long loading time followed by a Could not get any response error message? No errors are showing up in the terminal. Could there be an issue with how I am saving the POST data, especially in my /b ...

javascriptnode.jsexpress

Challenge encountered with Promise failing to resolve despite multiple retry attempts

I've been struggling with Promises as a beginner for the past few days. I need to make an API call and check if there is a response. If not, I have to retry calling the API a configurable number of times. I attempted the following code, but I'm u ...

javascriptnode.jspromisees6-promise

How to Use Laravel to Create HTML Divs Without Images

While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...

htmlcsslaravellaravel-5

What Causes mat-bottom-sheet-container to Overflow Instead of Remaining Anchored at the Bottom of the Mobile Screen?

I am encountering an issue with a popup window in my Angular app. Despite testing it on various screen resolutions using Chrome's DevTools Screencast, the popup appears correctly styled and positioned on mobile devices. However, when tested on a real ...

androidcssangularangular-material

Is there a way to incorporate a fade-in effect when I trigger the expand function in this script?

I recently came across a jQuery plugin for expanding and collapsing content. I am interested in adding a fade-in effect to this plugin specifically when the EXPAND button is clicked. How can I accomplish this? $(document).ready(function () { var maxlines ...

javascriptjquery

Transitioning classes in Vue elements

Is it achievable to create a smooth transition between two CSS classes with different background images? That's the challenge I'm currently facing. Here is the Vue code snippet I am working on: <div id="flip-list-demo" class="demo"> & ...

javascriptcssvue.jstransition

Sticky positioning with varying column widths

How can I create HTML and CSS columns that stick together without manually specifying the "left:" parameter every time? The current example in the fiddle achieves what I want, but requires manual setting of the "left:" value. Is there a way to make this m ...

javascripthtmlcss

Why is the UI Router controller failing to function properly after loading the view from the $templateCache?

I've been utilizing gulp-angular-templatecache to convert my filename.view.html files into a consolidated templates.js file. Afterwards, I use $stateProvider to define states and fetch the templates from $templateCache, including an abstract "root" s ...

javascriptangularjsangular-ui-routerangular-templatecache

Tips for transferring parameters between AJAX requests

Struggling to pass parameters between two different ajax calls, I've noticed that the params only exist within the ajax scope and not outside of it. Is there another way to achieve this without calling from one ajax success section to another ajax? He ...

javascriptjqueryajax

A straightforward jQuery conditional statement for dynamically generated content

If the div '#ajax' contains content, I want to make the div '.container' clickable. Here is the basic jQuery script I have implemented: if ('#ajax:empty') { $('.container').css('pointer-events', ' ...

jquerycssajax