Table

Create dynamic nice looking tables.

Usage

To render a dynamic table use vk-table combined with one or more vk-table-column columns. The column defines the row cell key and the optional head title.

<vk-table data>
  <vk-table-column title cell></vk-table-column>
  <vk-table-column title cell></vk-table-column>
</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Modifiers

Striped modifier

Add zebra-striping to the table by setting the striped prop.

<vk-table striped>...</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Hoverable modifier

Set the hoverable prop to display a hover state on the table rows.

<vk-table hoverable>...</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Narrowed modifier

Set the narrowed prop to make the table cells more compact.

<vk-table narrowed>...</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Justified modifier

To remove the outer padding of the first and last column so that they are flush with the table, set the justified prop.

<vk-table justified>...</vk-table>

Preview
Markup

Name	Biography
John A. Smith	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Joan B. Jones	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Divided modifier

The divided prop adds a divider between table rows and is enabled by default. You can explicitly disable it passing a falsy value.

<vk-table :divided="false">...</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Selectable

Set the row-selectable or rows-selectable props to enable the table single or multiple row selection. Sync the selected rows with the selected-rows prop.

<vk-table row-selectable :selected-rows="[]">
  <vk-table-column title cell></vk-table-column>
  <vk-table-column title cell></vk-table-column>
</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Note Remember to set the prop with the sync modifier.

Column Select

Use the vk-table-column-select to render a column of checkboxes indicating the current row select state. It can be combined with the row selection feature.

<vk-table>
  <vk-table-column-select></vk-table-column-select>
  <vk-table-column></vk-table-column>
</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div> element and add the .uk-overflow-auto class from the UIkit Utility component. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.

<div class="uk-overflow-auto">
  <vk-table>...</vk-table>
</div>

Preview
Markup

Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading

Stack on small viewports

If you want table columns to stack on small screens, set the responsive prop.

<vk-table responsive>...</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Note Resize the browser window to see the columns stack.

Sorting

As vk-table is not aware of the full extent of the data, it cannot take care of the sorting. The actual sorting must be abstracted, for example in the API or a simple component wrapper, and indicate the current sort state with the sortedBy prop. The value is expected to be an object composed of cell keys that are being ordered with it direction, asc or desc. E.g. { name: 'asc', city: 'desc' }.

To render sortable columns use the vk-table-column-sort column component. It will read the sortedBy prop to show the order arrow as well as to trigger a sort update through prop syncing. It supports multiple sorting by holding down the shift key.

<vk-table data sortedBy="{ cell: dir }">
  <vk-table-column-sort title cell>...</vk-table-column-sort>
  <vk-table-column-sort title cell>...</vk-table-column-sort>
</vk-table>

Preview
Markup

Name	City	State
John A. Smith	San Francisco	CA
Joan B. Jones	New York	NY
Bob C. Uncle	Los Angeles	CA

Note The demo doesn't sort the data, it only displays the UI updates.

Slots

You can customize the cell rendering with the column default and empty slots.

Slot	Description
`Default`	Use it to alter the cell display or to set a static content.
`Empty`	Use it to render default information or to inform about missing data.

Both slots have access to a scope of, { cell, row, selected, allSelected }

<vk-table data>
  <vk-table-column>Static Content</vk-table-column>
  <vk-table-column cell>
    <div slot-scope="scope">...</div>
    <div slot="empty" slot-scope="scope">...</div>
  </vk-table-column>
</vk-table>

Preview
Markup

	Name	Age
	John A. Smith	24 years old
	Joan B. Jones	Age unknown
	Bob C. Uncle	Age unknown

Utilities

To optimize the display of table cells and their specific content, you can use one of the following utils or methods.

