Table

Basic Usage

The Table component can be used with minimal configuration to display a dataset. At its core, it requires the data-source prop to provide the data to be rendered. By default, it automatically generates columns based on the keys of the objects in the data source.

<script setup lang="ts">
  const tableData = [
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 25 },
    { id: 3, name: 'Bob Johnson', age: 45 },
  ];
</script>
<template>
  <Table :data-source="tableData" />
</template>

In this example, the Table component renders a simple table using the tableData array. The data-source prop accepts an array of objects, where each object represents a row, and its keys (id, name, age) are used to automatically create columns. The component displays the data in a basic format with no additional configuration needed. This setup is ideal for quickly visualizing data without customization.

Column Configuration

The columns prop allows you to define the structure and behavior of each column in the Table component. It accepts an array of IColumn objects, where each object configures a single column.

dataField

The dataField property specifies the key in the data-source object that corresponds to this column's data. If not provided, the column may not display data unless inferred from the data source keys.

<template>
  <Table 
    :data-source="tableData" 
    :columns="[
      { dataField: 'name' }, 
      { dataField: 'color' }, 
      { dataField: 'weightGrams' }
    ]">
  </Table>
</template>

name

The name property provides an internal identifier for the column, useful for referencing in templates or logic.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', name: 'userName' }];
</script>

type

The type property specifies the data type of the column. This property determines the structure and behavior of the column, including how it handles filtering and editing.

"string" or "number"

When the type is set to "string" or "number", the column is configured to handle textual or numerical data respectively.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe', age: 30 }];
const columns = [
  { dataField: 'name', type: 'string' },
  { dataField: 'age', type: 'number', isFilter: true }
];
</script>

"select"

When the type is set to "select", the column is configured to handle dropdown selections.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, country: 'USA' }];
const columns = [{
  dataField: 'country',
  type: 'select',
  isFilter: true
}];
</script>

"date"

When the type is set to "date", the column is configured to handle date values.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, birthdate: '1990-01-01' }];
const columns = [{
  dataField: 'birthdate',
  type: 'date',
  isFilter: true
}];
</script>

caption

The caption property customizes the text displayed in the column header for better readability or localization. If not provided, it defaults to the capitalized dataField.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', caption: 'Full Name' }];
</script>

visible

The visible property controls whether the column is displayed, allowing you to hide or show the column without removing it from the configuration.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'id', visible: false }, { dataField: 'name' }];
</script>

isFilter

The isFilter property enables filtering for the column, allowing users to filter data in this column.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', isFilter: true }];
</script>

isSort

The isSort property enables sorting for the column, allowing users to sort data by this column.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', isSort: true }];
</script>

isResized

The isResized property enables manual resizing of the column by dragging, allowing users to adjust column width interactively.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', isResized: true }];
</script>

width

The width property sets the initial width of the column in pixels, defining a fixed width for consistent layout.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', width: 200 }];
</script>

minWidth

The minWidth property sets the minimum width of the column in pixels, ensuring the column doesn't shrink below a certain size, useful for resizing.

<template>
  <Table :data-source="tableData" :columns="columns" is-resized />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', minWidth: 100 }];
</script>

maxWidth

The maxWidth property sets the maximum width of the column in pixels, limiting how wide the column can grow during resizing.

<template>
  <Table :data-source="tableData" :columns="columns" is-resized />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', maxWidth: 300 }];
</script>

defaultFilter

The defaultFilter property sets an initial filter value for the column, pre-applying a filter when the table loads.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }];
const columns = [{ dataField: 'name', isFilter: true, defaultFilter: 'John' }];
</script>

defaultSort

The defaultSort property sets the initial sort order for the column, pre-sorting the table by this column on load.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const columns = [{ dataField: 'name', isSort: true, defaultSort: 'asc' }];
</script>

mask

The mask property applies an input mask to the column's values for display or editing, formatting values (e.g., phone numbers, prices) consistently.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, price: 1234.56 }];
const columns = [{ dataField: 'price', mask: 'price' }];
</script>

cellTemplate

The cellTemplate property specifies a slot name for custom rendering of cell content, allowing custom HTML or components for cell display.

<template>
  <Table :data-source="tableData" :columns="columns">
    <template #customName="{ value }">
      <strong>{{ value }}</strong>
    </template>
  </Table>
</template>

<script setup lang="ts">
const tableData = [{ id: 1, name: 'John Doe' }];
const columns = [{ dataField: 'name', cellTemplate: 'customName' }];
</script>

setCellValue

The setCellValue property allows you to define a function to customize how cell values are formatted or computed, overriding default value rendering for complex logic.

<template>
  <Table :data-source="tableData" :columns="columns" />
</template>

