This time I will share jQuery Plugin and tutorial about Performant Data Table Plugin With jQuery – dgtable, hope it will help you in programming stack.
| File Size: | 166 KB |
|---|---|
| Views Total: | 274 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
dgtable is a performant, customizable, dynamic data table jQuery plugin for presenting large data set in a sortable, filterable, scrollable, and draggable table view.
Features:
- Click table headers to sort columns.
- Drag table headers to move & resize columns.
- Supports for virtual scroll, which means only the visible rows are rendered.
- Allows you to dynamically insert tabular data to the table.
- Lots of API methods and event handlers.
Table Of Contents:
How to use it:
1. Install and build.
1 |
$ npm install |
2. Place the jquery.dgtable.umd.js JavaScript library after loading the latest jQuery library.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/dist/jquery.dgtable.umd.js"></script> |
3. Create a new DGTable instance and define the column data as follows.
01 |
var table = new DGTable({ |
02 |
columns: [ |
03 |
{name: 'first', label: 'Locked column', movable: false, resizable: false}, |
04 |
{name: 'last', label: 'Test data', width: '30%'}, |
05 |
{name: 'address', label: 'More', width: '30%'}, |
06 |
{name: 'city', label: 'Example', width: '40%'} |
07 |
], |
08 |
height: 500, |
09 |
width: DGTable.Width.SCROLL // or DGTable.Width.AUTO, DGTable.Width.NONE |
10 |
}); |
4. Append the data table to a container element.
1 |
<div id="example"></div> |
1 |
$('#example').append(table.el); |
5. Add tabular data to the data table.
1 |
var sampleData = [ |
2 |
{ first: 'Pearl', last: 'Button', address: '69 Hendford Hill', city: 'MOSS-SIDE' }, |
3 |
{ first: 'Daisy', last: 'Brockhouse', address: '4667 rue Levy', city: 'Montreal' }, |
4 |
{ first: 'Asphodel', last: 'Goodchild', address: '74 New Dover Rd', city: 'WALPOLE ST ANDREW' }, |
5 |
{ first: 'Primrose', last: 'Oldbuck', address: '1331 Sherwood Circle', city: 'Lafayette' }, |
6 |
{ first: 'Savanna', last: 'Took', address: '4200 Penn Street', city: 'Stlouis' }, |
7 |
// ... |
8 |
] |
1 |
table.render().addRows(sampleData); |
6. All possible configuration options.
001 |
var table = new DGTable({ |
002 |
003 |
// column options |
004 |
columns: [ |
005 |
{ |
006 |
width: '30%', // Number|String |
007 |
name: 'Column Name', |
008 |
label: 'Column Label', |
009 |
sortable: true, |
010 |
movable: true, |
011 |
resizable: true, |
012 |
visible: true, |
013 |
cellClasses: '', // additional CSS Class |
014 |
ignoreMin: false, // ignore the minimum width |
015 |
comparePath: dataPath // path to the data to use for comparison |
016 |
} |
017 |
], |
018 |
019 |
// height of the data table |
020 |
height: 500, |
021 |
022 |
// width of the data table |
023 |
// or DGTable.Width.AUTO, DGTable.Width.NONE |
024 |
width: DGTable.Width.SCROLL, |
025 |
026 |
// work in virtual mode or not |
027 |
// which means only the visible rows are rendered |
028 |
virtualTable: true, |
029 |
030 |
// enable resizable columns |
031 |
resizableColumns: true, |
032 |
033 |
// enable draggable columns |
034 |
movableColumns: true, |
035 |
036 |
// number of columns you can sort, one after another? |
037 |
sortableColumns: 1, |
038 |
039 |
// auto adjust the column width for sort arrow |
040 |
adjustColumnWidthForSortArrow: true, |
041 |
042 |
// auto grow/shrink the relative width to fill the table's width |
043 |
relativeWidthGrowsToFillWidth: true, |
044 |
relativeWidthShrinksToFillWidth: false, |
045 |
046 |
// auto convert auto-width columns to relative width |
047 |
convertColumnWidthsToRelative: false, |
048 |
049 |
// auto fill the table's width |
050 |
autoFillTableWidth: false, |
051 |
052 |
// additional cell classes |
053 |
cellClasses: '', |
054 |
055 |
// String|String[]|COLUMN_SORT_OPTIONS|COLUMN_SORT_OPTIONS[] |
056 |
// Can be a column or an array of columns. |
057 |
// Each column is a String or a COLUMN_SORT_OPTIONS: |
058 |
// column: String Column name |
059 |
// descending: Boolean=false Is this column sorted in descending order? |
060 |
sortColumn: '', |
061 |
062 |
// buffer size for virtual table |
063 |
rowsBufferSize: 10, |
064 |
065 |
// minimum column width |
066 |
minColumnWidth: 35, |
067 |
068 |
// width of resize area |
069 |
resizeAreaWidth: 8, |
070 |
071 |
// CSS class of resizer |
