Web Component: j-Grid
j-Grid
- please try to understand the functionality
- needed
bootstrap
grid system
Data-source needs to contain:
{
items: [{ name: 'Row 1' }, { name: 'Row 2' }, ...] // items
page: 1, // current pages
pages: 30, // count of pages
limit: 5, // items limit per page
count: 150 // count of items in DB
}
Configuration:
filter
{Boolean} shows a filter (optional, default:true
)filterlabel
{String} a default placeholder for all filters (optional)external
{Boolean} is an external data-source (dynamic data loading) (optinal, default:false
)pluralizepages
{String} pluralization for pages (optional, default:# pages,# page,# pages,# pages
)pluralizeitems
{String} pluralization for items (optional, default:# items,# item,# items,# items
)exec
{String} a link tofunction(type, filter, sort, page)
, it's evaluated if the grid performs some operationspadding
{Number} height padding (optional, default:0
)autosize
{Boolean} enables full-height auto-size (optional, defaulttrue
)boolean
{String} a values for filtering of boolean values (optional, default:true|on|yes
)pagination
{Boolean} shows pagination panel (optional, default:false
)init
{Function} an init function for e.g. custom columnschecked
{Function} if rows will contain<input type="checkbox
then this function will be evaluated when the checkbox is checked
Column properties:
name
{String} a name of field in the objecttext
{String} a column labeltitle
{String} a column tooltip (optional)size
{Number} a column width:1
small,2
medium,3
large,4
very large (optional, default1
)size
{String} a column width in pixels, value needs to containspx
e.g.20px
filter
{String/Boolean} a placeholder for the filter orboolean
can disable filter for this column (optional)format
{String/Number} for formatting values (string
for date,number
for numbers)background
{String} a background color (optional)align
{String} can becenter
orright
(optional, default:left
)template
{String} can be a Tangular template and the model is the whole object of rowrender
{String/Function(value, column, row)} a custom rendering,string
is evaluated as an arrow functionheader
{String/Function(column)} a custom rendering of header,string
is evaluated as an arrow functionsort
{Boolean} enables sorting (optional, default:true
)class
{String} additional classes for the column, e.g.hidden-xs
search
{Boolean/String}true
will filter a value according to thetemplate
result orString
can be a Tangular template which will be used as a value for search
Filtering:
numbers
: (1)number
searches an exact number, (2)number / number
is an interval between numbersstrings
: (1)string
searches an exact string, (2)string1, string2, string3
is a multiple search criteriumdates
: (1) year2017
searches all dates in this year, (2)2017-02-12 / 2017-03-13
is an interval between dates, (3)20.12 / 31.12
an interval between dates in the current year
Author
- Peter Širka petersirka@gmail.com
- License
Created
26. august 2017
Updated
31. january 2023
Version
v1
License
https://www.totaljs.com/license/
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com