Data Table

A full-featured data table with sorting, filtering, pagination, and row selection.

Default

A data table with sortable columns, filtering, and pagination.


INV001	Paid	Credit Card	250.0
INV002	Pending	PayPal	150.0
INV003	Unpaid	Bank Transfer	350.0
INV004	Paid	Credit Card	450.0
INV005	Paid	PayPal	550.0

12 row(s) total.

Page 1 of 3

With Row Selection

Enable row selection with checkboxes.


INV001	Paid	Credit Card	250.0
INV002	Pending	PayPal	150.0
INV003	Unpaid	Bank Transfer	350.0
INV004	Paid	Credit Card	450.0
INV005	Paid	PayPal	550.0

0 of 12 row(s) selected.

Page 1 of 3

Column Visibility

Toggle column visibility with the Columns dropdown.


INV001	Paid	Credit Card	250.0
INV002	Pending	PayPal	150.0
INV003	Unpaid	Bank Transfer	350.0
INV004	Paid	Credit Card	450.0
INV005	Paid	PayPal	550.0

12 row(s) total.

Page 1 of 3

All Features

Sorting, filtering, pagination, row selection, and column visibility.


INV001	Paid	Credit Card	250.0
INV002	Pending	PayPal	150.0
INV003	Unpaid	Bank Transfer	350.0
INV004	Paid	Credit Card	450.0
INV005	Paid	PayPal	550.0

0 of 12 row(s) selected.

Page 1 of 3

Usage

julia

using Suite

# Define your data
data = [
    (name="Alice", email="alice@example.com", role="Admin"),
    (name="Bob", email="bob@example.com", role="User"),
    (name="Charlie", email="charlie@example.com", role="Editor"),
]

# Define columns
columns = [
    DataTableColumn("name", "Name"),
    DataTableColumn("email", "Email"),
    DataTableColumn("role", "Role"),
]

# Render the table
DataTable(data, columns,
    paginated=true,
    page_size=10,
    selectable=true,
    column_visibility=true,
    filter_placeholder="Search users...",
)

Column Definition

Columns are defined using DataTableColumn. Each column specifies a data key, header text, and optional configuration.

julia

# Basic column
DataTableColumn("name", "Name")

# Right-aligned column
DataTableColumn("amount", "Amount", align="right")

# Non-sortable column
DataTableColumn("actions", "Actions", sortable=false, hideable=false)

# Custom cell renderer
DataTableColumn("status", "Status",
    cell=(val, row) -> Badge(val, variant=val == "Active" ? "default" : "secondary"))

Features

Feature	Description
Sorting	Click column headers to sort ascending/descending/none
Filtering	Type in the filter input to search across all columns
Pagination	Navigate pages with Previous/Next buttons
Row Selection	Select individual rows or all rows on current page
Column Visibility	Toggle column display via the Columns dropdown

API Reference

DataTable

Prop	Type	Default	Description
data	Vector	required	Data rows (Vector of NamedTuples or Dicts)
columns	Vector{DataTableColumn}	required	Column definitions
filterable	Bool	true	Show filter input
filter_placeholder	String	"Filter..."	Filter input placeholder text
filter_columns	Vector{String}	[] (all)	Columns to filter on
sortable	Bool	true	Enable column sorting
paginated	Bool	true	Enable pagination
page_size	Int	10	Rows per page
selectable	Bool	false	Show row selection checkboxes
column_visibility	Bool	false	Show column visibility toggle
caption	String	""	Table caption
class	String	""	Additional CSS classes
theme	Symbol	:default	Theme name

DataTableColumn

Prop	Type	Default	Description
key	String	required	Data field key (accessor)
header	String	required	Display header text
sortable	Bool	true	Whether this column is sortable
hideable	Bool	true	Whether this column can be hidden
cell	Function\|Nothing	nothing	Custom cell renderer (val, row) -> VNode
header_class	String	""	Additional CSS classes for header cell
cell_class	String	""	Additional CSS classes for data cells
align	String	"left"	Text alignment: left, center, right