vcl-data-grid

Data grid to present tabular data.

Usage no npm install needed!

<script type="module">
  import vclDataGrid from 'https://cdn.skypack.dev/vcl-data-grid';
</script>

README

VCL data-grid

Data grid to present tabular data.

Features

This component does not use HTML table element and its inherent styling rules; instead its layout is based on a CSS flexbox.

Usage

basic example

Classes

  • vclDataGrid
  • vclDGRow
  • vclDGCell

Modifiers

  • vclDGAlignRight: align cell content to the right
  • vclDGAlignCentered: align cell content to the left
  • vclDGVAlignMiddle: vertically align cell content to the middle
  • vclDGVAlignBottom: vertically align cell content to the bottom

Variables

Demo

example.html on GH-pages.