Get started



You can find it on stackblitz: stackblitz-guiexpert-vue3-simple.


Add the following NPM package to your existing vue project (run this in your project root directory):

Terminal window
npm install --save @guiexpert/table @guiexpert/vue3-table

Add global table CSS

To add the global guiexpert CSS file in your Vue project, you can include the file in the header of the index.html file.

  • Open the index.html file of your project.

  • Look for the header section and add the link tag. It typically looks like this:

<!DOCTYPE html>
<html lang="en">
<link href="" rel="stylesheet" />

You will also find the main.css in the downloaded node module: node_modules/@guiexpert/table/css/main.css.

Create an example component

Create a component and include the guiexpert tag in the template of your component


Be sure, that your div container expands. Add this CSS rule to your component’s style.

.table-div {
width: 100%;
height: 100%;

Create a table model

Add a tableModel property and a onTableReady method to the component:

const tableModel: TableModelIf = TableFactory
headerData: [
['Header 1', 'Header 2']
bodyData: [
['Text 1a', 'Text 2a'],
['Text 1b', 'Text 2b'],
function onTableReady(api: TableApi) {"onTableReady API:", api);
Read the docs Try it out Demo models on github