Adjust the maxWidth exclusively for xxl-sized screens in react-table

I have implemented react-table to display data in a table format. However, I am facing an issue with the styling of a specific column. I need to change the maxWidth property to 60 for screen sizes xs to xl and to 30 for xxl screens. Is there a way to achieve this inline within the headerProps and cellProps style objects? I prefer not to create a separate file and link the component to it as I'm not very familiar with scss, which is being used in this project.

Below is the code snippet showcasing the accessor containing the cellProps and headerProps:

const columns = [
    
    {
        accessor: 'firstName',
        Header: 'First Name',
        Cell: firstNameFormatter
    },
    {
        accessor: 'lastName',
        Header: 'Last Name',
        Cell: lastNameFormatter
    },
    {
        accessor: 'actions',
        Header: <FontAwesomeIcon icon="cog" className="fs-1 ml-2" />,
        headerProps: {
            className: 'bg-light',
            style: {
                maxWidth: 60 // Adjust this value to 30 only for xxl screens
            }
        },
        Cell: actionFormatter,
        sticky: 'right',
        cellProps: {
            className: 'bg-light',
            style: {
                maxWidth: 60 // Adjust this value to 30 only for xxl screens
            }
        },
    }
];
javascriptcssreactjssass

Answer №1

There is a workaround available, but it may not be the most elegant solution. JavaScript doesn't have direct access to media queries like CSS does, so we need to find a way around this limitation.

One approach is to set up an event listener for the resize event. In the callback function, store the computed window width in a state variable, and then use this value as the maxwidth for your cellProps.

You can implement something similar to the following code snippet:

const [maxWidth, setMaxWidth] = useState(getWidth())

function getWidth() {
  const body = document.querySelector("body")
  const width = parseFloat(window.getComputedStyle(body).width)
  if (width > 1200) {
    return 30
  } else {
    return 60
  }
}

window.addEventListener("resize", () => setMaxWidth(getWidth()))

const columns = [
    
    {
        accessor: 'firstName',
        Header: 'First Name',
        Cell: firstNameFormatter
    },
    {
        accessor: 'lastName',
        Header: 'Last Name',
        Cell: lastNameFormatter
    },
    {
        accessor: 'actions',
        Header: <FontAwesomeIcon icon="cog" className="fs-1 ml-2" />,
        headerProps: {
            className: 'bg-light',
            style: {
                maxWidth: maxWidth
            }
        },
        Cell: actionFormatter,
        sticky: 'right',
        cellProps: {
            className: 'bg-light',
            style: {
            maxWidth: maxWidth
            }
        },
    }
];

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

Validation needed for data list option

Here are all the details <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option valu ...

javascripthtml

Concealing a Div Class with J Query upon page load

I've been attempting to use jQuery to hide a specific div class field, but unfortunately, I haven't had any success. This particular field is within a support form and should be hidden initially, only appearing when a certain value is selected. I ...

javascriptjqueryhtmlcss

Personalized navigation bar color while hovering in Bootstrap

I can't seem to figure out the right CSS syntax to customize my navbar links when hovering. Here is my navbar structure: <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Home", root_path %></li> <li cla ...

htmlcsstwitter-bootstrap

How can I access data from the CIA World FactBook using REST, SOAP, or API?

Is there a more efficient method to gather information from the CIA World Factbook without having to download a large dataset? Perhaps the CIA simply collects data. :-) I came across an outdated JAVA package for retrieving information, but I prefer a more ...

javascriptphpapirestsoap

Transfer the iteration's value to the function's parameter

Recently delving into angular js and hoping to achieve this. Here is a snippet of my code: <tr data-ng-repeat="element in awesomeThings"> <td ng-click="getServiceDetails()"> <a href="#"> {{element}} </a ...

javascriptangularjs

The necessity of enclosing const names in curly braces in ReactJS

display () { const { parameters } = this.props.parameters return ( <div>{ parameters.post }</div> ) } Is there a specific reason why the parameters must be enclosed in curly brackets? Couldn't it simply be 'const params = th ...

