Tabla virtualizada beta #

Along with evolutionary web development, table component has always been the most popular component in our web apps especially for dashboards, data analysis. For Table V1, with even just 1000 records of data, it can be very annoying when using it, because of the poor performance.

Con la Tabla Virtualizada, puede renderizar masivos trozos de datos en un parpadeo de ojos.

Uso básico #

Let's demonstrate the performance of the Virtualized Table by rendering a basic example with 10 columns and 1000 rows.

Auto redimensionar #

When you do not want to manually pass the width and height properties to the table, you can wrap the table component with the AutoResizer. This will automatically update the width and height for you.

Redimensione su navegador para ver cómo funciona.

Personalizar el procesador de celdas #

Of course, you can render the table cell according to your needs. Here's a simple example of how to customize your cell.

Tabla con selecciones #

Utilizando el renderizador de celdas personalizado para permitir la selección para la tabla.

Edición en línea #

Just as we demonstrated with selections above, you can use the same method to enable inline editing.

Tabla con estado #

Puede destacar su contenido de tabla para distinguir entre "success, information, warning, danger" y otros estados.

To customize the appearance of rows, use the row-class-name attribute. For example, every 10th row is highlighted using the bg-blue-200 class, and every 5th row with the bg-red-100 class.

Tabla con filas pegajosas #

You can make some rows stick to the top of the table, and that can be very easily achieved by using the fixed-data attribute.

You can dynamically set the sticky row based on scroll events, as shown in this example.

Tabla con columnas fijas #

If you want to have columns stick to the left or right for some reason, you can achieve this by adding special attributes to the table.

Puede establecer el atributo de la columna fixed a true (representando con FixedDir.LEFT) o FixedDir.LEFT o FixedDir.RIGHT

Encabezado de grupo #

By customizing your header renderer, you can group your header as shown in this example.

Filtros #

Virtualized Table provides custom header renderers for creating customized headers. We can then utilize these to render filters.

Ordenable #

Puede ordenar la tabla con el estado de ordenación.

Orden controlado #

You can define multiple sortable columns as needed. Keep in mind that if you define multiple sortable columns, the UI may appear confusing to your users, as it becomes unclear which column is currently being sorted.

Intervalo cruzado #

When dealing with a large list, it's easy to lose track of the current row and column you are visiting. In such cases, using this feature can be very helpful.

Colspan #

The virtualized table doesn't use the built-in table element, so colspan and rowspan behave a bit differently compared to TableV1. However, with a customized row renderer, these features can still be implemented. In this section, we'll demonstrate how to achieve this.

Rowspan #

Since we have covered Colspan, it's worth noting that we also have row span. It's a little bit different from colspan but the idea is basically the same.

Rowspan y Colspan juntos #

¡Podemos combinar rowspan y colspan para alcanzar el objetivo de negocio!

Datos con formato de árbol #

Virtual Table can also render data in a tree-like structure. By clicking the arrow icon, you can expand or collapse the tree nodes.

Filas de altura dinámica #

Virtual Table is capable of rendering rows with dynamic heights. If you're working with data and are uncertain about the content size, this feature is ideal for rendering rows that adjust to the content's height. To enable this, pass down the estimated-row-height attribute. The closer the estimated height matches the actual content, the smoother the rendering experience.

Vista de detalle #

Using dynamic height rendering, you can also display a detailed view within the table.

Pie personalizado #

Render a customized footer when you want to show a concluding message or information.

Renderizado personalizado de vacío #

Render a customized empty element.

Overlay #

Render an overlay on top of the table when you want to show a loading indicator or something else.

Desplazamiento manual #

Use the methods provided by Table V2 to scroll manually/programmatically with desired offset/rows.

Atributos de TableV2 #

Slots de TableV2 #

Eventos de TableV2 #

Métodos TableV2 #

Atributos de columna #

Typings #

type HeaderClassGetter = (param: {
  columns: Column<any>[]
  headerIndex: number
}) => string

type HeaderPropsGetter = (param: {
  columns: Column<any>[]
  headerIndex: number
}) => Record<string, any>

type HeaderCellPropsGetter = (param: {
  columns: Column<any>[]
  column: Column<any>
  columnIndex: number
  headerIndex: number
  style: CSSProperties
}) => Record<string, any>

