GeoTable Ready 10.1.0+

GeoTable is a component designed to display large amounts of tabular data in a table environment, supporting pagination and sorting.


Prop name Type Default value Description
sourceData array Show description
forcedPageSize number Show description
automaticPageSize boolean Show description
currentPage number Show description


Name Type Description
go-to-page Number User wanted to change current page.
column-width-changed number Event emitted when autosize algorithm finishes running.


Name Description

Use this slot to customize table’s headers


Use this slot to customize what’s displayed when table has no data


Use this slot to customize how each data item is rendered

Use this slot to customize table’s footer and pagination


Use this slot to add leading accessories to table’s footer without having to add pagination explicitly


Use this slot to add trailing accessories to table’s footer without having to add pagination explicitly


Name Value
DEFAULT_PAGESIZE Show definition


Static table

Table with dynamic data


GeoTable instances need a least one header row, which can have as many cells as required. Header rows can be set up using header named slot. To set up a header row, put a GeoTableHeaderRow component as content of header named slot.

Multiple header rows

It is possible to show multiple header rows in a single table.

Customizing column's width

It is possible to set up a minimum, maximum and a forced width. This is applied on per-header-cell basis. When setting a header cell's columnMinWidth, column's final width won't be smaller than it. If there's a columnMaxWidth, column's final width won't exceed it.

If columnWidth is set then it will override any minimum or maximum width set.

By default columns will take the width needed to render their content in a single line, considering both, header and body content. However, you can make header cells opt out from this behaviour with property ignoreContentWidth.

To opt out of GeoTable automatic growing for some column, set property growingDisabled to true.


You'll usually want to display not only headers but also some data in table's body. Similar to headers, GeoTable has a body named slot just for that. However, there's an important difference: GeoTable will handle pagination automatically so instead of rendering one row per item you should render just one row, which will be used as template for all the rows being rendered.

Under the hood GeoTable is using Scoped Slots (opens new window) for that. The object passed to the scoped slot has the following shape:

  • item - a single entry of sourceData array, the one being rendered at the time.
  • index - the row number of the item being rendered. Note that this index is relative to the beginning of currently displayed page, not the absolute position of the item in sourceData.


Random data

Narrow table

Wide table

Customizable-width table

Empty state

If table has no content to be displayed, its empty slot will be rendered. You can use that slot to easily show an empty state for any table.


You can use GeoTablePagination to add pagination behaviour to a GeoTable.

By default GeoTable will display up to 10 rows of data. You can override this with a different value using forced-page-size property. Additionally, GeoTable can infer the amount of rows to be displayed if you prefer so. Setting automatic-page-size property to true will opt in to this feature.


Default page size

Automatic page size


You can use GeoTableSort to add sorting behaviour to GeoTable.