Data Table

Usage

Ruby example

Paste this complete Builder example inside the app surface from the Quickstart. Replace illustrative asset paths with files from your project.

Ruby

data_table([{ service: "API", latency: 42, status: "Healthy" }, { service: "Queue", latency: 18, status: "Healthy" }], columns: [{ key: :service, label: "Service" }, { key: :latency, label: "Latency (ms)" }, { key: :status, label: "Status" }], sort_column: 1, sort_order: :ascending)

API

Component properties

49 component-specific values, plus shared item and layout properties.

rowsRows configuration for Data Table.property

columnsColumns configuration for Data Table.property

selected_rowSelected row configuration for Data Table.property

selected_columnSelected column configuration for Data Table.property

show_headerShow header configuration for Data Table.property

header_heightHeader height configuration for Data Table.property

row_heightRow height configuration for Data Table.property

column_widthColumn width configuration for Data Table.property

row_spacingRow spacing configuration for Data Table.property

column_spacingColumn spacing configuration for Data Table.property

selection_behaviorSelection behavior configuration for Data Table.property

selection_modeSelection mode configuration for Data Table.property

editableEditable configuration for Data Table.property

edit_triggersEdit triggers configuration for Data Table.property

alternating_rowsAlternating rows configuration for Data Table.property

animateAnimate configuration for Data Table.property

reuse_itemsReuse items configuration for Data Table.property

key_navigation_enabledKey navigation enabled configuration for Data Table.property

pointer_navigation_enabledPointer navigation enabled configuration for Data Table.property

interactiveInteractive configuration for Data Table.property

clipClip configuration for Data Table.property

paddingPadding configuration for Data Table.property

widthWidth configuration for Data Table.property

heightHeight configuration for Data Table.property

empty_textEmpty text configuration for Data Table.property

enabledEnabled configuration for Data Table.property

backgroundBackground configuration for Data Table.property

header_backgroundHeader background configuration for Data Table.property

cell_backgroundCell background configuration for Data Table.property

alternate_backgroundAlternate background configuration for Data Table.property

selected_backgroundSelected background configuration for Data Table.property

foregroundForeground configuration for Data Table.property

header_foregroundHeader foreground configuration for Data Table.property

selected_foregroundSelected foreground configuration for Data Table.property

mutedMuted configuration for Data Table.property

accentAccent configuration for Data Table.property

grid_colorGrid color configuration for Data Table.property

border_colorBorder color configuration for Data Table.property

radiusRadius configuration for Data Table.property

font_familyFont family configuration for Data Table.property

font_sizeFont size configuration for Data Table.property

header_sizeHeader size configuration for Data Table.property

accessible_nameAccessible name configuration for Data Table.property

sort_columnSort column configuration for Data Table.property

sort_orderSort order configuration for Data Table.property

filterFilter configuration for Data Table.property

pagePage configuration for Data Table.property

page_sizePage size configuration for Data Table.property

visibleVisible configuration for Data Table.property

Show 13 shared item properties

opacityscalerotationzfill_widthfill_heightpreferred_widthpreferred_heightminimum_widthminimum_heightmaximum_widthmaximum_heightlayout_alignment

Interaction

Events

Subscribe with on widget, :event and keep behavior in Ruby.

↗cell_clickNative event payload

↗cell_double_clickNative event payload

↗activateNative event payload

↗selection_changeNative event payload

↗current_changeNative event payload

↗editNative event payload

↗sortNative event payload

↗filter_changeNative event payload

↗page_changeNative event payload

↗row_count_changeNative event payload

↗column_count_changeNative event payload

↗scrollNative event payload

↗movement_startNative event payload

↗movement_endNative event payload

↗showNative event payload

↗hideNative event payload

↗focusNative event payload

↗blurNative event payload