Rolling Table

⭐Star

TuiRollingTable is a scrolling table component specifically designed for data visualization dashboards. Built on the TuiRolling engine, it supports fixed headers, seamless content scrolling, leaderboard highlighting, and highly customizable cell rendering. It supports both pure data-driven rendering and the embedding of charts, buttons, or images via slots.

Basic Usage

Basic Data Rendering

The simplest usage is to define the table header using header and pass a data array into TuiRollingTableRow.

• header: An array of table header titles.
• visibleLength: The number of rows displayed in the visible area.

<script setup>
import { ref } from 'vue';

const tableHeader = ['Rank', 'Region', 'Sales', 'Ratio'];
const tableData = ref([
  [1, 'Beijing', '12,420', '30%'],
  [2, 'Shanghai', '10,230', '25%'],
  [3, 'Guangzhou', '8,100', '20%'],
  [4, 'Shenzhen', '6,540', '15%'],
  [5, 'Chengdu', '4,320', '10%']
]);
</script>

<template>
  <div style="height: 300px">
    <TuiRollingTable 
      :header="tableHeader" 
      :visibleLength="4" 
      autoRolling
    >
      <TuiRollingTableRow 
        v-for="(row, index) in tableData" 
        :key="index" 
        :index="index" 
        :data="row"
      />
    </TuiRollingTable>
  </div>
</template>

Column Configuration

The component provides a series of properties to finely control column performance.

• columnWidths: Defines an array of column widths. Supports numbers (px) or null (auto-expand).
• columnAligns: Defines an array of alignment methods ('start', 'center', 'end').
• hasIndexCol: Whether to automatically add a serial number to the first column.
• showRankings: Whether to enable highlighting for the top three items (requires hasIndexCol to be enabled).

<TuiRollingTable 
  :header="['Name', 'Type', 'Status', 'Time']"
  :columnWidths="[null, 100, 80, 150]"
  :columnAligns="['start', 'center', 'center', 'end']"
  hasIndexCol
  showRankings
>
  ...
</TuiRollingTable>

Appearance and Style

TuiRollingTable supports deep customization of appearance through Props or CSS Variables to adapt to different dashboard themes.

Via Props

Set colors directly through attributes:

• headerBG / headerFC: Background and text color of the header.
• oddRowBG / evenRowBG: Background colors for odd and even rows (to achieve zebra striping).
• rowBD: Row border color.

<TuiRollingTable 
  headerBG="#1a3c6e"
  headerFC="#00ffff"
  oddRowBG="rgba(0, 255, 255, 0.05)"
  rowBD="rgba(0, 255, 255, 0.2)"
>
  ...
</TuiRollingTable>

Via CSS Variables

Define variables in the parent container to achieve more complex style control (such as gradients).

.my-custom-table {
  --tui-rolltb-head-bg: linear-gradient(90deg, #00c6ff, #0072ff);
  --tui-rolltb-head-fc: #fff;
  --tui-rolltb-head-lh: 50px; /* Header height */
  --tui-rolltb-col-fc: #eee;  /* Cell text color */
}

Advanced Column Types

Through the columnTypes attribute, you can define special column types, such as percentage progress bars or operation bars.

Progress Bar Column (Percent)

Set the corresponding column type to 'percent' and configure it with progressConfig.

<TuiRollingTable 
  :header="['Project', 'Progress']"
  :columnTypes="[null, 'percent']"
  :progressConfig="{
    unit: 'k Tons',
    strokeWidth: 12,
    thresholds: { warning: 50, success: 80 }
  }"
>
  ...
</TuiRollingTable>

Operation Bar Column (Operation)

Set the type to 'operation' and define buttons via the operation attribute. Listen to the @operation event to handle clicks.

<script setup>
const ops = [
  { label: "View", value: "view", type: "primary" },
  { label: "Delete", value: "del", type: "danger" }
];
const handleOp = ({ index, row, value }) => {
  console.log('Clicked:', value, 'Row Data:', row);
};
</script>

<template>
  <TuiRollingTable 
    :header="['Name', 'Operation']"
    :columnTypes="[null, 'operation']"
    :operation="ops"
    @operation="handleOp"
  >
    ...
  </TuiRollingTable>
</template>

Slot Customization

For more complex content (such as placing images, tags, or custom components in cells), use TuiRollingTableCol with slots.

Note

When using the slot mode, TuiRollingTableRow does not need the data attribute; instead, write TuiRollingTableCol directly inside it.

<template>
  <TuiRollingTable :header="['Status', 'Details', 'Operation']">
    <TuiRollingTableRow 
      v-for="(item, index) in list" 
      :key="index" 
      :index="index"
    >
      <TuiRollingTableCol>
        <TuiTag :type="item.status === 'ok' ? 'success' : 'danger'">
          {{ item.status }}
        </TuiTag>
      </TuiRollingTableCol>
      
      <TuiRollingTableCol>{{ item.detail }}</TuiRollingTableCol>
      
      <TuiRollingTableCol>
        <TuiButton size="small" plain @click="doSomething(item)">Audit</TuiButton>
      </TuiRollingTableCol>
    </TuiRollingTableRow>
  </TuiRollingTable>
</template>

API Reference

TuiRollingTable Props

Property	Type	Default	Description
visibleLength	Number	5	Core. Number of rows displayed in the visible area.
header	Array	[]	Array of table header titles.
columnWidths	Array	[]	Array of column widths (px/null).
columnAligns	Array	[]	Array of column alignments (start, center, end).
columnTypes	Array	[]	Array of column types (string, percent, operation).
operation	Array	[]	Array of configuration objects for the operation bar.
hasIndexCol	Boolean	false	Whether to display the serial number column.
showRankings V0.0.6+	Boolean	false	Whether to enable highlighting for the top three ranks.
headerBG	String	-	Header background color.
oddRowBG	String	-	Odd row background color.
evenRowBG	String	-	Even row background color.
rowBD	String	-	Row border color.
fontColor	String	-	Global text color.
theadHeight	Number	-	Header height (px).
interval	Number	3000	Scrolling interval.
mode	String	'item'	Scrolling mode (item, page).
seamless	Boolean	true	Whether scrolling is seamless.
fillData	Boolean	false	Whether to fill data if insufficient.
progressConfig	Object	-	Configuration for progress bar columns.
resizeObserver	String	'global'	Size monitoring strategy.

TuiRollingTableCol Props

Property	Type	Default	Description
contentType	String	null	Content type hint (component, etc.) used for special style corrections.

TuiRollingTableRow Props

Property	Type	Default	Description
index	Number	Required	Row index.
data	Array	null	Row data (used in pure data mode).

Emits

Event Name	Description	Callback Parameters
operation	Triggered when an operation bar button is clicked.	{ index, row, value, label }
start	Triggered when scrolling starts.	-
rolling	Triggered during scrolling.	(offset)

Credits

Jiaming743

DataV scrollBoard

This component was inspired by the scrollBoard component in the @jiaminghi/data-view library. Having used that component heavily in earlier projects, the developer felt its functionality could be expanded, leading to this new implementation based on the TuiRolling component within the TechUI library.