You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| width |`number` or `string`\*| ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
100
-
| height |`number` or `string`\*| ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
101
-
| model | any[]| ✓ | the model, the data for the items to display in the list. |
102
-
| modelCount |`number`| ✓ | The number of items you want to render. |
103
-
| sizeCalculator |`(index: number, item:any) => number or SizingCalculatorFn`| ✓ | A function that returns the size (height or width) of the row/column being rendered. the output of this function is used for scrollbar positioning and is passed to the `vl_slot`|
104
-
| row | (r:RowAttributes) => SnippetResult | ✓ | Snippet called to render every item, see description below. |
105
-
| scrollDirection |`string`|| Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
106
-
| scrollToOffset |`number`|| Can be used to control the scroll offset; Also useful for setting an initial scroll offset. |
107
-
| scrollToIndex |`number`|| Item index to scroll to (by forcefully scrolling if necessary). |
108
-
| scrollToAlignment |`string`|| Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |
109
-
| scrollToBehaviour |`string`|| Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling. One of: `'auto'`, `'smooth'` or `'instant'` (default). |
110
-
| windowOverPadding |`number`|| Number of extra items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers and devices. |
111
-
| estimatedItemSize |`number`|| Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
93
+
| items | any[]| ✓ | the model, the data for the items to display in the list. |
94
+
| vl_slot | (index, item, size) => SnippetResult | ✓ | Snippet called to render every item, see description below. |
95
+
| isHorizontal | boolean (false) || Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
96
+
| isTable | boolean (false) || Whether the rendering should be a table layout |
97
+
| header | () => SnippetResult || Useful in table mode to render the table header columns. |
98
+
| footer | () => SnippetResult || Useful in table mode to render any table footer. |
99
+
| sizeCalculator |`(index: number, item:any) => number alias SizingCalculatorFn`|| Not recommended, as the component will adjust to the css rendering. If you need to control the sizing programmatically, use a function that returns the size (height or width) of the rendered row or column. This function's output is used for scrollbar positioning and is passed to the vl_slot. |
100
+
| scrollToOffset |`number`|| It can be used to control the scrollbar offset. **scrollToIndex** and **scrollToOffset** MUST not be used together. |
101
+
| scrollToIndex |`number`|| Moved scrollbar to display the given index. Follow scroll behavior and alignment policies. **scrollToIndex** and **scrollToOffset** MUST not be used together. |
102
+
| scrollToAlignment |`string`|| Used in combination with **scrollToIndex** and **scrollToOffset**. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |
103
+
| scrollToBehaviour |`string`|| Used in combination with **scrollToIndex** and **scrollToOffset**, controls the scrolling behaviour movement. One of: `'auto'`, `'smooth'` or `'instant'` (default). |
112
104
| getKey |`(index: number) => any`|| Function that returns the key of an item in the list, which is used to uniquely identify an item. This is useful for dynamic data coming from a database or similar. By default, it's using the item's index. |
113
105
114
-
_\*`height` must be a number when `scrollDirection` is `'vertical'`. Similarly, `width` must be a number if `scrollDirection` is `'horizontal'`_
115
-
_\**`model` is stored, `items` are rendered
116
-
117
106
### Snippets
118
107
119
108
-`header` - an optional snippet for the elements that should appear at the top of the list, typically used in table mode
120
109
-`footer` - an optional snippet for the elements that should appear at the bottom of the list, typically used in table mode
121
110
-`vl_slot` - a required snipper property called to render each row of the list with the signature `vl_slot({index, item, size?})`. `size` is only present if a custom **sizeCalculator** is in place.
0 commit comments