CODEWITHSUNDEEP
angularag-grid-angular
robs
robs

Reputation: 101

How do I add vertical grid lines to an ag-Grid?

I am trying to add vertical grid lines to an ag-Grid for angular 2 (making it a bit more excel-like).

Do I need to make a custom theme (not use ag-theme-balham)?

Does anyone have an example?

Any help would be appreciated.

Upvotes: 6

Views: 14501

Answers (3)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20088

In column definition we can able to define vertical alignment cellStyle: {'border-right': '1px dotted'}

const defaultColDef = useMemo(() => {
        return {
            cellStyle: {'padding-left': 0 ,'border-right': '1px dotted'},
            sortable: true,
            editable: false,
            flex: 1,
            filter: true,
            resizable: true,
            floatingFilter: true,
            suppressMenu: true,
            floatingFilterComponentParams: { suppressFilterButton: true },
        };
    }, []);

Upvotes: 1

user2555515
user2555515

Reputation: 1029

Override the ag-grid value:

   .ag-cell
   {
      border-right-color: black;
      border-right-width: 1px ;
      border-right-style: solid ;
    }

for cells and for the header 

 .ag-header-cell,  .ag-header-group-cell {
    border-right: 1px solid black;
  }

Upvotes: 3

HDJEMAI
HDJEMAI

Reputation: 9800

One solution could be to style the cells by adding for example:

cellStyle: {border: '1px solid'}

Result:

enter image description here

Use this Stackblitz for your reference:

https://stackblitz.com/edit/ag-grid-bss-test-s5pxxc?file=app/app.component.ts

You can try to put different size for the border for better look & feel:

border: 'solid',
borderTopWidth: '0.5px',
borderRightWidth: '0.5px',
borderLeftWidth: '0.5px',
borderBottomWidth: '0.5px'

enter image description here

Upvotes: 5

Related Questions