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.
Properties
| Prop name | Type | Default value | Description |
|---|---|---|---|
sourceData
| array | Show description | |
forcedPageSize
| number | Show description | |
automaticPageSize
| boolean | Show description | |
currentPage
| number | Show description |
Events
| Name | Type | Description |
|---|---|---|
go-to-page |
Number
| User wanted to change current page. |
column-width-changed |
number
| Event emitted when autosize algorithm finishes running. |
Slots
| Name | Description |
|---|---|
header | Use this slot to customize table’s headers |
empty | Use this slot to customize what’s displayed when table has no data |
body | Use this slot to customize how each data item is rendered |
footer | Use this slot to customize table’s footer and pagination |
footerLeadingAccessoryItem | Use this slot to add leading accessories to table’s footer without having to add pagination explicitly |
footerTrailingAccessoryItem | Use this slot to add trailing accessories to table’s footer without having to add pagination explicitly |
Constants
| Name | Value |
|---|---|
DEFAULT_PAGESIZE | Show definition |
Examples
Static table
Table with dynamic data
Headers
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.
Body
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 ofsourceDataarray, 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 insourceData.
Examples
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.
Pagination
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.
Examples
Default page size
Automatic page size
Sorting
You can use GeoTableSort to add sorting behaviour to
GeoTable.