Table

The basic table component allows you to render corporate design tables using a dictionary-based configuration. Two dictionaries are required: the columns description and the options for the table. After these are defined, any data can be passed and the table will render accordingly.

Columns

The columns are described in the columns dictionary. The dictionary contains the following keys:

  • name: The name of the column, which will be displayed in the table header.

  • key: The key of the data, which will be displayed in the table body.

  • type: How the data is displayed. Available types: icon, button, button-group, toggle, badge, datetime, icon-selector. Defaults to text.

  • sortable: If true, a sort icon will be shown and the column can be sorted.

  • sortKey: Optional key for sorting. If not set, the key is used.

  • filter: If defined, the column can be filtered using the provided array.

Types

Icon: Displays a field value as an icon. The value must be a valid icon name.

<TableIcon :value="row.typeIcon" :color="row.iconColor" />

Props:

  • value – Icon name (string, required)

  • color – Optional color string

Button: Displays a field value as a clickable button. Actions, icons, and titles can be defined and emitted on click.

<TableButton
    title="Edit"
    icon="pencil"
    action="edit"
    :params="row"
    :options="{ specifiers: 'btn-outline-primary btn-sm' }"
    @action="onRowAction"
/>

Props:

  • title (required)

  • action (required)

  • icon (optional)

  • params (optional)

  • options – supports iconOnly and specifiers

Emits: @action → { action, params, stats }

Button Group: Displays multiple buttons as a group. Each entry follows the same schema as a button.

<ButtonGroup
    :buttons="[
      { title: 'Edit',   action: 'edit',   icon: 'pencil' },
      { title: 'Delete', action: 'delete', icon: 'trash'  }
    ]"
    :params="row"
    @action="onRowAction"
/>

Props:

  • buttons (required)

  • params (optional)

Emits: @action

Badge: Renders a colored badge with optional tooltip. Class and label mappings can be provided via options.

<TableColumnBadge
    :value="row.status"
    :options="{
      classMapping: { active:'bg-success', pending:'bg-warning', default:'bg-secondary' },
      keyMapping:   { active:'Active',     pending:'Pending',     default:'Unknown' },
      tooltip: 'Current status'
    }"
/>

Props:

  • value – string or object ({ text, class, tooltip })

  • options – mappings (classMapping, keyMapping, tooltip)

Toggle: Displays a boolean value as a switch input. Emits an action whenever the state changes.

<TableToggle
    title="Active"
    action="toggle-active"
    :value="row.active"
    :params="row"
    @action="onRowAction"
/>

Props:

  • title (required)

  • action (required)

  • value (boolean, required)

  • params (optional)

Emits: @action → { action, params, value }

Datetime: Displays the value as a datetime string. The value must be a valid datetime.

Icon Selector: Displays the value as an icon selector. The value must be a valid icon name. Also supports emitting actions.

Options: The options are described in the options dictionary. The dictionary contains the following keys:

  • striped – striped rows

  • hover – hoverable rows

  • bordered – bordered table

  • borderless – borderless table

  • small – compact rows

  • pagination – enable pagination (false or number)

Pagination

Pagination is handled by the BasicTablePagination component.

<BasicTablePagination
    :pages="pages"
    :current-page="currentPage"
    :items-per-page="limit"
    :items-per-page-list="[10,25,50,100]"
    :show-pages="3"
    @updatePage="p => currentPage = p"
    @updateItemsPerPage="n => limit = n"
/>

Props:

  • pages (required)

  • currentPage (required)

  • itemsPerPage (default: 10)

  • itemsPerPageList (default: [10,25,50,100])

  • showPages (default: 3)

Emits:

  • @updatePage(newPage)

  • @updateItemsPerPage(n)