open-vault/ui/lib/core/stories/info-table-row.md

2.9 KiB

InfoTableRow

InfoTableRow displays a label and a value in a table-row style manner. The component is responsive so that the value breaks under the label on smaller viewports.

Params

Param Type Default Description
value any The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render Yes for true and No for false.
label string null The display name for the value.
helperText string null Text to describe the value displayed beneath the label.
alwaysRender Boolean false Indicates if the component content should be always be rendered. When false, the value of value will be used to determine if the component should render.
[type] string "array" The type of value being passed in. This is used for when you want to trim an array. For example, if you have an array value that can equal length 15+ this will trim to show 5 and count how many more are there
[isLink] Boolean true Passed through to InfoTableItemArray. Indicates if the item should contain a link-to component. Only setup for arrays, but this could be changed if needed.
[modelType] string null Passed through to InfoTableItemArray. Tells what model you want data for the allOptions to be returned from. Used in conjunction with the the isLink.
[queryParam] String Passed through to InfoTableItemArray. If you want to specific a tab for the View All XX to display to. Ex: role
[backend] String Passed through to InfoTableItemArray. To specify secrets backend to point link to Ex: transformation
[viewAll] String Passed through to InfoTableItemArray. Specify the word at the end of the link View all.
[tooltipText] String Text if a tooltip should display over the value.
[isTooltipCopyable] Boolean Allows tooltip click to copy
[defaultShown] String Text that renders as value if alwaysRender=true. Eg. "Vault default"

Example

<InfoTableRow @value={{5}} @label="TTL" @helperText="Some description"/>

See