How to avoid whitespace on right side if columns are less in Ag grid

Asked
Active3 hr before
Viewed126 times

6 Answers

whitespacerightavoid
90%

The answer might be sizeTofit . But When I have to resize the column then that whitespace is coming on the right side of the grid., What is the right tool to cut a clothesline made of coated steel? ,set the width of columns and at the end set new column defs to your ag grid;

set the width of columns and at the end set new column defs to your ag grid;

var tableWidth = sth;
var totalWidth = 0;
for (var i = 0; i < columnDefs.length; i++) {
   totalWidth += columnDefs[i].width;
   if ((i == columnDefs.length - 1) && (totalWidth < tableWidth)) {
      columnDefs[i] += tableWidth - totalWidth;
   }
}
api.setColumnDefs(columnDefs);
88%

Just like Excel, each column can be 'auto resized' by double clicking the right side of the header rather than dragging it. When you do this, the grid will work out the best width to fit the contents of the cells in the column.,Each column can be resized by dragging (or double-clicking or auto resize) the right side of its header.,All columns can be resized by dragging the top right portion of the column.

The snippet below allows all columns except Address to be resized by explicitly setting each column.

const gridOptions = {
   columnDefs: [{
         field: 'name',
         resizable: true
      },
      {
         field: 'age',
         resizable: true
      },
      {
         field: 'address'
      },
   ],

   // other grid options ...
}

The snippet below allows all columns except Address to be resized by setting resizable=true on the default column definition and then resizable=false on the Address column.

const gridOptions = {
   defaultColDef: {
      resizable: true,
   },
   columnDefs: [{
         field: 'name'
      },
      {
         field: 'age'
      },
      {
         field: 'address',
         resizable: false
      },
   ],

   // other grid options ...
}
// Loading...
// Loading...
// Loading...
// Loading...
// Loading...
load more v
72%

I have created a ag-grid with few columns pinned to right and suppose i have only two columns which are not pinned then ag-grid is creating space between pinned columns and non-pinned columns. In the below URL, Total Column is pinned to right and Athlete, country are non pinned columns and find the space between country and total columns. Plunker: https://plnkr.co/edit/Icz25Fe45U1ShLX0XsdM?p=preview Ideally that space shouldn't exist and the pinned columns should re-adjust among the available columns. Kindly Provide us a way to solve this.,AG-2160 - Column pinning - Allow pinning to only happen when there isn't enough space in the viewport,As a workaround for this, I added a flex width column before the pinned column to take up the blank space: { "colId": "_spacer", "flex": 1 }

window.onresize = resize;

function resize() {
   gridOptions.api.sizeColumnsToFit();
}
65%

CSS: Cascading Style Sheets,column-gap (grid-column-gap),The column-gap CSS property sets the size of the gap (gutter) between an element's columns.

/* Keyword value */
column-gap: normal;

/* <length> values */
   column-gap: 3px;
   column-gap: 2.5em;

   /* <percentage> value */
      column-gap: 3%;

      /* Global values */
      column-gap: inherit;
      column-gap: initial;
      column-gap: revert;
      column-gap: unset;
load more v
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

The second step is applying a fixed padding to the right side of all columns except the last one.,Step two is to restore the right padding to the last column:,The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a “main content area” floated to the left a “sidebar” floated to the right, it’s a simple grid.

A block level element is as wide as the parent it’s inside (width: auto;). We can think of it as 100% wide. The wrapper for a grid probably don’t have much to do with semantics, it’s just a generic wrapper, so a div is fine.

<div class="grid">
   <!-- 100% wide -->
</div>

Let’s start with a practical and common need: a main content area being 2/3 the width and a sidebar being 1/3 the width. We just make two column divs with appropriate class names.

<div class="grid">
   <div class="col-2-3">
      Main Content
   </div>
   <div class="col-1-3">
      Sidebar
   </div>
</div>

To make them next to each other, we just need to float them and apply widths. We can select both like this:

[class *= 'col-'] {
   float: left;
}

and individual width like this:

.col - 2 - 3 {
      width: 66.66 % ;
   }
   .col - 1 - 3 {
      width: 33.33 % ;
   }

The parent element will collapse to zero height since it has only floated children. Let’s fix that by clearing it. These days all you need is this:

.grid: after {
   content: "";
   display: table;
   clear: both;
}

The first step toward this is using box-sizing: border-box;. I like using it on absolutely everything.

*, *: after, *: before {
   -webkit - box - sizing: border - box; -
   moz - box - sizing: border - box;
   box - sizing: border - box;
}

The second step is applying a fixed padding to the right side of all columns except the last one.

[class *= 'col-'] {
   padding - right: 20 px;
}
[class *= 'col-']: last - of -type {
   padding - right: 0;
}

Need gutters on the outside? I like using an opt-in class for this:

<div class="grid grid-pad">
   Grid with outside gutters also
</div>

Step one is to add left padding to the grid parent (and optionally top and bottom padding):

.grid - pad {
   padding: 20 px 0 20 px 20 px;
}

Step two is to restore the right padding to the last column:

.grid - pad > [class *= 'col-']: last - of -type {
   padding - right: 20 px;
}

Super easy:

.col - 1 - 2 {
      width: 50 % ;
   }
   .col - 1 - 4 {
      width: 25 % ;
   }
   .col - 1 - 8 {
      width: 12.5 % ;
   }

I’m not using it heavily here, but the whole bit becomes even a bit more succinct with SCSS/Compass:

*{
   @include box - sizing(border - box);
}

$pad: 20 px;

.grid {
   background: white;
   margin: 0 0 $pad 0;

   &
   : after {
      /* Or @extend clearfix */
      content: "";
      display: table;
      clear: both;
   }
}

[class *= 'col-'] {
   float: left;
   padding - right: $pad;
   .grid &: last - of -type {
      padding - right: 0;
   }
}
.col - 2 - 3 {
      width: 66.66 % ;
   }
   .col - 1 - 3 {
      width: 33.33 % ;
   }
   .col - 1 - 2 {
      width: 50 % ;
   }
   .col - 1 - 4 {
      width: 25 % ;
   }
   .col - 1 - 8 {
      width: 12.5 % ;
   }

   /* Opt-in outside padding */
   .grid - pad {
      padding: $pad 0 $pad $pad;
      [class *= 'col-']: last - of -type {
         padding - right: $pad;
      }
   }

I like to work within these grids with “modules”.

<div class="grid">
   <div class="col-2-3">
      <article class="module">
         stuff
      </article>
      <article class="module">
         stuff
      </article>
   </div>
   <div class="col-1-3">
      <aside class="module">
         Sidebar stuff. Sub modules?
      </aside>
   </div>
</div>
load more v

Other "whitespace-right" queries related to "How to avoid whitespace on right side if columns are less in Ag grid"