The sw-data-grid is a component to render tables with data.
It also supports hiding columns or scrolling horizontally when many columns are present.
Usage
<sw-data-grid
:dataSource="[
{ id: 'uuid1', company: 'Wordify', name: 'Portia Jobson' },
{ id: 'uuid2', company: 'Twitternation', name: 'Baxy Eardley' },
{ id: 'uuid3', company: 'Skidoo', name: 'Arturo Staker' },
{ id: 'uuid4', company: 'Meetz', name: 'Dalston Top' },
{ id: 'uuid5', company: 'Photojam', name: 'Neddy Jensen' }
]"
:columns="[
{ property: 'name', label: 'Name', rawData: true },
{ property: 'company', label: 'Company', rawData: true }
]">
</sw-data-grid>
Component properties
Property name | Type | Default |
dataSource |
Array
|
|
columns |
Array
|
|
identifier |
String
|
|
showSelection |
Boolean
|
true
|
showActions |
Boolean
|
true
|
showHeader |
Boolean
|
true
|
showSettings |
Boolean
|
false
|
fullPage |
Boolean
|
false
|
allowInlineEdit |
Boolean
|
false
|
allowColumnEdit |
Boolean
|
false
|
isLoading |
Boolean
|
false
|
skeletonItemAmount |
Number
|
7
|
sortBy |
String
|
|
sortDirection |
String
|
ASC
|
naturalSorting |
Boolean
|
false
|
compactMode |
Boolean
|
true
|
showPreviews |
Boolean
|
true
|
Methods
Method name | Parameters |
createdComponent |
No parameters
|
mountedComponent |
No parameters
|
initGridColumns |
No parameters
|
findResizeColumns |
No parameters
|
findPreviewSlots |
No parameters
|
getDefaultColumns |
No parameters
|
saveGridColumns |
No parameters
|
getHeaderCellClasses |
column
index
|
getRowClasses |
item
itemIndex
|
getCellClasses |
column
|
onChangeCompactMode |
value
|
onChangePreviews |
value
|
onChangeColumnVisibility |
value
index
|
onChangeColumnOrder |
currentColumnIndex
newColumnIndex
|
orderColumns |
columns
oldColumnIndex
newColumnIndex
|
enableInlineEdit |
No parameters
|
hasColumnWithInlineEdit |
No parameters
|
isInlineEdit |
item
|
disableInlineEdit |
No parameters
|
hideColumn |
columnIndex
|
renderColumn |
item
column
|
selectAll |
selected
|
selectItem |
selected
item
|
isSelected |
itemId
|
resetSelection |
No parameters
|
onClickSaveInlineEdit |
item
|
onClickCancelInlineEdit |
item
|
onDbClickCell |
record
|
onClickHeaderCell |
event
column
|
onStartResize |
event
column
columnIndex
|
onStopResize |
No parameters
|
onResize |
event
|
_handleColumnResizeClasses |
operation
|
enableResizeMode |
No parameters
|
setAllColumnElementWidths |
No parameters
|
trackScrollX |
No parameters
|
save |
item
|
revert |
item
|
sort |
column
|
Imports
- ./sw-data-grid.html.twig
- ./sw-data-grid.scss
Watcher
- columns
- sortBy
- sortDirection
- naturalSorting
- isLoading
- dataSource
- showSelection
- records
- compactMode
- selection
Twig blocks
- sw_data_grid_bulk_selected_count
- sw_data_grid_bulk_selected_actions_content
- sw_data_grid_bulk_selected_actions
- sw_data_grid_bulk
- sw_data_grid_slot_bulk_modals
- sw_data_grid_bulk_modals
- sw_data_grid_select_all_checkbox
- sw_data_grid_header_cell_selection_content
- sw_data_grid_header_cell_selection
- sw_data_grid_header_columns_icon
- sw_data_grid_header_columns_label
- sw_data_grid_column_actions_hide
- sw_data_grid_column_actions
- sw_data_grid_sort_indicator_icon_asc
- sw_data_grid_sort_indicator_icon_desc
- sw_data_grid_sort_indicator_transition
- sw_data_grid_sort_indicator
- sw_data_grid_header_columns_content
- sw_data_grid_header_columns_resize
- sw_data_grid_header_columns
- sw_data_grid_header_cell_spacer
- sw_data_grid_settings
- sw_data_grid_header_cell_actions_content
- sw_data_grid_header_cell_actions
- sw_data_grid_header_row
- sw_data_grid_header
- sw_data_grid_select_item_checkbox
- sw_data_grid_body_cell_selection_content
- sw_data_grid_body_cell_selection
- sw_data_grid_preview_slot
- sw_data_grid_columns_render_inline_edit
- sw_data_grid_columns_inline_edit
- sw_data_grid_columns_render_router_link
- sw_data_grid_columns_render_value
- sw_data_grid_columns_value
- sw_data_grid_columns_slot
- sw_data_grid_body_columns_content
- sw_data_grid_body_columns
- sw_data_grid_body_cell_spacer
- sw_data_grid_inline_edit_actions_cancel_icon
- sw_data_grid_inline_edit_actions_cancel
- sw_data_grid_inline_edit_actions_save_icon
- sw_data_grid_inline_edit_actions_save
- sw_data_grid_inline_edit_actions
- sw_data_grid_slot_actions
- sw_data_grid_body_cell_actions
- sw_data_grid_slot_action_modals
- sw_data_grid_body_cell_action_modals
- sw_data_grid_body_cell_actions_content
- sw_data_grid_body_row
- sw_data_grid_body
- sw_data_grid_skeleton
- sw_data_grid_table
- sw_data_grid_wrapper
- sw_data_grid_slot_pagination
- sw_data_grid_pagination_inner
- sw_data_grid_pagination
- sw_data_grid
Slots
- bulk
- bulk-modals
- default
- actions
- action-modals
- pagination