Theme

HTML Architecture

data-grid-vue is designed with a fairly flat HTML structure and leverages CSS grid to arrange the HTML elements into a data grid. The data grid cells are a sub-grid to allow the data cells to be the scrollable container (i.e. sticky header and footer).

This architecture allows for endless layout possibilities both in the data grid and where the data grid is placed on the page (e.g. full page, half page, etc.). The data grid component works very well inside both flex and grid-based layouts even when they are deeply nested.

Here is a high-level overview of the HTML that gets rendered.

<div class="dgv-data-grid-container">
  <div class="dgv-options-header">...</div>

  <div class="dgv-header-cell">...</div>
  <div class="dgv-header-cell">...</div>
  ...
  <div class="dgv-header-cell">...</div>

  <div class="dgv-filter-options-cell">...</div>
  <div class="dgv-filter-options-cell">...</div>
  ...
  <div class="dgv-filter-options-cell">...</div>

  <div class="dgv-data-grid-body">

    <div class="dgv-data-grid-cell">...</div>
    <div class="dgv-data-grid-cell">...</div>
    ...
    <div class="dgv-data-grid-cell">...</div>
    ...
    <div class="dgv-data-grid-cell">...</div>
    <div class="dgv-data-grid-cell">...</div>

  </div>

  <div class="dgv-footer">...</div>
</div>

CSS Variables

Including the data grid's core styles will come with the CSS variables below. The below also includes their default values. The data grid can be themed by adjusting the values of these CSS variables. The core stylesheet can be loaded using an import statement similar to the following in your main.ts file. It is recommended to import it prior to any application stylesheets to be able to properly override the variable values.

import 'data-grid-vue/style'

Note

Explicitly importing the data-grid-vue stylesheet is only required when using the plugin to register the data grid component and dependencies (which is recommended). If importing the data grid component locally to the component where it is used then the stylesheet will automatically come with it. However, you will need to keep in mind the order in which the CSS will be included and in this case you will likely need to override any of the data grid's CSS variables in the SFCopen in new window style block of the local component.

:root {
  --dgv-white: #ffffff;
  --dgv-black: #000000;
  --dgv-opaque-1: #ffffff80;
  --dgv-opaque-2: #ffffff4d;
  --dgv-opaque-3: #ffffff33;
  --dgv-accent: #e57f41;
  --dgv-base: #aaaaaa;
  --dgv-font-family: Verdana, Arial, Helvetica, sans-serif;
  --dgv-focus-outline: .1rem solid var(--dgv-accent);
  --dgv-header-text-color: var(--dgv-white);
  --dgv-header-background: transparent;
  --dgv-header-padding: .6rem;
  --dgv-header-font-size: 1rem;
  --dgv-header-font-weight: bold;
  --dgv-header-border-top: .2rem solid var(--dgv-opaque-1);
  --dgv-header-border-bottom: .2rem solid var(--dgv-opaque-1);
  --dgv-header-icon-size: .8rem;
  --dgv-header-icon-color: var(--dgv-accent);
  --dgv-header-drop-border-color: var(--dgv-accent);
  --dgv-header-focus-outline: var(--dgv-focus-outline);
  --dgv-filter-options-background-color: var(--dgv-opaque-2);
  --dgv-filter-options-border-bottom: .2rem solid var(--dgv-opaque-1);
  --dgv-cell-text-color: rgb(255, 255, 255);
  --dgv-cell-padding: 1rem .8rem;
  --dgv-cell-border: none;
  --dgv-cell-font-size: 1rem;
  --dgv-cell-background: var(--dgv-opaque-3);
  --dgv-cell-alt-background: var(--dgv-opaque-2);
  --dgv-footer-text-color: var(--dgv-white);
  --dgv-footer-background: transparent;
  --dgv-footer-padding: .5rem 1rem;
  --dgv-footer-font-size: 1rem;
  --dgv-footer-icon-size: .6rem;
  --dgv-footer-font-weight: normal;
  --dgv-footer-border-top: .2rem solid var(--dgv-opaque-1);
  --dgv-footer-border-bottom: .2rem solid var(--dgv-opaque-1);
  --dgv-nav-button-text-color: var(--dgv-white);
  --dgv-nav-button-border: none;
  --dgv-nav-button-background: transparent;
  --dgv-nav-button-padding: .6rem;
  --dgv-nav-button-min-width: 2.2rem;
  --dgv-nav-button-disabled-opacity: .4;
  --dgv-nav-button-active-color: var(--dgv-accent);
  --dgv-nav-button-active-border: none;
  --dgv-nav-button-active-background: transparent;
  --dgv-nav-button-hover-color: var(--dgv-black);
  --dgv-nav-button-hover-border: none;
  --dgv-nav-button-hover-background: var(--dgv-accent);
  --dgv-button-text-color: var(--dgv-accent);
  --dgv-button-border: .1rem solid var(--dgv-accent);
  --dgv-button-padding: .4rem;
  --dgv-button-background-color: transparent;
  --dgv-button-hover-text-color: var(--dgv-black);
  --dgv-button-hover-background-color: var(--dgv-accent);
  --dgv-action-text-font-size: 1rem;
  --dgv-action-text-font-weight: normal;
  --dgv-action-text-color: var(--dgv-opaque-1);
  --dgv-action-text-hover-color: var(--dgv-accent);
  --dgv-input-padding: .4rem;
  --dgv-input-border: .1rem solid var(--dgv-opaque-1);
  --dgv-input-text-color: var(--dgv-black);
  --dgv-input-background: var(--dgv-white);
  --dgv-input-font-size: 1rem;
  --dgv-input-focus-border: var(--dgv-focus-outline);
  --dgv-filter-operator-item-color: var(--dgv-black);
  --dgv-filter-operator-item-opacity: .7;
  --dgv-filter-operator-item-hover-background-color: var(--dgv-accent);
  --dgv-filter-operator-item-hover-opacity: 1;
  --dgv-popup-border: .1rem solid var(--dgv-accent);
  --dgv-popup-background: var(--dgv-base);
  --dgv-popup-text-color: var(--dgv-black);
  --dgv-popup-padding: 1rem;
  --dgv-popup-z-index: 9999;
  --dgv-popup-font-size: 1.1rem;
  --dgv-toggle-size: 1.1rem;
  --dgv-toggle-background: var(--dgv-white);
  --dgv-toggle-color: var(--dgv-accent);
  --dgv-toggle-slider-color: var(--dgv-opaque-1);
  --dgv-toggle-padding: .3rem;
  --dgv-toggle-focus-border: .1rem solid var(--dgv-black);
  --dgv-loader-color: var(--dgv-opaque-1);
}