vue-input-components

List Component

A flexible data list component for Vue 3 with sorting, filtering, row interactions, and optional CSV/XLSX export.

Dependencies

The List component uses floating-vue for tooltip functionality. This is included as a dependency and works out of the box—no additional setup required beyond standard component installation.

Properties

Property Type Default Description
columns ListColumn[] required Column definitions for rendering and behavior
data ListRowData[] required Row data source
actions ListActionProps[] undefined Header actions rendered on the right side
CSVDownload string undefined Enables CSV export and controls output file name
XLSXDownload string undefined Enables XLSX export and controls output file name
filter { placeholder?: string } undefined Enables filter input in the header
loading boolean false Shows loading state overlay
emptyMessage string 'No data available' Message shown when no rows are visible
presentation 'default' \| 'minimal' 'default' Visual density/style
width string '100%' Outer component width

ListColumn Interface

interface ListColumn {
  key: string
  label: string
  type?: 'text' | 'number' | 'date' | 'datetime' | 'time' | 'action' | 'checkbox' | 'icon' | 'email'
  align?: 'left' | 'center' | 'right'
  sortable?: boolean
  filterable?: boolean
  width?: string
  minWidth?: string
  maxWidth?: string
  cellClasses?: Record<string, (value: any) => boolean>
  headerTooltip?: string
  cellTooltip?: boolean
}

Column Properties Explained

ListRowData Special Fields

In addition to your own row fields, these reserved helpers are supported:

Field Type Description
excludeFromSort boolean Keeps row out of sort operations
excludeFromFilter boolean Keeps row visible even while filtering
fixed 'top' \| 'bottom' Pins excluded rows at top or bottom
selected boolean Adds selected row style
class string Adds list__row--{class} CSS modifier

Events

Event Payload Description
row-click (row: any, index: number) Emitted when a row is clicked
row-dblclick (row: any, index: number) Emitted when a row is double-clicked
download ({ type: 'csv' \| 'xlsx'; fileName: string }) Emitted after export is triggered

Slots

Slot Description
header_extras Renders custom content in the header, between filter and actions

Exposed Methods

Method Description
focus() Focuses the filter input
blur() Blurs the filter input
clearFilter() Clears the current filter text

Tooltips

The List component supports tooltips in two ways:

Header Tooltips

Set headerTooltip on a column to show a tooltip when hovering over the column header:

{
  key: 'email',
  label: 'Email',
  headerTooltip: 'Contact email address'
}

Cell Tooltips

Set cellTooltip: true on a column to show the cell’s formatted value in a tooltip on hover:

{
  key: 'joined',
  label: 'Joined',
  type: 'date',
  cellTooltip: true  // Shows formatted date on hover
}

Cell tooltips automatically format values according to their column type:

Action Tooltips

List action buttons can also show tooltips via the tooltip property:

{
  id: 'edit',
  label: 'Edit',
  icon: 'edit',
  tooltip: 'Edit user details',
  onActionClick: (row) => { /* ... */ }
}

Behavior Notes

Example

<template>
  <List
    :columns="columns"
    :data="rows"
    :actions="headerActions"
    :filter="{ placeholder: 'Search users...' }"
    CSVDownload="users"
    XLSXDownload="users"
    @row-click="onRowClick"
    @row-dblclick="onRowDoubleClick"
    @download="onDownload"
    width="500px"
  >
    <template #header_extras>
      <div>Total users: </div>
    </template>
  </List>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { List } from '@a-vision/vue-input-components'
import type {
  ListColumn,
  ListRowData,
  ListActionProps,
} from '@a-vision/vue-input-components'

const headerActions = ref<ListActionProps[]>([
  {
    id: 'new-user',
    label: 'New user',
    icon: 'add',
    onActionClick: () => console.log('Create user'),
  },
])

const columns: ListColumn[] = [
  { 
    key: 'name', 
    label: 'Name', 
    type: 'text', 
    sortable: true, 
    filterable: true,
    cellTooltip: true,
  },
  { 
    key: 'email', 
    label: 'Email', 
    type: 'email', 
    sortable: true, 
    filterable: true,
    headerTooltip: 'Contact email address',
  },
  { 
    key: 'joined', 
    label: 'Joined', 
    type: 'date', 
    sortable: true,
    cellTooltip: true,
  },
  { key: 'actions', label: 'Actions', type: 'action', align: 'right', width: '10rem' },
]

const rows = ref<ListRowData[]>([
  {
    name: 'John Doe',
    email: 'john@example.com',
    joined: '2024-03-15',
    actions: [
      { 
        id: 'edit', 
        label: 'Edit', 
        icon: 'edit', 
        tooltip: 'Edit user information',
        onActionClick: (row) => console.log('Edit', row) 
      },
      {
        id: 'delete',
        label: 'Delete',
        icon: 'trash',
        tooltip: 'Delete this user',
        onActionClick: (row) => console.log('Delete', row),
      },
    ],
  },
])

const onRowClick = (row: any, index: number) => console.log('row-click', row, index)
const onRowDoubleClick = (row: any, index: number) => console.log('row-dblclick', row, index)
const onDownload = (payload: { type: 'csv' | 'xlsx'; fileName: string }) => console.log(payload)
</script>