e-virt-table

e-virt-table is a high-performance data table built on HTML5 Canvas. It is designed to function as a versatile data grid, similar to Microsoft Excel or Google Sheets, and is suitable for handling large datasets through virtual scrolling.

Key features include:

• Canvas-Based Rendering: Provides high performance and smooth interactions by leveraging canvas for rendering.
• Virtual Scrolling: Efficiently handles large datasets by only rendering visible areas.
• Cell Editing: Supports direct cell manipulation.
• Multi-Framework Support: Compatible with Vue 3, Vue 2, React, and vanilla JavaScript.

e-virt-table is a powerful data table implementation based on HTML5 Canvas. It is designed to function as a high-performance data grid, similar to Microsoft Excel or Google Sheets. Key features include:

• Virtual Scrolling: Efficiently handles large datasets by rendering only visible cells.
• Cell Editing: Supports direct interaction and modification of cell data.
• Canvas-based Rendering: Provides high performance for complex data grids.

The Overlayer is a mechanism to overlay elements above the table to implement custom slot component functionality.

Important Note: The Overlayer is not intended to be an editor; it is recommended to use it exclusively for cell display purposes.

When a user edits a cell, the following sequence occurs:

1. Built-in number/length checks
2. canValueChange (column-level gate)
3. BEFORE_VALUE_CHANGE_METHOD (table-level value modification)
4. Write operation
5. Validators
6. valueChange (column-level) or change (table-level) callbacks.

Note: BEFORE_VALUE_CHANGE_METHOD is used to transform or change the assigned value, whereas formatters are typically for display only.

The TREE_SELECT_MODE configuration determines how selection propagates between parents and children:

• Auto Mode (Default): Child items and semi-selected items are treated as selected. This behavior is reflected in the selectionChange event.
• Cautious Mode: Semi-selected states are NOT treated as selected in the selectionChange event.
• Strictly Mode: Parent and child items are completely independent. Selecting a parent does not affect children, and vice versa.

When scrollbarMode is set to inner, the visibility of the scrollbars is determined by a combination of state flags. The scrollbars are drawn if any of the following conditions are met:

1. innerVisible: The scrollbar is currently in its visible state (triggered by hover).
2. isFocus: The table or scroller has focus.
3. isDragging: The user is currently dragging a scrollbar thumb.

If scrollbarMode is NOT set to inner, the scrollbars follow the default visibility rules.

Adaptive row height is disabled by default. When enabled, rows expand to fit their content.

Important Notes:

• If using an overlay DOM for adaptive height, you must set domDataset.
• Because the table calculates row height based on the visible area, you may observe some 'jumping' during scrolling; this is expected behavior.
• To prevent rows from expanding excessively, use the maxLineClamp parameter in your column configuration to truncate text.

When configuring BORDER styles, be aware of the following layout and dimension constraints:

• Fixed Dimensions: Border width is fixed at 1 and color is fixed at BORDER_COLOR.
• No Layout Impact: Changing the border style does not affect calculations for:
  • Column width
  • Row height
  • Auto-row-height calculations
  • Header.init() width or height totals
  • Body.update() row positions
  • Database.getData() row positions and sumHeight
  • Paint.calculateTextHeight()
  • Row.updateCalculatedHeight()
• Excluded Elements: The BORDER setting does not control the appearance of selection lines, autofill, validation, drag/resize handles, hover-icons, or tree guide lines.

The fixed header behavior is determined by the HEIGHT setting in the table configuration:

• Fixed Header: Set config.HEIGHT to a specific value (e.g., 400px).
• Non-Fixed Header: Set both config.MAX_HEIGHT and config.HEIGHT to 0.

When using merging techniques, you can choose between unassociated merging and Merge Data Association.

Merge Data Association

In this mode, merged cells are logically linked. If the data in one of the merged cells changes, the change is automatically reflected in all other related cells within that merged group.

Important Considerations

• Data Integrity: Because cells are linked, operations like copying, pasting, or filling cells may trigger error prompts to prevent data inconsistency.
• Error Handling: If you wish to replace the system's default error prompt box with a custom UI, you should listen to the error event emitted by the table.

By default, e-virt-table enables virtual scrolling for both rows and columns without requiring any additional configuration. This allows the table to handle large datasets, supporting more than 200,000 data entries efficiently.

To optimize performance, keep the number of visible cells as low as possible. While the virtualization engine is highly efficient, extremely large datasets may still be limited by network latency or the client's memory capacity.