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