Search

Vue Data GridTheming API: Customising Borders

Control the borders around rows, cells and UI elements.

Borders are controlled using theme parameters ending Border. There are many such parameters, you can find a full list by searching for "border" in the Theme Builder "All Parameters" section.

The most important parameters relating to borders are:

  • borderColor - sets the default color for all borders, which can be overridden for individual borders using the parameters below
  • rowBorder and headerRowBorder - sets the horizontal borders between rows in the grid and header
  • columnBorder and headerColumnBorder - sets the vertical borders between columns in the grid and header
  • wrapperBorder - sets the border around the grid itself

Example: row borders 

const myTheme = themeQuartz.withParams({
    wrapperBorder: false,
    headerRowBorder: false,
    rowBorder: { style: 'dotted', width: 3, color: '#9696C8' },
    columnBorder: { style: 'dashed', color: '#9696C8' },
});

Borders between header cells

Column borders between header cells have adjustable height, and there is also the option of styling the resize handle which is only present on resizable columns. See Customising Headers for more information.