vcl-data-list

Tabular data browser, selection list and navigation menu.

Usage no npm install needed!

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

README

VCL data-list

Tabular data browser, selection list and navigation menu.

Features

A versatile browser for tabular data where the actual layout of a single item is more flexible as with a normal table. It can be easily made responsive due to the layout flexibility. It can have an optional header and footer. Items of the list can visually suggest their selectability.

Usage

As property editor. The edit button should only be shown on hover but this is in scope of the application CSS.

basic example

As data scroller for narrow viewports, without header and footer.

narrow example

Classes

  • vclDataList
  • vclDataListHeader
  • vclDataListBody
  • vclDataListItem
  • vclDataListFooter

Modifiers

For vclDataList

  • vclDivider: Show a vertical divider (border) between items.
  • vclItemHoverHighlight: Highlight a item when hovered.
  • vclItemSelectability: Suggest through styling that the item is selectable.
  • vclNoBorder: No borders.

For vclDataListItem

  • vclSelected

Variables

  • --data-list-bg-color
  • --data-list-header-bg-color
  • --data-list-footer-bg-color
  • --data-list-border-color
  • --data-list-item-separator-border-color
  • --data-list-item-hover-color
  • --data-list-item-bg-hover-color
  • --data-list-item-selected-color
  • --data-list-item-bg-selected-color

Demo

example.html on GH-pages.