Data grid
BS4 Data grid is a complex component
Getting started
To use BS4 data grid simply include bs4 theme in your bundle file
//= require vendor/bootstrap-4.4.1-iplan-theme.bundleDefault behaviour
Every BS4 data grid requires a unique ID and .data-grid class.
- Data grid has a minimum predefined height and doesn't have a maximum height
- Toolbar, Sidebar header, Footer and Sidebar footer will stick to the top and bottom (respecting its minimum height)
- When space is "large enough" (e.g large screen, full screen modal or large modal in large screen etc..) Sidebar will be visible.
- When space isn't "large enough" sidebar will be hidden and views will be shown in a modal. Some toolbar buttons will be grouped in a dropdown to save space
- dsf
Structure
Data grid components:
-
Data grid
-
Sidebar
- is visible only when grid is "large enough".
- Sidebar content
-
Main
- is the space left after deducting sidebar width from the full width
- Header
-
Scroll wrapper
- Toolbar
- Content
- Footer
-
Sidebar
- is visible only when grid is "large enough".
|
|
|
|---|---|
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
.data-grid{id: 'data-grid-structure', style: 'border: 5px solid #0acf97'}
.data-grid-sidebar{style: 'border: 4px solid red'}
.data-grid-sidebar-content{style: 'border: 3px solid black'}
.data-grid-sidebar-header{style: 'border: 2px solid green'}
=button_tag type: 'button', class: 'close', 'data-toggle': 'sidebar' do
%span ×
.data-grid-sidebar-body{style: 'border: 2px solid blue'}
=render 'components/data_grid/data_grid/components/sidebar/views'
.data-grid-sidebar-footer{style: 'border: 2px solid purple'}
=button_tag type: 'button', 'data-action': 'collapse', class: 'btn btn-link' do
%i.fas.fa-caret-up
collapse
=button_tag type: 'button', 'data-action': 'expand', class: 'btn btn-link' do
%i.fas.fa-caret-down
expand
.data-grid-main{style: 'border: 4px solid pink'}
.data-grid-header{style: 'border: 3px solid blue'}
=render 'components/data_grid/data_grid/components/custom_header'
.data-grid-scroll-marker
.data-grid-scroll-wrapper{style: 'border: 3px solid cyan'}
.data-grid-toolbar{style: 'border: 2px solid orange'}
=render 'components/data_grid/data_grid/components/toolbar/actions', data_grid_id: 'data-grid-structure'
=render 'components/data_grid/data_grid/components/toolbar/multiple_select'
.data-grid-toolbar-margin-fix
.data-grid-content{style: 'border: 2px solid #333'}
=render "components/data_grid/data_grid/components/content/loader"
=render "components/data_grid/data_grid/components/content/list"
.data-grid-footer-margin-fix
.data-grid-footer{style: 'border: 2px solid green'}
=render 'components/data_grid/data_grid/components/footer/results'
=render 'components/data_grid/data_grid/components/footer/paging'
=render 'components/data_grid/data_grid/variants/data_grid_modals', data_grid_id: 'data-grid-structure'Scrollable content
Data grid with .data-grid-content-scrollable change its behaviour in the following ways:
-data_grid_content ||= 'table'
.border
=render 'components/data_grid/data_grid/variants/data_grid',
data_grid_id: 'inline-table-data-grid',
data_grid_content: data_grid_content,
data_grid_class: 'data-grid-content-scrollable'Selectable content
Data grid with .data-grid-content-selectable will make all rows selected all the time.
.border
=render 'components/data_grid/data_grid/variants/data_grid',
data_grid_id: 'data-grid-with-selectable-content',
data_grid_content: 'table',
data_grid_class: 'data-grid-content-scrollable data-grid-content-selectable'List
sdkfjhdsf hdsjk hjsd
|
|
|
|---|---|
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
|
|
this is where the content will be
and this is a link |
Data grid in a modal
dsafsda
- asdas
modal with data-grid:
in modal body
not in modal body
in modal body
.mb-2 modal with data-grid:
.row
.col-24.col-sm-auto
=button_tag 'content not scrollable', class: 'btn btn-light', 'data-toggle': "modal", 'data-target': "#modal-with-data-grid", type: 'button'
.small.text-muted='in modal body'
.col-24.col-sm-auto.mt-2.mt-sm-0
=button_tag 'content scrollable', class: 'btn btn-light', 'data-toggle': "modal", 'data-target': "#modal-with-data-grid-content-scrollable", type: 'button'
.small.text-muted='not in modal body'
.col-24.col-sm-auto.mt-2.mt-sm-0
=button_tag 'content scrollable', class: 'btn btn-light', 'data-toggle': "modal", 'data-target': "#modal-with-data-grid-content-scrollable-inside-modal-body", type: 'button'
.small.text-muted='in modal body'
.modal#modal-with-data-grid{tabindex: '-1'}
.modal-dialog.modal-lg
.modal-content
.modal-header
%h5.modal-title='Modal with data grid'
=button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
%span ×
.modal-body.p-0
.border-bottom.p-3 this is modal body
=render 'components/data_grid/data_grid/variants/data_grid',
data_grid_id: 'data-grid-list-in-modal',
data_grid_content: 'list',
data_grid_class: ''
.border-top.p-3 this is modal body
.modal-footer
=button_tag 'close', type: 'button', class: 'btn-block btn btn-secondary', 'data-dismiss': "modal"
.modal#modal-with-data-grid-content-scrollable{tabindex: '-1'}
.modal-dialog.modal-lg
.modal-content
.modal-header
%h5.modal-title='Modal with data grid'
=button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
%span ×
.border-bottom.p-3 this is the body
=render 'components/data_grid/data_grid/variants/data_grid',
data_grid_id: 'data-grid-table-in-modal',
data_grid_content: 'table',
data_grid_class: 'data-grid-content-scrollable'
.border-top.p-3 this is the body
.modal-footer
=button_tag 'close', type: 'button', class: 'btn-block btn btn-secondary', 'data-dismiss': "modal"
.modal#modal-with-data-grid-content-scrollable-inside-modal-body{tabindex: '-1'}
.modal-dialog.modal-lg
.modal-content
.modal-header
%h5.modal-title='Modal with data grid'
=button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
%span ×
.modal-body.p-0
.border-top.p-3 this is the body
=render 'components/data_grid/data_grid/variants/data_grid',
data_grid_id: 'data-grid-table-in-modal-body',
data_grid_content: 'table',
data_grid_class: 'data-grid-content-scrollable h-100'
.border-top.p-3 this is the body
.modal-footer
=button_tag 'close', type: 'button', class: 'btn-block btn btn-secondary', 'data-dismiss': "modal"
On this page