javascriptreactjsecmascript-6

When attempting to open a native app using JavaScript, it fails to function properly. However, the same code successfully opens the

These questions revolve around a web application developed in React that will be accessed through smartphones' browsers. I conduct testing on an iPhone using both Safari and Chrome. One of the steps involves opening a native authentication app. As pe ...

javascriptreactjs

Can one echo the value of a variable within an array reference?

I am trying to extract the value of an input based on its class and then use that value in an associative array Here is my current javascript code: var phone_code = document.getElementsByClassName( 'model' ).value; var phone = []; phone["6s"] = ...

javascriptarrays

Adjustable div element and percentage-based height are not functioning correctly

I am facing a minor issue while attempting to create a responsive div with an image background. The div does not match the size of the image: 540px-290px When I resize the browser, the two divs do not resize together. In each div, there is a background ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Issues encountered while utilizing Bliss as the template engine in NodeJS/Express

Seeking assistance in transitioning from Jade to Bliss as the template engine for a basic Express web application on NodeJS. Here is the code snippet from app.js: var express = require('express'), routes = require('./routes'), ...

javascriptnode.jstemplatesexpress

The Vue app for logging in with Metamask is unable to communicate with the Metamask extension due to a lack of interaction between the store components and the frontend interface

After following a tutorial to create a Metamask login app with Vue, I ran into some issues. The code provided lacked a defined project structure, so I decided to organize it in my own Github repo here. However, despite compiling successfully, the button to ...

javascriptvue.jsethereumweb3jsmetamask

Execute the function when the element comes into view

Is there a way to create a function that will automatically attach itself to an element when it comes into view? I have multiple elements on my page - element1, element2, and element3. Instead of using a large if statement, I would like to write a functio ...

javascriptjqueryhtmlcss

Ways to identify whether a day is in Pacific Standard Time (PST) or Pacific Daylight

While working on setting a date in node js for my server located in IST, I am trying to figure out whether the date would fall under PDT or PST time (depending on Daylight Saving Time being on or off). If my server was in PST/PDT time zone, this decision ...

javascriptnode.jsdate

Create a system where three arrays are interconnected, with the first array representing the name of the object

I have a group of different objects structured like this: let object1 = { xyz: 'xyz1', arr: [] }, object2 = { xyz: 'xyz2', arr: [] }, object3 = { xyz: 'xyz3', arr: [] } Manag ...

javascriptjqueryarraysobject

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

javascriptnode.jstypescripttensorflowtensorflow.js

Using the get method to retrieve properties from response.data

Can someone assist me with extracting the prop name from the API available at ? Currently, when I try to do so, the console only returns undefined. useEffect(() => { if(selectedCountry === '0'){ return } axios.get<Countr ...

javascriptreactjsapiaxios

What purpose does setting the background color serve for me?

I'm feeling a bit perplexed about this situation. I've been trying to make a textarea inside a div function properly in IE7, IE8, and IE9, and accidentally changing the styling from "none" to a color seemed to do the trick. Could someone shed so ...

htmlcssinternet-explorer-8internet-explorer-7internet-explorer-9

Error: The reference to 'ko' is not defined while loading with jQuery

After numerous attempts, I am still encountering the ReferenceError: ko is not defined issue while trying to load KnockoutJS using jQuery's getScript function. Below is the code snippet I have been testing to see if everything is functioning correctl ...

javascriptjqueryknockout.js

What benefits does utilizing mapActions in vue js provide?

During my exploration of Vue.js, I have been utilizing mapState extensively in my code to update rendering whenever there are changes in the store layer. Lately, I discovered the existence of mapActions in vuex. However, upon consulting various examples, ...

javascriptjqueryvue.js

Dynamic animations with RaphaelJS - Creating animated connections

I recently came across a similar project here: My current project involves animating boxes by clicking a button. While I am able to move the boxes around smoothly during animation, the issue is that the connections between them do not move along. Is there ...

javascriptraphael