Util	Description
Text shrink	To reduce the column width to fit its content set the `shrinked` prop.
Text expand	To expand the column width to fill the remaining space and apply a min-width, use the `expanded` prop.
Text truncate	When applying a fixed width to a column, you might want to enable the `truncated` prop in order to truncate the text.
Text nowrap	Set the `unwrapped` prop to keep the cell text from wrapping, for example when using the `shrinked` prop.
Cell link	To link an entire cell, set the `linked` prop to a column and insert an `<a>` element using one of the slots. Add the `.uk-link-reset` class from the UIkit Link component to reset the default link styling.
Cell width	Set one of the classes from the UIkit Width component, without the prefix, to the `width` prop on a column in order to modify the column width.
Cell alignment	To vertically center cell content, set the `cell-middle` prop to the table or a column for a more specific selection. To apply the alignment to an entire row, use the table `rowClass` prop function and return `.uk-table-middle` class.
Preserve width	Since images are responsive by default in Vuikit, using an image inside a `shrinked` column would reduce the image width to 0. To prevent this behavior, add the `.uk-preserve-width` class from the UIkit Base component to the `<img>` element.

<!-- Text shrink -->
<vk-table-column shrinked></vk-table-column>

<!-- Text expand -->
<vk-table-column expanded></vk-table-column>

<!-- Text truncate -->
<vk-table-column truncated></vk-table-column>

<!-- Text nowrap -->
<vk-table-column unwrapped></vk-table-column>

<!-- Cell link -->
<vk-table-column linked>
  <a class="uk-link-reset" href=""></a>
</vk-table-column>

<!-- Cell width -->
<vk-table-column width="small"></vk-table-column>

<!-- Cell alignment -->
<vk-table cell-middle></vk-table>
<vk-table>
  <vk-table-column cell-middle></vk-table-column>
</vk-table>

<!-- Preserve width -->
<vk-table-column linked>
  <img class="uk-preserve-width">
</vk-table-column>

Preview
Markup

Linked	Truncate	Shrink + Nowrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.	Lorem ipsum dolor

Props

vk-table

Name	Type	Default	Description
`data`	Array	--	The table rows data, an array composed of `Objects`. Each object is a row, and each object key value is a cell.
`rowKey`	String	`id`	The row key that represent it id. Used mostly for sorting and selecting rows, if a row is missing the id value, the row index will be used instead.
`rowClass`	Function	--	A function for adding custom row classes. It provides the current row being rendered and expects a string back.
Sort related
`sortedBy`	Object	--	The object representing the order state. Check the sortable section for more information.
Select related
`selectedRows`	Array	`[]`	The array representing the currently selected rows. Check the selectable section for more information.
`rowSelectable`	Boolean	`false`	Enables single row selection on row click.
`rowsSelectable`	Boolean	`false`	Enables multiple row selection on row click.
Style Modifiers
`divided`	Boolean	`true`	Adds a divider between table rows. Check modifiers section for more details.
`narrowed`	Boolean	`false`	Make the table cells more compact. Check modifiers section for more details.
`striped`	Boolean	`false`	Adds zebra-striping to the table. Check modifiers section for more details.
`hoverable`	Boolean	`false`	Displays a hover state on the table rows. Check modifiers section for more details.
`justified`	Boolean	`false`	Removes the outer padding of the first and last column. Check modifiers section for more details.
Utils
`responsive`	Boolean	`false`	Forces the table columns to stack on small screens. Check responsive section for more details.
`cellMiddle`	Boolean	`false`	Vertically centers all columns content. Check the utilities section for more details.

vk-table-column-*

Name	Type	Default	Description
`title`	String	--	The column head title.
`cell`	String	--	The cell key representing the data inside the row object.
`cellClass`	String	--	A custom class to apply to all column cells.
Utils
`shrinked`	Boolean	`false`	Reduces the cell width to fit its content.
`expanded`	Boolean	`false`	Expands the column width to fill the remaining space.
`truncated`	Boolean	`false`	Truncates the text when it doesn't fit it container.
`unwrapped`	Boolean	`false`	Keeps the cell text from wrapping.
`width`	String	--	Set one of the classes from the UIkit Width component in order to modify the column width.
`linked`	Boolean	`false`	Sets the entire cell a link effect. Check utilities section for more details.
`cellMiddle`	Boolean	`false`	Vertically centers the column cell content.
Select Specific
`headless`	Boolean	`false`	Disables the column head display.

Guide