<script setup lang="ts">
const tableData = [{ id: 1, age: 30 }];
const columns = [{
  dataField: 'age',
  setCellValue: (column, value) => `${value} years`
}];
</script>

paramsFilter

The paramsFilter property allows you to provide partial options for filtering based on the data type specified in the type property. Depending on the type, you can customize the filter's behavior and appearance using the appropriate properties.

• For "string" or "number" types: Use options specific to input fields.
• For "select" type: Use options specific to select fields.
• For "date" type: Use options specific to date fields.

Refer to the relevant documentation for more details:

class

The class property allows you to apply custom CSS classes for various parts of the column, including the header, filter, and cell content.

Working with Data

Configure table functionality such as toolbar, sorting, filtering, search, and grouping for efficient data management.

Toolbar Table

The toolbar property configures the toolbar for the table. It can be enabled/disabled or customized using an object with specific options.

<Table
    :data-source="tableData"
    :toolbar="{ visible: true }">
</Table>

• visible: Determines whether the toolbar is displayed.
• search: Enables the search input in the toolbar.

By setting toolbar to true, the toolbar is enabled with default settings. Providing an object allows for detailed customization.

Sorting

The sort property enables and configures sorting for the table. You can activate it with default behavior or customize its appearance and functionality.

<Table
    :data-source="tableData"
    :sort="{ 
        visible: true, 
        icon: 'Bars' 
    }">
</Table>

• visible: Toggles the visibility of the sorting feature.
• icon: Specifies the sorting icon style ("Bars" or "Arrow").

Set sort to true for default sorting or provide an object for more control.

Filtering

The filter property enables row filtering in the table. It can be toggled or configured with advanced options.

<Table 
    :data-source="tableData" 
    :filter="{ 
        visible: true, 
        noFilter: 'No filters applied', 
        isClearAllFilter: true 
    }">
</Table>

• visible: Toggles the filtering feature.
• noFilter: Message displayed when no filters are applied.
• isClearAllFilter: Enables a "Clear All Filters" option.

Setting filter to true activates basic filtering, while providing an object allows for advanced configurations.

Search

The search property enables global search functionality across the table data.

<Table 
    :data-source="tableData"
    :search="true">
</Table>

Set search to true to allow users to search through the entire table content.

Grouping

The grouping property enables data grouping in the table. You can specify the grouping field or provide a configuration object.

<Table 
    :data-source="tableData" 
    :grouping="{ visible: true, groupField: 'category' }">
</Table>

• visible: Toggles the grouping feature.
• groupField: Specifies the field used for grouping.

Setting grouping to a field name (e.g., "category") groups rows by that field. Using an object provides further customization.

Count visible rows

The countVisibleRows property specifies the number of rows visible in the table. This is useful for limiting the number of rows displayed at once.

<Table 
    :data-source="tableData" 
    :countVisibleRows="10">
</Table>

Set countVisibleRows to the desired number to control how many rows are visible at a time.

Resized columns

The resizedColumns property enables or disables column resizing in the table. When enabled, users can adjust the width of columns by dragging them.

<Table 
    :data-source="tableData" 
    :resizedColumns="true">
</Table>

Set resizedColumns to true to allow column resizing.

countDataOnLoading

The countDataOnLoading property specifies the threshold at which the data loading indicator is triggered. This is particularly useful for improving the user experience during operations like search or filtering when working with large datasets.

Predefined values include 100, 1000, and 10000.

<Table
    :search="true"
    :data-source="tableData" 
    :countDataOnLoading="1000">
</Table>

Set countDataOnLoading to define the number of rows at which the loading indicator should appear. For example, during search or filtering, if the dataset exceeds this threshold, a loading state will be shown to enhance the user experience.

Summary

The summary property allows you to define and display summary rows in the table. This feature enables you to perform calculations (e.g., sum, min, max) on specified fields and customize how the results are displayed.

dataField

The dataField property specifies the data field for which the summary is calculated.

<Table 
    :data-source="tableData" 
    :summary="{ dataField: 'price' }">
</Table>

By setting dataField, you define the column that will be used for summary calculations.

name

The name property provides a custom name for the summary. This is helpful when displaying multiple summaries.

<Table
    :data-source="tableData"
    :summary="{ 
        dataField: 'price', 
        name: 'totalPrice' 
    }">
</Table>

Set name to give a meaningful label to your summary.

dataType

The dataType property specifies the data type for the summary. It ensures that the summary values are formatted correctly based on their type. The available options are:

• "string": For textual data.
• "number": For numerical data.
• "select": For dropdown or selection-based data.
• "date": For date-based data.

<Table
    :data-source="tableData"
    :summary="{ 
        dataField: 'price',  
        dataType: 'number' 
    }">
