Setting a border on a specific column in ag-grid is a simple task that can help you customize

I have a table where the first set of columns differs from the rest. I am looking to emphasize this distinction by adding a vertical border on the right side of the specific column to highlight it both in the header and rows.

Our setup includes using the Balham theme with columnDefs defined in component.ts, and the component.html file containing:

<ag-grid-angular
  class="ag-theme-balham"
  [rowData]="vm.data$ | async"
  [columnDefs]="columnsDefs$ | async"
  [gridOptions]="gridOptions"
  [columnTypes]="columnTypes"
>
</ag-grid-angular>

In an inquiry on How to style AG-GRID column vertical borders, a proposed solution involved theme customization, but I only want the border on one particular column without affecting others. Even attempting to use 

cellStyle: { 'border-right-colour': 'black' }
within the designated columnDef does not display as intended due to the Balham theme's default transparent border settings.

Is there a way to target and style a specific column in the table differently from the rest?

cssangularsassag-gridag-grid-angular

Answer №1

To create borders on specific columns, you can use the headerClass and cellClass properties. Here is an example where the same class is added to a column:

    {
      field: 'age',
      headerClass: ['age-border'],
      maxWidth: 90,
      cellClass: ['age-border'],
    },

.age-border {
  border-right: 3px solid red !important;
  border-left: 3px solid red !important
}

Check out this effect in action in the sample provided here

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

Tips for Positioning Content in the Center of a Bootstrap Div

I'm struggling to center the jackpot-item-container div within a chart. Can anyone help me figure this out? Check out my code on CodePen. <div id="jackpot-container" class="col-sm-12"> <div id="jackpot-item-container"> <span id= ...

htmlcsstwitter-bootstrap

My route seems to be malfunctioning, can someone please help me troubleshoot the

There seems to be an issue with my route in the app-routing.module.ts file because I encounter errors when I visit this page: However, everything works fine when I go here: import { NgModule } from '@angular/core'; import { Routes, Router ...

angularroutes

React-select is failing to align properly with flexbox styling

I'm currently working on customizing my navbar to display both react-selects in a single row. I initially had everything running smoothly with the traditional vanilla select, but integrating the react-select caused my styling to break. Navbar.js impo ...

cssreactjsreact-select

User interaction with a checkbox triggers a state change in Angular

Here is the code snippet I am working with, where clicking should set the checked value to false: @Component({ template: ` <input type="checkbox" [checked]="checked" (change)="onChange()"> ` }) export class AppC ...

javascriptangulartypescript

Enhancing Dropdown Functionality Using Jquery

Hey there, I am looking to create a dropdown list/menu similar to the one shown in this image: (a screenshot). Could you please guide me on how to achieve this? Can it be done using JQUERY? Thank you in advance, Andrea ...

jquerycssinterfacemenudrop-down-menu

Button click does not trigger component reload

Presented below is a button element that triggers the following action when clicked: <button mat-button (click)="toggleLikeQuestion(question['id'])" aria-label="Like this question."> {{!isQuestionLike ...

angular

Adjust the Bootstrap flex settings to display only 3 cards instead of the default 4 cards - HTML

We currently have a bootstrap setup that displays 4 horizontal scroll cards by default. However, we are looking to only show 3 cards in view and allow the 4th card to be viewed by scrolling. Code On mobile view, the code is still displaying 4 tiles even ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing the after pseudo element for an active selector in CSS

I'm struggling to make an active icon selector work with the after pseudo element. Here is the code I have attempted: <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-alig ...

htmlcsscss-selectorspseudo-element

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

htmlcssanimationanimate.css

Styles applied in the child component will have a cascading effect on the entire webpage

My webpage is divided into two parts: child1 and child2. Page Hierarchy: Parent Child1 Child2 Here are the CSS styles included in the page: Child1 -> z-index: 1 Child2 -> z-index: 2 What I want to achieve is to add a backdrop to the entire ...

cssangularangular7

Locating elements with CSS Selector in Selenium - A complete guide

Currently, my code is set up to access a website and click on each row in the table which then opens a new window. My goal is to extract one specific piece of information from this new window, but I am struggling to utilize CSS selectors to retrieve the f ...

pythoncssseleniumcss-selectors

Printing style in CSS

Everything looks good on my webpage. For printing, my CSS adjusts the layout and section sizes. Unfortunately, there is an issue with the print layout - there is a one-inch margin on the left side causing two elements to go off the page on the right. I ...

cssprintingmargin

How can I align my logo on the website header separately from the menu tabs while keeping them on the same row?

Trying to vertically align a logo and headers' tabs in the same row can be quite challenging, especially when the logo is taller than the tabs. I've attempted different methods, including using padding to manually adjust the alignment, but it&apo ...

htmlcss

Solving the default font problem in Laravel

I've been working on a project using Laravel and Bootstrap 4. Recently, I decided to switch from the default Laravel font, Nunito, to Lato. So, I made the necessary changes in my app.css file: @import url(https://fonts.googleapis.com/css?family=Nun ...

phpcsslaravelbootstrap-4fonts

What is the best way to design a content page with linked boxes to various arrays in PHP?

How can I create a PHP menu template that navigates to different pages? I am new to PHP and still learning. I want to achieve something similar to this image: https://i.stack.imgur.com/ylfe8.jpg I have the code for the navigation bar, but I need help crea ...

phpcsshtmlnav

Tips for seamless integration of Django and Angular routing

How can I make the Angular 2 URL work with Django in an Angular 2 app served by Django, even when reloading the page? For example, let's say a Django-served page has the URL http://localhost:8000/home. On this page, there are 3 tabs and one of them c ...

djangoangular

Utilize style as a module in Angular

The issue at hand: Let's take a look at this project structure: /src /public /styles /general /tables.scss /secure /components /someTable1 /someTable.component.ts /someTable.component.css /someTa ...

angulartypescriptimportsassangular5

When I apply both `*ngIf` and `*ngFor` to the same element, why does `*ngFor` insert a null item into the array that I am iterating over?

Custom Design, Visualization. Switching from the *ngIf directive to the [hidden] property greatly improves the appearance and eliminates any null items. ...

templatesangular

toggle back and forth between two div elements

I am trying to create a toggle effect between two divs, where clicking on one will change its border and header color to red while the other div disappears. I have tried using an IF statement in my JavaScript code, but it is not working as expected. Can so ...

javascriptjqueryhtmlcss

Adjust the baseline of the text within the <li> element by moving it 2 pixels upwards

My webpage menu is set up with inline lis within a ul. Each li has a colored border and contains an a element. I want to change the color of the text inside the a element and move it 2 pixels up when hovering over it without affecting the li border. How ...

htmlcssmenuhtml-listsmousehover