Data Grid

<sw-data-grid>

ready
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

Loading...
<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
plainAppearance Boolean false
showPreviews Boolean true
isRecordEditable Function
isRecordSelectable Function
itemIdentifierProperty String id

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