score:2
i think there are a few ways around this, the way i have used is having a fully controlled component.
looks a little like this
<tableheaderrow cellcomponent={this.exampleheadercell} />
where exampleheadercell is a component that would look something like this
exampleheadercell = (props: any) => (<tableheaderrow.cell
classname={exampleclass}
{...props}
key={column.name}
getmessage={() => column.title}
/>)
from there you can pass it a class as shown with exampleclass
you can take this further and have it customised for a particular column.
exampleheadercells = (props: any) => {
const exampleclass = css({ backgroundcolor: "blue" })
const { column } = props
if (column.name === "name") {
return (
<tableheaderrow.cell
classname={exampleclass}
{...props}
key={column.name}
getmessage={() => column.title}
/>
)
}
return <tableheaderrow.cell {...props} key={column.name} getmessage={() => column.title} />
}
the example above is returning a specific cell with the exampleclass if the column name is equal to "name". otherwise it just returns the regular tableheaderrow.cell
Source: stackoverflow.com
Related Query
- DevExtreme React Grid
- How to do OR filter using DevExtreme React Grid Table with either FilteringState and/or LocalFiltering?
- Add Image to DevExtreme React Grid Bootstrap4 Column
- Devextreme react data grid on cellprepared html
- How to get full control styling for data table from DevExtreme React Grid with material-ui?
- how to make material data grid width to fill the parent component in react js
- React native flexbox - how to do percentages || columns || responsive || grid etc
- Dealing with ag grid react and rendering a grid of checkboxes
- How do you use CSS grid layouts with React effectively?
- How to add a button inside a cell in the DevExtreme React Grid?
- How to pass percentage value to width to React data grid column
- How to make a Semantic UI React grid full screen with different row heights?
- react functional component with ag grid cannot call parent function via context
- Import only grid system from bootstrap to react
- React Material UI Grid
- React JSX conditional wrapper for bootstrap grid
- React Grid System equivalent to Bootstrap's Grid system?
- React Material UI Grid oversize full screen
- How to display multiple elements using bootstrap grid system and React Js
- How to implement buttons inside a AG grid rows in react
- In React and Material-UI how do I make my Grid items take up 100% of available horizontal space w/o wrapping to the next row?
- How can I use grid layout with Fluent UI React
- React Native - How to Build an Image Grid like FaceBook
- Material UI React paper component in nested grid display issues
- Grid Layout of View in React Native
- How to change a slide out drawer in react grid to position fixed
- How to fill React Grid Layout item with material UI Card
- React Material-ui - Collapse on Grid breaks Grid
- React Data Grid Filters Enabled (and open) by default
- React Material-UI Grid System
More Query from same tag
- Unable to read data from Redux store in the React app
- Office UI Fabric React Icons not showing with Gatsby
- flex box with images in a row
- How to make 'ref' work for ReactTabulator
- Adding a prop to previously defined component using React.cloneElement error cannot read properties of undefined
- document.getElementById for iFrame in ReactJS
- Disable options based on currently selected option with Material UI Autocomplete component
- Material UI Flexbox issue
- How to integrate azure ad into a react web app that consumes a REST API in azure too
- Show the name of state variables from useState in React Developer Tool
- Next.js/React warning when generating random values in a component
- Setting iframe height to scrollHeight in ReactJS using IframeResizer
- React JS App becomes blank white screen when deployed with AWS Amplify
- Error authenticating user using express-session and Typescript
- SVG linear-gradient fill works on desktop view but not on mobile. How can I fix this?
- Docker MERN Deployment - hot reload is not working
- Why do I need prevProps with prevState in componentDidUpdate()?
- Dynimic child component rendering on same Layout Route
- No styling from tailwindcss on MUI
- Material-ui/pickers: Hide the label
- When the data that Apollo fetched is ready with React & GraphQL
- My Table is Moving When I Fullscreen. Anyone Know Why?
- In reactjs, how do I distribute components horizontally across an encompassing div?
- Modal popping up at the wrong time due to state
- How to fix a memory leak in class components?
- react-json-schema tutorial does not show up in browser
- I want to change text color using class and onclick function but onclick function not working?
- React hooks in dynamic lists - more hooks than previous render
- React Table : How do I total (sum) values to each of the holeOne thru holeNine and display the sum as a value in out: 41?
- How to render an array of JSX elements (React components)