mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-27 03:01:14 +08:00
132 lines
3.2 KiB
Markdown
132 lines
3.2 KiB
Markdown
---
|
|
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
|
|
|
|
:::
|