Web Component: j-DataGrid


  • Info
  • HTML
  • JS
  • CSS
  • Meta
Questions? Write us

j-DataGrid

This grid was created for single page applications and enterprise applications.

  • jComponent v19|v20
  • please try to understand the functionality
  • needed bootstrap grid system
  • you can render more than 30 000 rows without any problem
  • supports drag&drop columns
  • supports sorting
  • supports resizing of columns
  • supports vertical/horizontal scrolling
  • supports filters
  • supports checkboxes
  • custom scrollbars independent on OS
  • responsive
  • supports dark mode
  • IMPORTANT column options filter needs j-Directory component

TO-DO:

  • multisort
  • resizing columns for touch devices
  • re-ordering columns for touch devices

Data-source needs to contain:

{
    schema: 'schema_id', // NEW: optional, DataGrid supports multiple schemas (it means: multiple declaration of columns)
    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
}

or raw Array but you can't use pagination and external filters:

[{ name: 'Row 1' }, { name: 'Row 2' }];

Configuration:

  • filterlabel {String} a default placeholder for all filters (optional)
  • rememberfilter {Boolean} with true it remembers filters for every schema (default: true)
  • schema {String} a default schema (default: default)
  • pluralizepages {String} pluralization for pages (optional, default: # pages,# page,# pages,# pages)
  • pluralizeitems {String} pluralization for items (optional, default: # items,# item,# items,# items)
  • height {Number/String} height of grid, supported values: auto (default), NEW fluid, parent (or parent1, parent2) or NUMBER as height or selector for jQuery.closest()
  • minheight {Number} minimal height of grid, works with fluid and auto height (default: 200)
  • parent {String} selector for auto height option (default: window)
  • margin {Number} a top margin for height (optional, default: 0)
  • boolean {String} a values for filtering of boolean values (optional, default: true|on|yes)
  • resize {Boolean} enables resizing of columns (optional, default: true)
  • reorder {Boolean} enables re-ordering of columns (optional, default: true)
  • sort {Boolean} enables sorting (optional, default true)
  • remember {Boolean} remembers re-ordering and resizing columns (optional, default true)
  • checkbox {Boolean} enables checkboxes
  • colwidth {Number} a default column width in pixels (optional, default 150)
  • rowheight {Number} a default row height in pixels (optional, default: 24) + it depends on CSS
  • alignheader {String/Number} align for header right (or 2) or center (or 1) (optional, default: left)
  • alignfilter {String/Number} align for filter input right (or 2) or center (or 1) (optional, default: left)
  • align {String/Number} align for a column value right (or 2) or center (or 1) (optional, default: left)
  • click {String} a link to a path or function(row, grid, row_el), a record will be assigned/executed if the user clicks on a row
  • clickid {String} an identificator/property name for backwards redrawing (for previous row highlight), default: id
  • highlight {Boolean} each selected row (after click) will be highlighted (default: false)
  • unhighlight {Boolean} enables undo highlighting of selected row (default: true)
  • checked {String} path to a variable or path to function(rows, grid) is executed if the user selected/checked some rows
  • autoselect {Boolean} enables auto-select of first row in grid, it performs EXEC(config.click), default: false
  • limit {Number} a cluster limit, default: 80
  • numbering {Boolean}, optional default false
  • allowtitles {Boolean}, enables titles for all row values, optional default false
  • button {String} a link to function(btn_name, row, btn_element, event, name) is executed if the user clicks on a button in the row
  • exec {String} a link to function(type, filter, sort, page) for server-side operations only (it disables client-side sorting & filtering), supported types: refresh or page
  • changed {String} path to a variable or path to function(rows, grid) is executed if the user changed some rows
  • change {String/Boolean} boolean enables internal editing or string must contain a path to a variable or path to function(meta, next(meta)) is executed if the user double clicks on a column (meta can be null if the grid is refreshed) + next(null) replaces previous content again
  • columns {String} a path to definition of columns {Array}
  • dblclick {String} a link to function(row, grid, row_el) method, it's executed if the user double-clicks on a row
  • noborder {Boolean} can disable a border around the grid (default: false)
  • clusterize {Boolean} can disable clustered scrolling (default: true)
  • contextmenu {String} a link to function(e, grid) when the user raises context menu
  • autoformat {Boolean} enables auto-format types like email, phone and number (default: true)
  • controls {Boolean} enables controls defined in columns (default: true)
  • hfunc {String} a link to function(el) method, it's executed if the user clicks on the icon added to very first header row. usefull to integrate other component with DataGrid. e.g. j-filter
  • hfuncicon {String} hfunc icon e.g. home, cog, etc.
  • pagination {Boolean} enables/disables pagination (default: true)
    • config.exec will be executed if the scrollbar is at the end, and you can use as the raw response array of rows
  • ovalue {String} a default key for obtaining of value from column.options (default: id)
  • otext {String} a default key for obtaining of text from column.options (default: name)

Column properties:

  • name {String} a name of field in the row object
  • text {String} a column label, text with .ti ti-home will render Total icon
  • title {String} a column tooltip (optional)
  • width {Number} a column width (optional, default config.colwidth)
  • filter {String/Boolean} a placeholder for the filter or boolean can disable filter for this column (optional)
  • filtervalue {Object} optional, a preddefined filter value (default: undefined)
  • filtertype {Number/String}, 1 disables smart searching (default: 0 - it means enabled smart searching)
  • align {String} can be center or right (optional, default: left)
  • template {String} can be a Tangular template and the model is the entire object of row
  • sorting {Boolean} enables sorting (optional, default: true)
  • search {Boolean/String} true will filter a value according to the template result or String can be a Tangular template which will be used as a value for search
  • format {String/Number} can be used for date and numbers (count of decimals) field (optional), e.g. dd.MM.yyyy
  • hide {Boolean} hides a column
  • listcolumn {Boolean} default:true, false for removing column from columns list
  • hidden {String} as an arrow function column => true --> column will be hidden (e.g. for restricting user)
  • options {Object Array} optional, a custom filter for example [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r link to data-source
  • otext {String} optional, a key for text field in options, default config.otext
  • ovalue {String} optional, a key for value field in options, default config.ovalue
  • buttonapply {String} optional, a label for Apply button in columns, default: Apply
  • class {String} optional, a custom column class name
  • empty {String/Boolean} optional, can rewrite empty value with the value defined in empty field (true value uses --- as a default value)
  • min {Number} editable only a min. number value
  • max {Number} editable only a max. number value
  • required {Boolean} editable only
  • dirsearch {String/Boolean} a placeholder for j-Directory search, boolean with false will disable search
  • type {String} optional, can contain a data-type (string, boolean, date, number, email, phone or url) for the field
  • editable {Boolean} enables editing
  • currency {String} a currency name (must be defined in DEF.currencies)
  • editable {String} A path to custom editable function(meta), important: meta.next(new_value) or meta.cancel()
  • colorize {Boolean} enables a colorization of the value
  • monospace {Boolean} enables monospace font type
  • NEW raw {Boolean} enables/disables HTML escaping in column filters (default: false)
  • NEW pair {Boolean} enables/disables auto value pairing with options configuration (default: false)

Row controls (NEW):

  • can be defined as column type controls
  • must defined column template (Tangular, row is a model for Tangular for each row)
  • look to example
  • button click event is captured to config.button

Filtering:

  • numbers: (1) number searches an exact number, (2) number - number is an interval between numbers
  • strings: (1) string searches an exact string, (2) string1, string2, string3 is a multiple search criterium
  • dates: (1) year 2017 searches all dates in this year, (2) 2017-02-12 - 2017-03-13 <--> 02.12.2017 - 13.03.2017 is an interval between dates, (3) 12-20 - 12-31 <--> 20.12 - 31.12 an interval between dates in the current year ir (4) 2017-01 - 2018-05 <--> 01.2017 - 05.2018 or (5) -5 days <--> -1 week <--> -10 years

Methods:

  • component.redraw([reselect_again]) can redraw rows again (only for modifications, if you will remove some row you need to update the entire model)
  • component.resetfilter() can reset a filter
  • component.exportrows(page_from or true from the current page, pages_count, callback(rows, internal_options), [reset_to_page or true for the current page]) can export rows with server-side rendering
  • component.appendrow(row_object, [scrolldown], [prepend]) appends and render row
  • component.redrawrow(row_object, [new_object_row]) redraws row or NEW: replaces+redraws row_object with a new new_object_row
  • component.clear() clears all changes
  • component.select(row) selects row must be the same object as in data-source
  • component.editcolumn(row_index, col_index) executes config.change internally (only for advanced usage)
  • component.applyfilter(obj) can apply a custom filter { name: 'Peter', age: '20 - 50' }
  • component.resetcolumns() resets columns
  • component.readfilter() returns a current filter
  • component.rebind(schemaname__or__columnsdeclaration) the method rebinds the schema
  • component.reload() executes config.exec with the current filter and sorting
  • component.empty() empties all rows
  • component.redrawcolumns() redraw columns without reset them
  • NEW: component.schema(name) changes a schema and refreshes data

Properties:

  • component.meta returns internal meta info about filters, columns and rows

Good to know:

  • NULL('link.to.data') evaluates config.exec
  • SET('link.to.data', data, 'noscroll') --> noscroll type disables reseting of scrolling

How to extend a class of row?

  • look to the {{ if active }} line, it extends a class of row by adding dg-active-class if the active will be valid
[
    '{{ if active }} dg-active-class{{ fi }}',
    { name: 'name', text: 'Name', width: 200 },
    // other columns ...
]

Multiple schemas:

<ui-component name="datagrid" path="obj">

    <script type="text/plain" data-id="SCHEMA_A">
        [
            { name: 'name', text: 'Name', width: 200 },
            // ...
        ]
    </script>

    <script type="text/plain" data-id="SCHEMA_B">
        [
            { name: 'price', text: 'Price', width: 100 },
            // ...
        ]
    </script>

</ui-component>

<script>
    // Usage
    var obj = {};
    obj.schema = 'SCHEMA_A';
    obj.items = [];

    // Changing of schema
    setTimeout(function() {
        obj.schema = 'SCHEMA_B';
        obj.items = [];
        UPD('obj');
    }, 5000);
</script>

Author

Real-time preview

Refresh previewDownload HTMLSource-Code on GitHub