Skip to main content

​
Examples

  • Basic Usage
  • With Sorting
  • With Selection
  • Border and Dividers
Basic table example

Simple data table with sortable columns.

NeoTable(
  columns: [
    NeoTableColumn(
      id: "name",
      name: "Name",
      flex: 2,
    ),
    NeoTableColumn(
      id: "email",
      name: "Email",
      flex: 3,
    ),
    NeoTableColumn(
      id: "role",
      name: "Role",
      flex: 1,
    ),
  ],
  rows: [
    NeoTableRow(
      id: "user1",
      cells: [
        Text("John Doe"),
        Text("john@example.com"),
        Text("Admin"),
      ],
    ),
    NeoTableRow(
      id: "user2", 
      cells: [
        Text("Jane Smith"),
        Text("jane@example.com"),
        Text("Editor"),
      ],
    ),
  ],
),

​
Properties

​
Required

​
columns
List<NeoTableColumn>
required
A list of column definitions that determine the table structure, headers, and sorting behavior.
​
rows
List<NeoTableRow>
required
A list of data rows to display in the table. Each row must have the same number of cells as there are columns.

​
Content

​
onRowTap
ValueChanged<String>
Callback function called when a row is tapped. Receives the row ID.
​
onRowHover
ValueChanged<({String rowId, bool isHovered})>
Callback function called when a row’s hover state changes. Receives the row ID and hover status.

​
Selection

​
isSelectable
bool
default:"false"
Whether rows can be selected with checkboxes. When true, onSelectionChanged must be provided.
​
selectedRowIds
Set<String>
The set of currently selected row IDs. Used to control the selection state.
​
onSelectionChanged
ValueChanged<Set<String>>
Callback function called when the selection changes. Required when isSelectable is true.

​
Sorting

​
sortColumnId
String
The ID of the currently sorted column. Use with sortDirection to display sort indicators.
​
sortDirection
NeoTableSortDirection
The current sort direction for the sorted column. Shows appropriate sort icons in the header.
​
defaultSortColumnId
String
The default column to sort by when no explicit sort is applied. Must be used together with defaultSortDirection.
​
defaultSortDirection
NeoTableSortDirection
The default sort direction for the default sort column.

​
Layout

​
isExpanded
bool
default:"false"
Whether the table should expand to fill available space. When true, the table becomes scrollable if content exceeds the available area.
​
showBorder
bool
default:"false"
Whether to display a border around the entire table.
​
showDividers
bool
default:"false"
Whether to show horizontal divider lines between rows.
​
showVerticalDividers
bool
default:"false"
Whether to show vertical divider lines between columns.
​
fixedRowHeight
double
Fixed height for all table rows in logical pixels. When provided, all rows will have this exact height regardless of content. This prevents table jitter when using onRowHover to show/hide elements like buttons that are larger than the default content height, ensuring consistent spacing and preventing visual jumping as users interact with rows.

​
Column Properties

The NeoTableColumn class represents individual column definitions:

​
Required

​
id
String
required
A unique identifier for the column.
​
name
String
required
The display text for the column header.

​
Layout

​
flex
int
default:"1"
The flex value determining the column’s relative width. Higher values take more space.

​
Sorting

​
onSort
Function(String?, NeoTableSortDirection?)
Callback function called when this column’s sort state changes. Receives the column ID and new sort direction. When provided, makes the column sortable.

​
Row Properties

The NeoTableRow class represents individual data rows:

​
Required

​
id
String
required
A unique identifier for the row.
​
cells
List<Widget>
required
The content widgets for each cell in the row. Must match the number of columns in the table.

​
Enums

​
NeoTableSortDirection

Sort direction options for table columns.
  • none: No sorting applied
  • ascending: Sort from lowest to highest values
  • descending: Sort from highest to lowest values

​
Best Practices

  • Cell Count: Each row must have the same number of cells as there are columns in the table.
  • Width Constraints: When using isExpanded: true, always provide width constraints by wrapping in Expanded, ConstrainedBox, SizedBox, etc.
  • Row Navigation: Use onRowTap for navigation to detail pages or for row selection logic. This provides intuitive user interaction for accessing more information about table items.
  • Contextual Actions: Use onRowHover to show/hide action buttons (like delete icons) only when hovering over specific rows. This keeps the UI clean while making actions discoverable when needed.
  • Fixed Row Heights: When using onRowHover to show/hide interactive elements like buttons, use fixedRowHeight to prevent table jitter. Without it, rows will resize when elements larger than the default content are shown, causing the table to jump around as users hover over rows.

​
Integration Notes

  • Selection Logic: The table validates that all row IDs are unique and will assert in debug mode if duplicates are found.
  • Sort Cycling: Sortable columns cycle through descending → ascending → none (or back to default) when clicked repeatedly.
  • Default Sorting: When using default sorting, the default sort column cannot be completely unsorted—it cycles between descending and ascending only.
⌘I