type RowClassGetter = (param: {
  columns: Column<any>[]
  rowData: any
  rowIndex: number
}) => string

type RowPropsGetter = (param: {
  columns: Column<any>[]
  rowData: any
  rowIndex: number
}) => Record<string, any>

type CellPropsGetter = (param: {
  column: Column<any>
  columns: Column<any>[]
  columnIndex: number
  cellData: any
  rowData: any
  rowIndex: number
}) => void

type CellRenderProps<T> = {
  cellData: T
  column: Column<T>
  columns: Column<T>[]
  columnIndex: number
  rowData: any
  rowIndex: number
}

type HeaderRenderProps<T> = {
  column: Column<T>
  columns: Column<T>[]
  columnIndex: number
  headerIndex: number
}

type ScrollParams = {
  xAxisScrollDir: 'forward' | 'backward'
  scrollLeft: number
  yAxisScrollDir: 'forward' | 'backward'
  scrollTop: number
}

type CellSlotProps<T> = {
  column: Column<T>
  columns: Column<T>[]
  columnIndex: number
  depth: number
  style: CSSProperties
  rowData: any
  rowIndex: number
  isScrolling: boolean
  expandIconProps?:
    | {
        rowData: any
        rowIndex: number
        onExpand: (expand: boolean) => void
      }
    | undefined
}

type HeaderSlotProps = {
  cells: VNode[]
  columns: Column<any>[]
  headerIndex: number
}

type HeaderCellSlotProps = {
  class: string
  columns: Column<any>[]
  column: Column<any>
  columnIndex: number
  headerIndex: number
  style: CSSProperties
  headerCellProps?: any
  sortBy: SortBy
  sortState?: SortState | undefined
  onColumnSorted: (e: MouseEvent) => void
}

type RowCommonParams = {
  rowData: any
  rowIndex: number
}

type RowEventHandlerParams = {
  rowKey: KeyType
  event: Event
} & RowCommonParams

type RowEventHandler = (params: RowEventHandlerParams) => void
type RowEventHandlers = {
  onClick?: RowEventHandler
  onContextmenu?: RowEventHandler
  onDblclick?: RowEventHandler
  onMouseenter?: RowEventHandler
  onMouseleave?: RowEventHandler
}

type RowsRenderedParams = {
  rowCacheStart: number
  rowCacheEnd: number
  rowVisibleStart: number
  rowVisibleEnd: number
}

type RowSlotProps = {
  columns: Column<any>[]
  rowData: any
  columnIndex: number
  rowIndex: number
  data: any
  key: number | string
  isScrolling?: boolean
  style: CSSProperties
}

type RowExpandParams = {
  expanded: boolean
  rowKey: KeyType
} & RowCommonParams

type Data = {
  [key: KeyType]: any
  children?: Array<any>
}

type FixedData = Data

type KeyType = string | number | symbol

type ColumnSortParam<T> = { column: Column<T>; key: KeyType; order: SortOrder }

enum SortOrder {
  ASC = 'asc',
  DESC = 'desc',
}

type SortBy = { key: KeyType; Order: SortOrder }
type SortState = Record<KeyType, SortOrder>

FAQs #

How do I render a list with a checkbox in the first column? #

Since you are allowed to define your own cell renderer, you can do what the example Customize Cell Renderer did to render checkbox yourself, and maintain the state by yourself.

Why does virtualized table provide less features than TableV1 #

For virtualized table, we intend to provide less feature and let our users implement their own features as needed. Integrar demasiadas características hace que el código sea difícil de mantener y para la mayoría de los usuarios las características básicas son suficientes. Algunas características clave aún no han sido desarrolladas. ¡Queremos saber tu opinión! Únete a Discord para estar atento.

Fuente #

Componentes • Documentación

Contribuidores #

JeremyWuuuuu

btea

Xc

qiang

LIUCHAO

dopamine

zz

kooriookami

云游君

一只前端汪

井柏然

Xc

三咲智子

webfansplz

zwgwf

sea / 神秘海

Kim Yang

SignDawn

Mafia

zepeng

Tommy

xy

0024

LooSheng

iamkun