Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
id | string | undefined | ID of this table. Should be unique. If not set hidden columns will not be restored on page reload. |
items | TItem[] | undefined | Your items to display in this table. Can be null. If there are no items in this list an empty placeholder will be displayed. |
title | string | undefined | Title of this table |
defaultSort | undefined | undefined | |
canExport | boolean | true | Can this table be exported (Excel, PDF)? |
canHide | boolean | true | Can you hide columns in this table? (Manage columns button). State will be saved in localstore if "id" property is set. |
canAdd | boolean | false | Can you add new items to this table? |
debug | undefined | false | |
isLoading | boolean | false | Boolean to show loading skeletons. |
isCommandbarExpanded | boolean | false | Boolean to show the commandbar expanded. |
isObedient | boolean | false | The new way of working |
itemsToRender | number | undefined | |
maxItemsToRender | number | undefined | If this property is set, the container's size will be determined by the specified number. However, if the number of available items is less than the specified number, the container's size will instead be determined by the actual count of items in the table. |
searchTerm | string | "" | Value of search input field in table. |
PUBLIC_APP_INSTANCE_NAME | undefined | "" | |
isFullscreen | boolean | false | Table will be in fullscreen mode if this is set to true. Or bind to this variable to get the fullscreen state |
hasFullscreen | boolean | false | If true, there will be a button to enter fullscreen mode. This doesnt disable fullscreen if set false, just the button to enter fullscreen will be hidden. |
hasHoverHighlight | boolean | true | If false, the table will not show the row hover highlight. |
hasSearchBar | boolean | true | If false, the search bar will be hidden. |
style | string | "" | additional css styles |
grid | undefined | undefined |
Events
| Name | Description |
|---|---|
add | Add event will be dispatched if user clicks on add button. |
Weitere dazugehörige Komponenten
TitleCol
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
width | string | "1fr" | Width of this column. You should avoid using min-content or fr. Simply use pixels. |
prop | string | undefined | Property of your model which will be displayed in this column. Will be used for export, search and sort. |
saveKey | string | undefined | undefined | Unique name (in this table) which will be used to store visible cols in local storage. Only needed if multiple columns use the same property. |
label | string | undefined | undefined | Label to display this column (usually used with i18n). |
title | string | undefined | undefined | Title to display when hovered. Defaults to label (usually used with i18n). |
sortFn | (a: any, b: any) => number | undefined | Custom function to sort your items by given prop. |
sortRowFn | ((a: any, b: any) => number) | undefined | undefined | Custom function to sort your items. In this function you will get your item instead of the property value. |
getExportValueFn | ((prop: any) => string | number | null | boolean | Promise<string | number | null | boolean>) | undefined | undefined | Custom "toString" method used in export. |
getExportValueRowFn | ((item: any) => string | number | null | boolean | Promise<string | number | null | boolean>) | undefined | undefined | Custom "toString" method which will pass your model as parameter instead of your property value. |
getAsStringFn | (prop: any) => string | Promise<string> | undefined | Custom "toString" method used to display only in table, not in export. |
isHiddenInExport | boolean | false | If true this column will be ignored in export but displayed in table. |
isHiddenInTable | boolean | false | If true this column will be hidden in table but visible in export. |
isLabelEmpty | boolean | false | If true this will only set the label for "Manage Columns" and "Export" (e.g. useful fpr Picture Column) |
isVisible | boolean | true | If false this column will not be initially visible (unless local storage says otherwise) |
canManage | boolean | true | If true this will allow the user to hide this column |
isSortable | boolean | true | If true this will allow the user to sort this column |
isResizable | boolean | false | If true this will allow the user to adjust the size of the column with the mouse |
wordWrapInExport | boolean | false | If true this will word wrap the text in cell in an excel export |
style | string | "" | additional css styles |
Beispiele
Simple Obedient Table
Example resizeable on the bottom right
Simple Table
undefined 2616
Less Simple Table
undefined 2616