VTable class

A customizable, reusable table widget with pinned headers, scrollable rows, and flexible column layouts.

VTable provides a clean, accessible tabular data display with:

  • Pinned header row that stays visible while rows scroll vertically
  • Flexible column sizing via columnFlex ratios (proportional widths)
  • Cell content flexibility supporting both String and Widget types
  • Alignment control with centerColumns and rightColumns indices
  • Density levels for different spacing needs via VTableDensity
  • Consistent styling matching Forui's FCard aesthetic (borders, rounded corners, background)
  • Separator dividers between rows using Forui's FDivider

Requirements

  • headers.length must equal columnFlex.length
  • rows.length can be 0 (empty table) or any positive integer
  • Each row length should match headers.length for consistent column structure

Alignment Behavior

  • Columns are left-aligned by default
  • Right-alignment takes precedence over center-alignment if a column is in both lists

Example

VTable(
  height: 400,
  density: VTableDensity.comfortable,
  columnFlex: [1, 2, 1],
  centerColumns: [2],
  rightColumns: [0],
  headers: [
    'ID',
    'Customer Name',
    Row(children: [Icon(Icons.flag), SizedBox(width: 4), Text('Status')]),
  ],
  rows: [
    ['#1001', 'Alice Johnson', 'Active'],
    ['#1002', 'Bob Smith', 'Inactive'],
    ['#1003', 'Carol White', 'Active'],
  ],
);
Inheritance

Constructors

VTable({Key? key, required List headers, required List<List> rows, required List<int> columnFlex, required double height, VTableDensity density = VTableDensity.comfortable, List<int> centerColumns = const [], List<int> rightColumns = const []})
const

Properties

centerColumns → List<int>
Column indices that should be center-aligned instead of left-aligned.
final
columnFlex → List<int>
Flex ratios for proportional column width distribution.
final
density → VTableDensity
Controls spacing and padding density throughout the table.
final
hashCode → int
The hash code for this object.
no setterinherited
headers → List
The header row cells displayed at the top and pinned during vertical scrolling.
final
height → double
Maximum height of the entire table widget in logical pixels.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
rightColumns → List<int>
Column indices that should be right-aligned instead of left-aligned.
final
rows → List<List>
The table data rows, each containing cell data matching header structure.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

build(BuildContext context) → Widget
Builds the complete table UI with pinned headers, scrollable rows, and Forui styling.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited