## Feature Examples ### Structure - description:

Table list item organizes different sets of information into columns. It can have any number of columns, which can be added through options.

Add any content to the column with the value prop.

Note that column width and alignment can be controlled separately.

- example: ```jsx Column 1 ), }, { value: ( Column 2 ), }, { value: ( Column 3 ), }, { value: ( Column 4 ), }, ]} />; ``` ### Padding - description:

Adjust vertical spacing by using verticalPadding and horizontalPadding props. It supports 6 options:

  • xxTiny
  • xTiny
  • tiny
  • small (default)
  • medium
  • large

    • Use tiny size set for compact lists that display more items in smaller space.

    Small (default) is a standard list size for most common cases.

    While medium and large are used to emphasize a few items.

    - example: ```jsx xxTiny }]} /> xTiny }]} /> Tiny }]} /> Small (default) }]} /> Medium }]} /> Large }]} /> ; ``` ### Drag handle size - description:

    Control a drag handle size with dragHandleSize prop. It supports two sizes:

  • small is used for more compact lists
  • large (default) is used for tables and more spacious UI layouts

    • - example: ```jsx Large drag handle (default), }, ]} /> Small drag handle, }, ]} /> ; ``` ### Draggable item indication - description:

    Control a drag grip icon with props:

  • draggable marks that the component can be dragged.
  • dragging indicates that the component is being dragged.
  • showDragHandleOnHover shows handle only on hover
  • dragDisabled show that the component can't be dragged.

    • Note, drag and drop logic is not part of this component. For this solution, go to .

    - example: ```jsx Draggable }]} /> Draggable active }]} /> Draggable on hover }]} /> Draggable disabled }]} /> ; ``` ### Border - description:

    Control the appearance of the component using the border prop.

    Use this property to emphasize the separation between items in a list.

    - example: ```jsx No border (default), }, ]} /> Border, }, ]} /> ; ``` ### Expandable - description:

    Give an ability to make an item expandable with expanded prop.

    - example: ```jsx () => { const [isExpanded, setIsExpanded] = React.useState(false); return ( <> setIsExpanded(!isExpanded)} options={[ { value: Expandable, }, ]} /> {isExpanded && ( Content )} ); }; ``` ### Selectable - description:

    Make an item selectable with the following props:

  • Use checkbox to enable the checkbox and show that the item can be selected.
  • checked changes the checkbox's default state to selected.
  • showSelectionBorder allows to turn off the blue strip indication when the item is selected
  • checkboxDisabled disables the checkbox.
  • selectable enables the selected state on the item
    • - example: ```jsx () => { const [checked, setChecked] = React.useState(false); return ( Checkbox }]} /> Selected checkbox }]} /> Selected checkbox without border }]} /> Disabled checkbox }]} /> setChecked((prev) => !prev)} checked={checked} options={[ { value: Selectable, }, ]} /> ); }; ``` ### Divider - description:

    Enable the bottom divider with showDivider, which visually separates the items.

    Note that the last item on the list shouldn't have a bottom divider.

    - example: ```jsx Divider off }]} /> Divider off }]} /> Divider off }]} /> Divider on }]} /> Divider on }]} /> Divider off }]} /> ; ``` ### Column width - description:

    Control the width of columns with the width prop. It supports all CSS grid-column-template values.

    - example: ```jsx Width depends on content ), width: 'max-content', }, { value: ( Fills available space ), width: '1fr', }, ]} />; ``` ### Column alignment - description:

    Align content inside of column cells using the align prop. It supports 3 values:

  • left
  • center
  • right
    • - example: ```jsx Left, align: 'left', }, { value: Center, align: 'center', }, { value: Right, align: 'right', }, ]} /> Left with longer text, align: 'left', }, { value: Center with longer text, align: 'center', }, { value: Right with longer text, align: 'right', }, ]} /> ; ``` ### Actionable - description:

    Make an item actionable with the onClick prop. Once enabled, the item becomes interactive.

    The displays main and secondary actions.

    - example: ```jsx {}} options={[ { value: Actionable item }, { value: ( {}, }} /> ), align: 'right', }, ]} />; ``` ## Common Use Case Examples ### Grouped list - description:

    The TableListItem can be used to build lists that splits items into stages or categories.

    Use component to display titles for different sections.

    - example: ```jsx {}} options={[ { value: , width: 'auto', }, { value: ( Weekend by the Lake Como Sep 23, 2022 ), }, { value: In review, width: 'auto', }, { value: ( {}, }} secondaryActions={[ { text: 'Download', icon: , onClick: () => {}, }, { text: 'Duplicate', icon: , onClick: () => {}, }, { text: 'Delete', icon: , onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> {}} options={[ { value: , width: 'auto', }, { value: ( Top 10 Restaurants in London Chinatown Jun 1, 2022 ), }, { value: In review, width: 'auto', }, { value: ( {}, }} secondaryActions={[ { text: 'Download', icon: , onClick: () => {}, }, { text: 'Duplicate', icon: , onClick: () => {}, }, { text: 'Delete', icon: , onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> {}} options={[ { value: , width: 'auto', }, { value: ( Bucket List: Indonesia Apr 13, 2022 ), }, { value: Approved, width: 'auto', }, { value: ( {}, }} secondaryActions={[ { text: 'Download', icon: , onClick: () => {}, }, { text: 'Duplicate', icon: , onClick: () => {}, }, { text: 'Delete', icon: , onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> {}} options={[ { value: , width: 'auto', }, { value: ( A weekend in a desert May 19, 2022 ), }, { value: Approved, width: 'auto', }, { value: ( {}, }} secondaryActions={[ { text: 'Download', icon: , onClick: () => {}, }, { text: 'Duplicate', icon: , onClick: () => {}, }, { text: 'Delete', icon: , onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> {}} options={[ { value: , width: 'auto', }, { value: ( Top places to visit in Portugal Mar 30, 2022 ), }, { value: Approved, width: 'auto', }, { value: ( {}, }} secondaryActions={[ { text: 'Download', icon: , onClick: () => {}, }, { text: 'Duplicate', icon: , onClick: () => {}, }, { text: 'Delete', icon: , onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> ; ```