Jump To:

  1. Demos
    1. Standard Data Table
    2. Striped Table
    3. Large First Column
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

For tabular data in native HTML tables. Note, this component can be used with the Vue sticky table plugin.

Demos

Standard Data Table

A native HTML table styled for data display, including headers, footers, and a caption.

Quarterly Performance Summary
Category Previous Q Current Q Change
Product Sales $45,000 $52,000 +15%
Service Fees $12,000 $11,500 -4%
Total $57,000 $63,500 +11%
HTML 
<table class="data-table">
  <caption>Quarterly Performance Summary</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Previous Q</th>
      <th>Current Q</th>
      <th>Change</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product Sales</td>
      <td>$45,000</td>
      <td>$52,000</td>
      <td style="color: green;">+15%</td>
    </tr>
    <tr>
      <td>Service Fees</td>
      <td>$12,000</td>
      <td>$11,500</td>
      <td style="color: red;">-4%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$57,000</td>
      <td>$63,500</td>
      <td>+11%</td>
    </tr>
  </tfoot>
</table>

Striped Table

Using the `data-table--striped` modifier to alternate background colors for rows.

Employee Name Department Status
Jane Doe Engineering Active
John Smith Marketing On Leave
Alice Johnson Product Active
HTML 
<table class="data-table data-table--striped">
  <thead>
    <tr>
      <th>Employee Name</th>
      <th>Department</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane Doe</td>
      <td>Engineering</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>John Smith</td>
      <td>Marketing</td>
      <td>On Leave</td>
    </tr>
    <tr>
      <td>Alice Johnson</td>
      <td>Product</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Large First Column

The `data-table--large-first` modifier ensures the first column has a larger minimum width, useful for row labels.

Specification Feature Description Value
Memory (RAM) 32GB DDR5
Processor (CPU) 8-Core 4.2GHz
HTML 
<table class="data-table data-table--large-first">
  <thead>
    <tr>
      <th>Specification Feature Description</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Memory (RAM)</td>
      <td>32GB DDR5</td>
    </tr>
    <tr>
      <td>Processor (CPU)</td>
      <td>8-Core 4.2GHz</td>
    </tr>
  </tbody>
</table>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "cell-padding" : (0.5em,),
  "text-align" : left,
  "type-size" : "small",
  "vertical-align" : top,
  "background-color" : white,
  "header-background-color" : #f5f4f4,
  "body-background-color" : white,
  "footer-background-color" : #f3f3f3,
  "color" : "type-secondary",
  "header-color" : "headline",
  "footer-color" : null,
  "line-height" : true,
  "column-min-width" : 6em,
  "first-column-large-min-width" : 15em,
  "border-width" : 1px,
  "border-color" : #dddddd,
  "striped-row-background-color" : #eeeeee,
  "muted-row-background-color" : #ccc,
  "muted-row-border-color" : null,
  "highlighted-row-background-color" : #ccc,
  "highlighted-row-border-color" : null,
  "large-header-cell-padding-y" : 1em,
  "caption-type-size" : "large",
  "caption-background-color" : null,
  "caption-font-weight" : bold,
  "caption-border-bottom" : null,
  "caption-margin" : (0,),
  "caption-padding" : (0.65em 0),
  "caption-text-align" : left,
  "extra-selector" : ".wysiwyg table"
);
File Information
  • File: _data-table.scss
  • Group: data-table
  • Type: variable
  • Lines (comments): 25-56
  • Lines (code): 58-89

Map Properties

Name Type Default Description
cell-padding Dimension (0.5em,) Padding of the th and td elements.
text-align CssValue left Text align of the table.
type-size String "small" Font size of the table.
vertical-align CssValue top Vertical align for td/th
background-color Color white Background color of table container.
header-background-color Color #f5f4f4 Background color of the the table header.
body-background-color Color white Background color of table body.
footer-background-color Color #f3f3f3 Background color of table footer.
color Color "type-secondary" Font color of the table.
header-color Color "headline" Font color for the table header.
footer-color Color null Font color for the table footer.
line-height Number true Line height for the table.
column-min-width Dimension 6em Min-width of the th element.
first-column-large-min-width Dimension 15em When using "--large-first" style, the min width of the first th element.
border-width Dimension 1px Border width of the table.
border-color Color #dddddd Border color for the table.
striped-row-background-color Color #eeeeee Background color for even rows if using "--striped" styling.
muted-row-background-color Color #ccc Background color for odd rows if using "--striped" styling.
muted-row-border-color Color null Border color for odd rows if using "--striped" styling.
highlighted-row-background-color Color #ccc Background color row if using "__row-highlighted" styling.
highlighted-row-border-color Color null Border color row if using "__row-highlighted" styling.
large-header-cell-padding-y Dimension 1em Vertical padding of header if using "--large-header" styling.
caption-type-size String "large" Type size of table caption.
caption-background-color Color null Background color of table caption.
caption-font-weight CssValue bold Font weight of caption.
caption-border-bottom CssBalue null Bottom border of the caption.
caption-margin Dimension (0,) Margin of the caption.
caption-padding Dimension (0.65em 0) Padding of the caption.
caption-text-align CssValue left Text align of the caption.
extra-selector String ".wysiwyg table" Additional selectors to include table styling.

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _data-table.scss
  • Group: data-table
  • Type: mixin
  • Lines (comments): 91-94
  • Lines (code): 96-98

Examples

@include ulu.component-data-table-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Output component stylesheet

File Information
  • File: _data-table.scss
  • Group: data-table
  • Type: mixin
  • Lines (comments): 110-112
  • Lines (code): 114-222

Examples

@include ulu.component-data-table-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _data-table.scss
  • Group: data-table
  • Type: function
  • Lines (comments): 100-103
  • Lines (code): 105-108

Examples

@include ulu.component-data-table-get("property");

Parameters

Name Type Description
$name Map Name of property

Require