Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Overview Official Website

Grid.js is a Free and open-source JavaScript table plugin

Basic#

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

                                                        
                                                            <div id="table-gridjs"></div>
                                                        
                                                    
                                                    
                                                        // Basic Table
                                                        if (document.getElementById("table-gridjs"))
                                                             new gridjs.Grid({
                                                                  columns: [{
                                                                       name: 'ID',
                                                                       formatter: (function (cell) {
                                                                            return gridjs.html('' + cell + '');
                                                                       })
                                                                  },
                                                                       "Name",
                                                                  {
                                                                       name: 'Email',
                                                                       formatter: (function (cell) {
                                                                            return gridjs.html('' + cell + '');
                                                                       })
                                                                  },
                                                                       "Position", "Company", "Country",
                                                                  {
                                                                       name: 'Actions',
                                                                       width: '120px',
                                                                       formatter: (function (cell) {
                                                                            return gridjs.html("" + "Details" + "");
                                                                       })
                                                                  },
                                                                  ],
                                                                  pagination: {
                                                                       limit: 5
                                                                  },
                                                                  sort: true,
                                                                  search: true,
                                                                  data: [
                                                                       ["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
                                                                       ["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
                                                                       ["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
                                                                       ["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
                                                                       ["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
                                                                       ["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
                                                                       ["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
                                                                       ["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
                                                                       ["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
                                                                       ["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
                                                                  ]
                                                             }).render(document.getElementById("table-gridjs"));
                                                    
                                                
Pagination#

Pagination can be enabled by setting pagination: true:

                                                    
                                                        <div id="table-pagination"></div> 
                                                    
                                                
                                                    
                                                        // pagination Table
                                                        if (document.getElementById("table-pagination"))
                                                             new gridjs.Grid({
                                                                  columns: [{
                                                                       name: 'ID',
                                                                       width: '120px',
                                                                       formatter: (function (cell) {
                                                                            return gridjs.html('' + cell + '');
                                                                       })
                                                                  }, "Name", "Date", "Total",
                                                                  {
                                                                       name: 'Actions',
                                                                       width: '100px',
                                                                       formatter: (function (cell) {
                                                                            return gridjs.html("");
                                                                       })
                                                                  },
                                                                  ],
                                                                  pagination: {
                                                                       limit: 5
                                                                  },
                                              
                                                                  data: [
                                                                       ["#RB2320", "Alice", "07 Oct, 2024", "$24.05"],
                                                                       ["#RB8652", "Bob", "07 Oct, 2024", "$26.15"],
                                                                       ["#RB8520", "Charlie", "06 Oct, 2024", "$21.25"],
                                                                       ["#RB9512", "David", "05 Oct, 2024", "$25.03"],
                                                                       ["#RB7532", "Eve", "05 Oct, 2024", "$22.61"],
                                                                       ["#RB9632", "Frank", "04 Oct, 2024", "$24.05"],
                                                                       ["#RB7456", "Grace", "04 Oct, 2024", "$26.15"],
                                                                       ["#RB3002", "Hannah", "04 Oct, 2024", "$21.25"],
                                                                       ["#RB9857", "Ian", "03 Oct, 2024", "$22.61"],
                                                                       ["#RB2589", "Jane", "03 Oct, 2024", "$25.03"],
                                                                  ]
                                                             }).render(document.getElementById("table-pagination"));
                                                    
                                                

Grid.js supports global search on all rows and columns. Set search: true to enable the search plugin:

                                                    
                                                        <div id="table-search"></div>
                                                    
                                                
                                                    
                                                        // search Table
                                                        if (document.getElementById("table-search"))
                                                             new gridjs.Grid({
                                                                  columns: ["Name", "Email", "Position", "Company", "Country"],
                                                                  pagination: {
                                                                       limit: 5
                                                                  },
                                                                  search: true,
                                                                  data: [
                                                                       ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
                                                                       ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
                                                                       ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
                                                                       ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
                                                                       ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
                                                                       ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
                                                                       ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
                                                                       ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
                                                                       ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
                                                                       ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
                                                                  ]
                                                             }).render(document.getElementById("table-search"));
                                                    
                                                
Sorting#

To enable sorting, simply add sort: true to your config:

                                                    
                                                        <div id="table-sorting"></div>
                                                    
                                                
                                                    
                                                        // Sorting Table
                                                        if (document.getElementById("table-sorting"))
                                                             new gridjs.Grid({
                                                                  columns: ["Name", "Email", "Position", "Company", "Country"],
                                                                  pagination: {
                                                                       limit: 5
                                                                  },
                                                                  sort: true,
                                                                  data: [
                                                                       ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
                                                                       ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
                                                                       ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
                                                                       ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
                                                                       ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
                                                                       ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
                                                                       ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
                                                                       ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
                                                                       ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
                                                                       ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
                                                                  ]
                                                             }).render(document.getElementById("table-sorting"));
                                                    
                                                
Loading State#

Grid.js renders a loading bar automatically while it waits for the data to be fetched. Here we are using an async function to demonstrate this behaviour (e.g. an async function can be a XHR call to a server backend)

                                                    
                                                        <div id="table-loading-state"></div>
                                                    
                                                
                                                    
                                                        // Loading State Table
                                                        if (document.getElementById("table-loading-state"))
                                                            new gridjs.Grid({
                                                                    columns: ["Name", "Email", "Position", "Company", "Country"],
                                                                    pagination: {
                                                                        limit: 5
                                                                    },
                                                                    sort: true,
                                                                    data: function () {
                                                                        return new Promise(function (resolve) {
                                                                            setTimeout(function () {
                                                                                resolve([
                                                                                        ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
                                                                                        ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
                                                                                        ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
                                                                                        ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
                                                                                        ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
                                                                                        ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
                                                                                        ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
                                                                                        ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
                                                                                        ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
                                                                                        ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
                                                                                ])
                                                                            }, 2000);
                                                                        });
                                                                    }
                                                            }).render(document.getElementById("table-loading-state"));
                                                    
                                                
Fixed Header#

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

                                                    
                                                        <div id="table-fixed-header"></div>
                                                    
                                                
                                                    
                                                        // Fixed Header
                                                        if (document.getElementById("table-fixed-header"))
                                                            new gridjs.Grid({
                                                                    columns: ["Name", "Email", "Position", "Company", "Country"],
                                                                    sort: true,
                                                                    pagination: true,
                                                                    fixedHeader: true,
                                                                    height: '400px',
                                                                    data: [
                                                                        ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
                                                                        ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
                                                                        ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
                                                                        ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
                                                                        ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
                                                                        ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
                                                                        ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
                                                                        ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
                                                                        ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
                                                                        ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
                                                                    ]
                                                            }).render(document.getElementById("table-fixed-header"));
                                                    
                                                
Hidden Columns#

Add hidden: true to the columns definition to hide them.

                                                    
                                                        <div id="table-hidden-column"></div>
                                                    
                                                
                                                    
                                                        // Hidden Columns
                                                        if (document.getElementById("table-hidden-column"))
                                                            new gridjs.Grid({
                                                                    columns: ["Name", "Email", "Position", "Company",
                                                                        {
                                                                            name: 'Country',
                                                                            hidden: true
                                                                        },
                                                                    ],
                                                                    pagination: {
                                                                        limit: 5
                                                                    },
                                                                    sort: true,
                                                                    data: [
                                                                        ["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
                                                                        ["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
                                                                        ["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
                                                                        ["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
                                                                        ["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
                                                                        ["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
                                                                        ["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
                                                                        ["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
                                                                        ["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
                                                                        ["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
                                                                    ]
                                                            }).render(document.getElementById("table-hidden-column"));
                                                    
                                                
© Larkon. Crafted by Techzaa