new gridjs.Grid({columns:[{name:"ID",width:"80px",formatter:function(e){return gridjs.html('<span class="fw-semibold">'+e+"</span>")}},{name:"Name",width:"150px"},{name:"Email",width:"220px",formatter:function(e){return gridjs.html('<a href="">'+e+"</a>")}},{name:"Position",width:"250px"},{name:"Company",width:"180px"},{name:"Country",width:"180px"}],pagination:{limit:5},sort:!0,search:!0,data:[["11","John","john@example.com","Developer","ABC Corp","USA"],["12","Jane","jane@example.com","Designer","XYZ Inc","Canada"],["13","Alice","alice@example.com","Manager","123 Company","Australia"],["14","Bob","bob@example.com","Engineer","456 Ltd","UK"],["15","Eve","eve@example.com","Analyst","789 Enterprises","France"],["16","Charlie","charlie@example.com","Consultant","Hello World","Germany"],["17","David","david@example.com","Architect","Goodbye World","Japan"],["18","Grace","grace@example.com","Programmer","Foo Bar","China"],["19","Heather","heather@example.com","Supervisor","Baz Qux","Brazil"],["20","Isaac","isaac@example.com","Administrator","Fizz Buzz","India"]]}).render(document.getElementById("table-gridjs")),new gridjs.Grid({columns:[{name:"ID",width:"80px",formatter:function(e){return gridjs.html('<span class="fw-semibold">'+e+"</span>")}},{name:"Name",width:"150px"},{name:"Email",width:"220px",formatter:function(e){return gridjs.html('<a href="">'+e+"</a>")}},{name:"Position",width:"250px"},{name:"Company",width:"180px"},{name:"Country",width:"180px"}],pagination:{limit:3},data:[["11","John","john@example.com","Developer","ABC Corp","USA"],["12","Jane","jane@example.com","Designer","XYZ Inc","Canada"],["13","Alice","alice@example.com","Manager","123 Company","Australia"],["14","Bob","bob@example.com","Engineer","456 Ltd","UK"],["15","Eve","eve@example.com","Analyst","789 Enterprises","France"],["16","Charlie","charlie@example.com","Consultant","Hello World","Germany"],["17","David","david@example.com","Architect","Goodbye World","Japan"],["18","Grace","grace@example.com","Programmer","Foo Bar","China"],["19","Heather","heather@example.com","Supervisor","Baz Qux","Brazil"],["20","Isaac","isaac@example.com","Administrator","Fizz Buzz","India"]]}).render(document.getElementById("table-pagination")),new gridjs.Grid({columns:[{name:"Name",width:"150px"},{name:"Email",width:"250px"},{name:"Position",width:"250px"},{name:"Company",width:"250px"},{name:"Country",width:"150px"}],pagination:{limit:5},search:!0,data:[["John","john@example.com","Developer","ABC Corp","USA"],["Jane","jane@example.com","Designer","XYZ Inc","Canada"],["Alice","alice@example.com","Manager","123 Company","Australia"],["Bob","bob@example.com","Engineer","456 Ltd","UK"],["Eve","eve@example.com","Analyst","789 Enterprises","France"],["Charlie","charlie@example.com","Consultant","Hello World","Germany"],["David","david@example.com","Architect","Goodbye World","Japan"],["Grace","grace@example.com","Programmer","Foo Bar","China"],["Heather","heather@example.com","Supervisor","Baz Qux","Brazil"],["Isaac","isaac@example.com","Administrator","Fizz Buzz","India"]]}).render(document.getElementById("table-search")),new gridjs.Grid({columns:[{name:"Name",width:"150px"},{name:"Email",width:"250px"},{name:"Position",width:"250px"},{name:"Company",width:"250px"},{name:"Country",width:"150px"}],pagination:{limit:5},sort:!0,data:[["John","john@example.com","Developer","ABC Corp","USA"],["Jane","jane@example.com","Designer","XYZ Inc","Canada"],["Alice","alice@example.com","Manager","123 Company","Australia"],["Bob","bob@example.com","Engineer","456 Ltd","UK"],["Eve","eve@example.com","Analyst","789 Enterprises","France"],["Charlie","charlie@example.com","Consultant","Hello World","Germany"],["David","david@example.com","Architect","Goodbye World","Japan"],["Grace","grace@example.com","Programmer","Foo Bar","China"],["Heather","heather@example.com","Supervisor","Baz Qux","Brazil"],["Isaac","isaac@example.com","Administrator","Fizz Buzz","India"]]}).render(document.getElementById("table-sorting")),new gridjs.Grid({columns:[{name:"Name",width:"150px"},{name:"Email",width:"250px"},{name:"Position",width:"250px"},{name:"Company",width:"250px"},{name:"Country",width:"150px"}],pagination:{limit:5},sort:!0,data:function(){return new Promise(function(e){setTimeout(function(){e([["John","john@example.com","Developer","ABC Corp","USA"],["Jane","jane@example.com","Designer","XYZ Inc","Canada"],["Alice","alice@example.com","Manager","123 Company","Australia"],["Bob","bob@example.com","Engineer","456 Ltd","UK"],["Eve","eve@example.com","Analyst","789 Enterprises","France"],["Charlie","charlie@example.com","Consultant","Hello World","Germany"],["David","david@example.com","Architect","Goodbye World","Japan"],["Grace","grace@example.com","Programmer","Foo Bar","China"],["Heather","heather@example.com","Supervisor","Baz Qux","Brazil"],["Isaac","isaac@example.com","Administrator","Fizz Buzz","India"]])},2e3)})}}).render(document.getElementById("table-loading-state")),new gridjs.Grid({columns:[{name:"Name",width:"150px"},{name:"Email",width:"250px"},{name:"Position",width:"250px"},{name:"Company",width:"250px"},{name:"Country",width:"150px"}],sort:!0,pagination:!0,fixedHeader:!0,height:"400px",data:[["John","john@example.com","Developer","ABC Corp","USA"],["Jane","jane@example.com","Designer","XYZ Inc","Canada"],["Alice","alice@example.com","Manager","123 Company","Australia"],["Bob","bob@example.com","Engineer","456 Ltd","UK"],["Eve","eve@example.com","Analyst","789 Enterprises","France"],["Charlie","charlie@example.com","Consultant","Hello World","Germany"],["David","david@example.com","Architect","Goodbye World","Japan"],["Grace","grace@example.com","Programmer","Foo Bar","China"],["Heather","heather@example.com","Supervisor","Baz Qux","Brazil"],["Isaac","isaac@example.com","Administrator","Fizz Buzz","India"]]}).render(document.getElementById("table-fixed-header")),new gridjs.Grid({columns:[{name:"Name",width:"120px"},{name:"Email",width:"250px"},{name:"Position",width:"250px"},{name:"Company",width:"250px"},{name:"Country",hidden:!0}],pagination:{limit:5},sort:!0,data:[["John","john@example.com","Developer","ABC Corp","USA"],["Jane","jane@example.com","Designer","XYZ Inc","Canada"],["Alice","alice@example.com","Manager","123 Company","Australia"],["Bob","bob@example.com","Engineer","456 Ltd","UK"],["Eve","eve@example.com","Analyst","789 Enterprises","France"],["Charlie","charlie@example.com","Consultant","Hello World","Germany"],["David","david@example.com","Architect","Goodbye World","Japan"],["Grace","grace@example.com","Programmer","Foo Bar","China"],["Heather","heather@example.com","Supervisor","Baz Qux","Brazil"],["Isaac","isaac@example.com","Administrator","Fizz Buzz","India"]]}).render(document.getElementById("table-hidden-column"));