# NestedList NestedList component to visualize a list of data and modal associated ```js import NestedList from 'deepsight-react-components/NestedList'; return ; ``` # Props | Props | Type | Required | Default | Description | |:-----------------------|:-----------|:--------:|:-----------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------| | `headers` | `array` | `true` | | Array of `HeaderInterface` to set header of the component | | `data` | `array` | `true` | | Array of `ItemGlobal` interface to set data to display inside the component | | `fixedRowsData` | `array` | `false` | `[]` | Array of `ItemGlobal` interface to set data to display inside the component as fixed rows on top of the listing | | `isLoading` | `boolean` | `false` | `false` | Whether it should display loading state | | `isExpandable` | `boolean` | `false` | `true` | Whether the component allow expandable content state | | `labelEmptyState` | `string` | `false` | `Aucun résultat ne correspond à votre recherche` | Text displayed when there is no result | | `customModalIcon` | `string` | `false` | `null` | Set the icon on which it will be able to open a modal. Use `icon-order` to display a cart or `icon-stock` to display a box | | `modalTitle` | `string` | `false` | | The title of the modal | | `modalHeaders` | `array` | `false` | | Array of `ModalHeaderInterface` to set header of the modal component | | `labelModalEmptyState` | `string` | `false` | `Aucune commande dans les 15 prochains jours pour cet ingrédient` | Text displayed when there is no data to display in the modal | | `minWidth` | `number` | `false` | | When set, the value serves to compute a minimun width to the `NestedList` component | | `maxHeight` | `number` | `false` | | When set, the value serves to compute a maximum height to the `NestedList` component | | `defaultOrderBy` | `string` | `false` | | The `propertyKey` of the default column on which the sort should be applied | | `defaultOrderType` | `string` | `false` | `asc` | The order type that should be applied by default | | `graphEmptyStateLabel` | `string` | `false` | | The graph's empty state label | | `hasNestedData` | `boolean` | `false` | `false` | Boolean to said if component as nested data | | `hasPagination` | `boolean` | `false` | `false` | Boolean to said if component use pagination | | `maxPerPage` | `number` | `false` | `1` | Max element to display per page | | `setMaxPerPage` | `function` | `false` | `void` | A setter to trigger the change of max element to display per page | | `setCurrentPage` | `function` | `false` | `void` | A setter to trigger when switching page | | `currentPage` | `number` | `false` | `0` | The curent page to display | | `itemsCount` | `number` | `false` | `0` | Total of items to set max pages | | `maxPerPageOptions` | `array` | `false` | `[0]` | An array of options for the selected max per pages | | `hideAllPerPageOption` | `boolean` | `false` | `false` | Option to remove all of max per pages selection | # Headers settings _List of header to set up column and map data to display inside the row._ ### Header Interface | Props | Type | Required | Default | Description | |:-------------------:|:----------:|:--------:|:-------:|:----------------------------------------------------------------------------------------------------:| | `name` | `string` | `true` | | The name of the column to display | | `propertyKey` | `string` | `true` | | The name of the property to match with the key element in the list of data | | `tooltipDisplay` | `string` | `false` | | The description require to display the tooltip and the inside content | | `unit` | `string` | `false` | | String of the unit use to display value | | `isNumber` | `boolean` | `false` | | Boolean needed to format the number data after render of the component | | `large` | `boolean` | `false` | | Boolean to display a double width of a column | | `isSortable` | `boolean` | `false` | | Boolean to enable sorting | | `large` | `boolean` | `false` | `false` | When set, the column will take a bigger width | | `narrow` | `boolean` | `false` | `false` | When set, the column will take the minimum width possible | | `minWidth` | `string` | `false` | | When set, the value serves to compute a minimun width to the column | | `render` | `function` | `false` | | When set, the given function will override the default formatting method attached to the column type | | `customModalRender` | `boolean` | `false` | | Add the possibility to display a modal | ### Modal Header Interface | Props | Type | Required | Default | Description | | :-----------: | :--------: | :------: | :-----: | :------------------------------------------------------------------------: | --- | | `propertyKey` | `string` | `true` | | The name of the property to match with the key element in the list of data | | `bold` | `boolean` | `false` | `false` | Boolean to display the value in bold | | | `render` | `function` | `false` | | When set, the given function will override the default formatting method | # Data Settings _List of Data used for display value inside row._ ### Data Interface ##### ItemGlobal Interface _Element for display data matching header_ | Props | Type | Required | Default | Description | | :-------------: | :-------: | :------: | :-----: | :----------------------------------------------------: | --- | | `isHighlighted` | `boolean` | `false` | | When set, the associated row will display an ArrowIcon | | ##### DataItem _Interface used to match and display data_ | Props | Type | Required | Default | Description | |:-------------:|:------------------:|:-----------:|:-------:|:----------------------------------------------------------------------:| | `propertyKey` | `string` | `true` | | String used to match with header associated key | | `value` | `string or number` | `optionnal` | | Value require to display data if the propertyKey match with the header | Note : The propertyKey `stock` needs to be an object with a `value`and a boolean `isReal`. # Graph Configuration _Graph interface to set up graph associated to the arrow button to open the row._ | Props | Type | Required | Default | Description | |:-----------------------------:|:---------:|:--------:|:-------:|:--------------------------------------------------------------------------:| | `data` | `array` | `true` | | Array of `ItemGraph` interface to set data to display inside the component | | `configuration` | `array` | `true` | | Array of `ConfigurationProps` interface to set up the component | | `unit` | `string` | `true` | | Unit of the numbers, used in the graph bar tooltip | | `hasNoInventoryStockOfEntity` | `boolean` | `true` | `false` | Change empty state label | | `isLoading` | `boolean` | `false` | `false` | Whether it should display loading state | | `currentDate` | `data` | `false` | | The current date | | `singleBarGraph` | `boolean` | `false` | `false` | Whether it should display a graph with single or double bars | ### ItemGraph Interface _Interface used to set graph data_ | Props | Type | Required | Default | Description | |:-----:|:--------:|:--------:|:-------:|:---------------------------------------------------------:| | `x` | `string` | `true` | | The date (x-axis) | | `y` | `array` | `true` | | `ItemGraphData` interface to set data to display (y-axis) | ##### ItemGraphData Interface _Interface used to set graph data_ | Props | Type | Required | Default | Description | |:-------------:|:--------:|:--------:|:-------:|:-----------------------------------------------:| | `stock` | `array` | `true` | | Array of `ItemGraphStockData` to set stock data | | `loss` | `Object` | `true` | | `ItemGraphLossData` to set loss data | | `consumption` | `Object` | `true` | | `ItemGraphLossData` to set consumption data | | `order` | `Object` | `true` | | `ItemGraphOrderData` to set order data | ##### ItemGraphStockData Interface _Interface used to set stock data_ | Props | Type | Required | Default | Description | |:---------------:|:---------:|:--------:|:-------:|:-------------------------------------:| | `value` | `number` | `true` | | The value associated to the graph bar | | `color` | `string` | `true` | | The color associated to the graph bar | | `isHighlighted` | `boolean` | `true` | | Add red rectangle around the value | ##### ItemGraphLossData Interface _Interface used to set loss data_ | Props | Type | Required | Default | Description | |:---------------:|:--------:|:--------:|:-------:|:------------------------------------------------:| | `inventoryDate` | `string` | `true` | | The inventory date | | `totUnit` | `number` | `true` | | Total number of unit associated to the inventory | | `totTurnover` | `number` | `true` | | Total turnover associated to the inventory | ##### ItemGraphConsumptionData Interface _Interface used to set consumption data_ | Props | Type | Required | Default | Description | |:-------------:|:--------:|:--------:|:-------:|:------------------------------------------------:| | `createdAt` | `string` | `true` | | The consumption date | | `totUnit` | `number` | `true` | | Total number of unit associated to the inventory | | `totTurnover` | `number` | `true` | | Total turnover associated to the inventory | ##### ItemGraphOrderData Interface _Interface used to set order data_ | Props | Type | Required | Default | Description | |:----------------:|:--------:|:--------:|:-------:|:------------------------------------------------:| | `startOrderDate` | `string` | `true` | | The start order date | | `totUnit` | `number` | `true` | | Total number of unit associated to the inventory | | `totTurnover` | `number` | `true` | | Total turnover associated to the inventory | | `orderId` | `number` | `true` | | The order id | | `type` | `string` | `true` | | Type of the order | ### ConfigurationProps Interface _Interface used to set graph settings_ | Props | Type | Required | Default | Description | |:-------------:|:--------:|:--------:|:-------:|:-----------------------------------------------------:| | `title` | `string` | `true` | | The title of the graph | | `metric` | `string` | `true` | | Metric used for the graph (`unit` or `turnover`) | | `legends` | `array` | `true` | | Array of `LegendProps` interface to set up the legend | | `tooltiptext` | `string` | `false` | | The tooltip text displayed next to the title | | `subtitle` | `string` | `false` | | The subtitle of the graph | ##### LegendProps Interface _Interface used to set graph legend settings_ | Props | Type | Required | Default | Description | |:-------------:|:--------:|:--------:|:-------:|:--------------------------------------------------------------------------:| | `color` | `string` | `true` | | The color associated to the legend | | `name` | `string` | `true` | | The name associated to the legend | | `propertyKey` | `string` | `true` | | The name of the property to match with the key element in the list of data |