Vuance UI Kit

Layout

Table

Structured data view with sorting, selection, custom cells, and pagination.

Table

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Interactive preview

Changes are reflected in the example and source.

Properties

Selectable

Pagination

Vue

<m-table
  :columns='[{&quot;key&quot;:&quot;name&quot;,&quot;label&quot;:&quot;Component&quot;,&quot;sortable&quot;:true},{&quot;key&quot;:&quot;status&quot;,&quot;label&quot;:&quot;Status&quot;,&quot;sortable&quot;:true}]'
  :data='[{&quot;id&quot;:1,&quot;name&quot;:&quot;Button&quot;,&quot;status&quot;:&quot;Ready&quot;},{&quot;id&quot;:2,&quot;name&quot;:&quot;Dialog&quot;,&quot;status&quot;:&quot;Review&quot;},{&quot;id&quot;:3,&quot;name&quot;:&quot;Table&quot;,&quot;status&quot;:&quot;Ready&quot;}]'
  :page-size="3"
  :total-items="12"
  :selectable="false"
  :pagination="false"
 />