element-plus/docs/en-US/component/table-v2.md

132 lines
3.2 KiB
Markdown
Raw Normal View History

---
title: Virtualized Table
lang: en-US
---
# Virtualized Table
Along with the evolutionary web development, table component has always been the most popular component in our web apps especially for dashboards, data analysis. For [Table V1](./table.md), with even just 1000 records of data, it can be very annoying when using it, because the poor performance.
With Virtualized Table, you can render massive chunks of data in a blink of an eye.
:::tip
**Even though** Virtualized Table is efficient, but when the data load is too big, your **network**, **memory size** can be the bottle neck of your app. So keep in mind that Virtualized Table is never the ultimate solution for everything, consider paginate your data, add filters etc.
:::
## Basic usage
Let's render a basic case of Virtualized Table with 10 columns by 1000 rows, to demonstrate how performant it is.
:::demo
table-v2/basic
:::
## Customize Cell Renderer
Of course, you can render the table cell per your needs, here is a simple example of how to customize your cell.
:::demo
table-v2/cell-templating
:::
## Table with status
You can highlight your table content to distinguish between "success, information, warning, danger" and other states.
Use `row-class-name` to customize how the row looks. In this case, every 10th row will be highlighted with `bg-blue-200` class, every 5th row will be highlighted with `bg-red-100` class.
:::demo
table-v2/row-class
:::
## Table with sticky rows
You can make some rows stick to the top of the table, and that can be very easily achieved by using `fixed-data` attribute.
You can add dynamically set the sticky row with scroll events like this example did.
:::demo
table-v2/sticky-rows
:::
## Table with fixed columns
For some reason, you want to make the columns stick on the left and right, you can do that by adding special attributes for table.
You can set the column's attribute `fixed` to `true` (representing `FixedDir.LEFT`) or `FixedDir.LEFT` or `FixedDir.RIGHT`
:::demo
table-v2/fixed-columns
:::
## Grouping header
By customizing your header renderer you can group your header like this example did.
:::tip
In this case we used `JSX` feature which is not supported in the playground, you may try them out in your local environment or online IDEs such as `codesandbox`.
It is recommended that you write your table component in JSX, since it contains VNode manipulations.
:::
:::demo
table-v2/grouping-header
:::
## Filter
Virtualized Table providers customizing header renderers for rendering customized header, then we can use that to render filters
:::demo
table-v2/filter
:::
## Colspan
Virtualized table did not use built-in `table` element, so that `colspan` and `rowspan` is a little bit different than [TableV1](./table.md). With customized row renderer, we can still do that. In this case, you'll learn how to do that.
:::demo
table-v2/colspan
:::
## Rowspan
Since we have [Colspan](#colspan) of course we have row span as well, it is a little bit different than colspan but the idea
is basically the same.
:::demo
table-v2/rowspan
:::
## Rowspan and Colspan together
We can combine rowspan and colspan together to meet your business goal!
:::demo
table-v2/spans
:::