Grid

<sw-grid>

ready

Usage

Loading...
<sw-grid :items="[
    {company:'Wordify',name:'Portia Jobson'},
    {company:'Twitternation',name:'Baxy Eardley'},
    {company:'Skidoo',name:'Arturo Staker'},
    {company:'Meetz',name:'Dalston Top'},
    {company:'Photojam',name:'Neddy Jensen'}]">
    <template slot="columns" slot-scope="{ item }">
        <sw-grid-column flex="minmax(200px, 1fr)" label="Company">
            <strong>{{ item.company }}</strong>
        </sw-grid-column>

        <sw-grid-column flex="minmax(200px, 1fr)" label="Full name">
            {{ item.name }}
        </sw-grid-column>
    </template>
</sw-grid>

Component properties

Property name Type Default
items Array
selectable Boolean true
variant String normal
header Boolean true
sortBy String
sortDirection String ASC
isFullpage Boolean false
table Boolean false

Methods

Method name Parameters
createdComponent No parameters
updatedComponent No parameters
onInlineEditFinish item
onInlineEditStart item
registerInlineEditingEvents No parameters
inlineEditingStart id
disableActiveInlineEditing No parameters
selectAll selected
getSelection No parameters
selectItem selected item
isSelected itemId
checkSelection No parameters
getScrollBarWidth No parameters
onGridCellClick event column
setScrollbarOffset No parameters

Imports

  • ./sw-grid.html.twig
  • ./sw-grid.scss

SASS variables

Variable name Value
$sw-grid-item-color-border $color-steam-cloud ($color-gray-300)
$sw-grid-item-color-background $color-light-gray ($color-gray-100)
$sw-grid-item-even-color-background $color-white (#FFF)
$sw-grid-item-color-background-deleted $color-crimson ($color-crimson-500)
$sw-grid-item-color-background-new $color-emerald ($color-emerald-500)
$sw-grid-item-active-color-border $color-shopware-blue ($color-shopware-brand-500)
$sw-grid-item-active-color-background $color-cadet-blue ($color-shopware-brand-50)
$sw-grid-item-active-color-text $color-black (#000)
$sw-grid-header-color-background $color-white (#FFF)
$sw-grid-header-color-border $color-steam-cloud ($color-gray-300)
$sw-grid-header-color-text $color-kashmir ($color-darkgray-200)
$sw-grid-actions-icon-color $color-gutenberg ($color-darkgray-200)
$sw-grid-actions-icon-hover-color $color-shopware-blue ($color-shopware-brand-500)
$sw-grid-table-row-color-background $color-white (#FFF)

Twig blocks

  • sw_grid_slot_header_cell_selectable
  • sw_grid_slot_header_cell_icon_label
  • sw_grid_slot_header_cell_label
  • sw_grid_slot_header_cell_sortable
  • sw_grid_slot_header_cell_content
  • sw_grid_slot_header_cell
  • sw_grid_slot_header
  • sw_grid_body_item_selectable
  • sw_grid_slot_columns
  • sw_grid_body_slot_items
  • sw_grid_slot_empty_columns_content
  • sw_grid_slot_empty_columns
  • sw_grid_slot_body
  • sw_grid_slot_pagination
  • sw_grid_pagination
  • sw_grid_slot_content
  • sw_grid

Slots

  • content
  • header
  • body
  • items
  • columns
  • empty
  • pagination