</Table>

Set dataType to match the type of data in the specified dataField. For instance, use "number" for numeric values or "date" for date-based fields.

type

The type property specifies the type of calculation performed for the summary. The available options are:

• "sum": Calculates the total of all values.
• "min": Finds the minimum value.
• "max": Finds the maximum value.
• "avg": Calculates the average of all values.
• "count": Counts the number of rows.

<Table 
    :data-source="tableData" 
    :summary="{ 
        dataField: 'price',
        dataType: 'number',
        type: 'sum' 
    }">
</Table>

Use type to configure the calculation logic for the summary.

displayFormat

The displayFormat property allows you to specify a custom format for displaying the summary result. You can use placeholders such as {0} to represent the calculated value.

Predefined formats include:

• "Sum: {0}" : Calculates the total of all values.
• "Min: {0}" : Finds the minimum value.
• "Max: {0}" : Finds the maximum value.
• "Avg: {0}" : Calculates the average of all values.
• "Count: {0}": Counts the number of rows.

<Table
    :data-source="tableData"
    :summary="{ 
        dataField: 'price', 
        type: 'sum', 
        displayFormat: 'Total: {0}' 
    }">
</Table>

Use displayFormat to customize how the summary result appears in the table.

customizeText

The customizeText property provides a function for dynamically customizing the summary text. This function receives the summary configuration and the calculated result as parameters and returns the formatted text.

<Table 
  :data-source="tableData" 
  :summary="{ 
    dataField: 'price', 
    type: 'sum', 
    customizeText: (summary, result) => `Total: ${result}` 
  }">
</Table>

Use customizeText for advanced text formatting based on the calculated summary value.

Pagination

The pagination property allows you to configure how table data is split into pages and how pagination controls are displayed.

visible

The visible property determines whether the pagination controls are displayed. The pagination property itself can be used in two ways:

1. Boolean Shortcut: If set to true, pagination is enabled with default settings.
2. Detailed Configuration: By providing an object, you can customize the pagination behavior.

<Table :data-source="tableData" pagination></Table>

This enables pagination with the default configuration.

<Table
    :data-source="tableData"
    :pagination="{ visible: true }">
</Table>

By using an object, you can explicitly configure pagination options such as visibility, page size, and more.

Setting visible to true ensures that pagination controls are displayed, while false hides them.

mode

The mode property specifies the styling mode of the pagination controls. Available options are:

• "filled": Default filled style.
• "outlined": Outlined style.
• "underlined": Underlined style.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        mode: 'outlined' 
    }">
</Table>

Set mode to customize the appearance of pagination controls.

startPage

The startPage property sets the initial page to display when the table is rendered.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        startPage: 2 
    }">
</Table>

Use startPage to set the default page number.

sizePage

The sizePage property determines the number of items displayed per page. Predefined values include 5, 15, 20, 50, 100, and 150.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        sizePage: 20 
    }">
</Table>

Set sizePage to control the number of rows displayed per page.

sizesSelector

The sizesSelector property defines the available page size options that users can select.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        sizesSelector: [10, 25, 50] 
    }">
</Table>

Set sizesSelector to provide a custom list of page size options.

visibleNumberPages

The visibleNumberPages property specifies how many page numbers are displayed in the pagination control. The allowed values are 5, 6, 7, 8, 9, 10, or 11.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        visibleNumberPages: 7 
    }">
</Table>

Set visibleNumberPages to control the number of visible page buttons.

isInfoText

The isInfoText property enables informational text about the pagination state, such as "Page 1 of 5."

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        isInfoText: true 
    }">
</Table>

Set isInfoText to true to display informative pagination text.

isPageSizeSelector

The isPageSizeSelector property enables a dropdown for selecting the page size.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        isPageSizeSelector: true 
    }">
</Table>

Set isPageSizeSelector to true to allow users to select the number of rows per page.

isHiddenNavigationButtons

The isHiddenNavigationButtons property hides the pagination navigation buttons (e.g., "Next" and "Previous") when set to true.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        isHiddenNavigationButtons: true 
    }">
</Table>

Set isHiddenNavigationButtons to true to hide navigation buttons.

class

The class property allows you to apply custom CSS classes to the pagination controls for styling.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        class: 'custom-pagination-class' 
    }">
</Table>

Set class to style the pagination controls with your custom CSS classes.

Slots

Slots are customizable sections of the table that allow you to inject your own content. The table provides predefined slots such as toolbar, header, footer, and group. Additionally, dynamic slots can be created for custom content.

#toolbar

The #toolbar slot allows you to customize the toolbar section of the table. This is useful for adding custom buttons, filters, or additional controls.