# ListView List view component to visualize a list of data ```js import ListView from 'deepsight-react-components/ListView'; return ``` ## Props | prop | type | required | default | description | | :---------------------------- | :-------------------- | :------: | :------------------ | :---------------------------------------------------------------------------------------------- | | `columns` | `array` | `true` | | The column settings to apply on the table view listing | | `data` | `array` | `true` | | The list of data to display in the table based on the columns settings | | `defaultOrderBy` | `string` | `false` | `null` | The id of the default column on which the sort should be applied | | `defaultOrderType` | `string` | `false` | `asc` | The order type that should be applied by default | | `defaultMaxPerPage` | `number` | `false` | `20` | The number of elements to display per page by default | | `defaultSearchInput` | `string` | `false` | `''` | The filter string to apply by default | | `maxPerPageOptions` | `array` | `false` | `[10, 20, 50, 100]` | The options to display in the max per page dropdown in paginator | | `hideAllPerPageOption` | `bool` | `false` | `false` | Whether we should hide the "All" option in the max per page options | | `renderEmptyState` | `func` | `false` | `null` | When set, renders a provided empty state when the list is empty | | `actions` | `array` | `false` | `null` | The list of actions that can be displayed on top of the list | | `actionsOnHover` | `func` | `false` | `null` | Function with the list of actions that can be displayed on the hover of a row | | `rowActions` | `array` | `false` | `null` | The list of actions to choose from in the ellipsis menu of each row | | `exportFunction` | `func` | `false` | `null` | When set, displays a button to export the list with the provided function | | `isLoading` | `bool` | `false` | `false` | Whether it should display loading state | | `maxActionsInLine` | `number` | `false` | `2` | The number of action to display in line before switching to a dropdown | | `minWidth` | `number` | `false` | `800` | The minimum width the table view has | | `placeholderShape` | `string` | `false` | `null` | When set, displays a string of what is filterable in the search bar | | `placeholderShapePlural` | `string` | `false` | `null` | When set, displays a string of what is filterable in the search bar | | `padding` | `string` | `false` | `0` | When set, applies a padding to the list view excluding the paginator | | `setSelectedItems` | `func` | `false` | `null` | When defined, will be call on every row selection with the list of selection items in parameter | | `languageCode` | `string` | `false` | `fr` | Configure i18next to get requested translation file | | `disableSelection` | `bool` | `false` | `false` | Allow to disable row selection | | `disableMultipleSelection` | `bool` | `false` | `false` | Replace checkboxes by radiobuttons. Allow only one selection | | `disableFooter` | `bool` | `false` | `false` | Disable footer. Show all items directly | | `forceEnableSelection` | `bool` | `false` | `false` | Force allow selection (even if no action set) | | `disableFullSelection` | `bool` | `false` | `false` | Remove the checkbox allowing to select all items | | `markerConfiguration` | `MarkerConfiguration` | `false` | `null` | Allow to display a marker beside each row according to the specific given configuration | | `allSelectedByDefault` | `boolean` | `false` | `false` | Used to select all row when component is setup | | `minActionsInActionsDropdown` | `number` | `false` | `2` | Used to change the minimal number of actions required to make the "actions" dropdown appear | ## Marker Configuration Here are some settings you can apply: | prop | type | required | default | description | | :---------------- | :--------- | :------: | :------ | :------------------------------------------------ | | `isHidden` | `function` | `true` | | To determine whether we should display the marler | | `backgroundColor` | `string` | `true` | | The background color to apply on marker | | `icon.src` | `string` | `true` | | The icon to display inside the marker | ## Columns settings The columns settings will represent the way the table is being displayed. It is important to properly set them and to attach a unique `id` to each of them. Here are some settings you can apply: | prop | type | required | default | description | | :------------------ | :--------- | :------: | :------ | :--------------------------------------------------------------------------------------------------- | | `name` | `string` | `true` | | The name of the column to display | | `propertyKey` | `string` | `true` | | The name of the property to retrieve in the list of data | | `excludeFromSearch` | `bool` | `false` | `false` | Whether or not the search input will filter from the column | | `large` | `bool` | `false` | `false` | When set, the column will expand wider than the default setting | | `narrow` | `bool` | `false` | `false` | When set, the column will take the minimum width possible | | `hideHeader` | `bool` | `false` | `false` | When set, the column name header will not be rendered | | `minWidth` | `number` | `false` | | When set, the value serves to compute a minimun width to the column | | `tooltipText` | `string` | `false` | | When set, it will display the tooltip component with the given text | | `render` | `function` | `false` | | When set, the given function will override the default formatting method attached to the column type | | `disableSort` | `bool` | `false` | | When set, disables column icon and ability to order by the said column | ## Actions Actions can appear in different forms in the list (on top, per row) but all of them must include a `handleAction` function. | prop | type | required | default | description | | :------------- | :--------- | :------: | :------ | :----------------------------------------------- | | `handleAction` | `function` | `true` | | The function executed when the action is clicked | Their different types are detailed below ### Separate Action The actions that appear on top of the list and that depend on the parameters provided below. They require at least the `actionLabel` string and `displayActionInLine` boolean. | prop | type | required | default | description | | :-------------------- | :--------- | :------: | :------ | :-------------------------------------------------------------- | | `actionLabel` | `string` | `true` | | The label to display on the action's button | | `fixed` | `bool` | `false` | | Whether the action should be always displayed | | `displayActionInLine` | `bool` | `true` | | Whether the action should be displayed in line or in a dropdown | | `atLeastOneSelected` | `bool` | `false` | `false` | If the action requires a selection to appear | | `multipleSelected` | `bool` | `false` | `false` | If the action requires multiple selections to appear | | `render` | `function` | `false` | | When set, the function will override the default button display | ### On Hover Action The actions that appear at the end of a row, usually when hovering it. They require at least an `icon` string. | prop | type | required | default | description | | :------------ | :------- | :------: | :------ | :-------------------------------------------------------------- | | `icon` | `string` | `true` | | The icon to display in the action's button | | `iconOnHover` | `string` | `false` | `null` | When set, the icon to display when hovering the action's button | ### Ellipsis Action The actions that appear in the ellipsis menu dropdown of each row. They require the `actionLabel` function. | prop | type | required | default | description | | :--------------- | :--------- | :------: | :------ | :-------------------------------------------- | | `actionLabel` | `function` | `true` | | The label to display on the action's button | | `actionIcon` | `function` | `false` | | The icon to display on the action's button | | `actionIconSize` | `number` | `false` | | The size icon if necessary | | `isDisabled` | `function` | `false` | | Whether the item will be shown as disabled | | `isHidden` | `function` | `false` | | Whether the item will be displayed | | `isHighlighted` | `function` | `false` | | Whether the item will be shown as highlighted | ## Data settings Just like the columns, it is important to attach a unique `id` to each item in the list