GeoTable is a component designed to display large amounts of tabular data
in a table environment, supporting pagination and sorting.
|User wanted to change current page.
|Event emitted when autosize algorithm finishes running.
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
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
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
column's final width won't be smaller than it. If there's a
column's final width won't exceed it.
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
To opt out of
GeoTable automatic growing for some column, set property
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
sourceDataarray, 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
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 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.
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