Get Pines at SourceForge.net. Fast, secure and Free Open Source software downloads

Pines Grid is a JavaScript data grid plugin for the jQuery JavaScript library, developed by Hunter Perrin as part of Pines. It is designed to provide maximum flexibility, while still being easy to use and easy to implement. Try out different themes using the selector in the top right corner of this page. Pines Grid is distributed under the GPL, LGPL, and MPL. This triple copyleft licensing model avoids incompatibility with other open source licenses.

Features

  • Pagination.
  • Filtering.
  • Sorting.
  • Customizeable toolbar.
  • Column resizing.
  • Column hiding.
  • Hierarchical data.
  • Selecting.
  • Saving and loading state. (Current page, filter, etc.)
  • Adding and removing items dynamically.
  • Selecting and deselecting items dynamically.
  • XHTML 1.0 Strict compliance.

Demos

This table was gridified on $(document).ready() with a toolbar:



NameE-MailOccupationSalaryNumberDescription
Bobbob@example.comBuilder$25,000.001Mauris eget dolor arcu, in aliquet eros.
Joejoe@example.comWrecker$20,000.002Etiam ultrices vulputate venenatis.
Stevesteve@example.comBaker$23,000.003Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Janejane@example.comMailman$23,000.004Nunc ut urna ac neque malesuada tempus sit amet at felis. Nulla facilisi. Nullam varius ornare lacus id vestibulum.
Williewillie@example.comRetired$0.005Pellentesque ornare tellus nulla, quis rhoncus lorem.
Bobobobo@example.comSalesman$40,000.007Duis ut augue tellus. Fusce nisl nulla, blandit vel rutrum vel, commodo quis felis.
Chrischris@example.comStudent$0.0010Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque iaculis pharetra turpis.
Stephsteph@example.comStudent$0.0011Sed suscipit quam ut arcu iaculis pretium.
Karenkaren@example.comSinger$30,000.009Nam et sem quam, eu iaculis risus.
Arnoldarnold@example.comGovernor$60,000.006Nulla at orci leo, id egestas felis.
Bachbach@example.comI'll be$18,000.008In enim lectus, tincidunt quis dapibus nec, feugiat ac enim.
Jamesjames@example.comTeacher$33,000.0012Mauris ac odio mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Billybilly@example.comJudge$28,000.0113Nullam gravida velit sed leo viverra venenatis. Morbi vulputate nibh dui. Sed tincidunt ligula nulla, sit amet adipiscing quam.
Rickrick@example.comSheriff$28,000.0014Nam dolor nisl, accumsan a cursus et, blandit ac dolor. Morbi dui ligula, pulvinar nec malesuada id, blandit et eros. Pellentesque ut elit nulla, a ultricies tellus.
Joshjosh@example.comShopkeep$19,000.0015Morbi dictum velit vitae est ornare at lobortis nunc venenatis. Pellentesque non neque eget dui volutpat varius et non nibh.
Buckbuck@example.comPilot$26,000.0016Vestibulum fringilla cursus nulla, vitae euismod nulla laoreet non. Sed tincidunt facilisis hendrerit. Nulla facilisi. Aliquam laoreet vestibulum tempus.
Jasonjason@example.comKing$70,000.0017Ut faucibus gravida mauris, in auctor elit gravida sit amet.
Geoffreygeoffrey@example.comUndertaker$19,000.0018Proin a mi vulputate arcu ultricies sodales. Aliquam nec turpis lacus, ac lobortis nunc. In leo justo, varius non dignissim in, pellentesque non velit.
Natenate@example.comWorker$17,000.0019Sed id turpis ante. Mauris ac massa dui. Fusce consectetur magna quis dui mattis in fermentum sem commodo. Quisque semper pellentesque dictum.
Alexalex@example.comFisherman$18,000.0020Donec sed sem vitae urna commodo porttitor ut sit amet neque. Cras massa lectus, fringilla id varius in, mollis vel tellus. Quisque mollis neque vel metus laoreet pellentesque. Praesent ornare cursus convallis.
Barbarabarbara@example.comEngineer$38,000.0021Nunc ut lectus diam. Duis feugiat nulla quis metus sagittis in semper libero tincidunt. Vivamus pulvinar suscipit sagittis.
Geraldgerald@example.comLibrarian$18,000.0022Nullam volutpat mi vitae velit luctus ultrices vel in felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Janetjanet@example.comMachine Setter$20,000.0023Cras nisi velit, gravida quis lacinia ut, condimentum vitae ligula. Quisque id quam vitae massa aliquam suscipit euismod ac metus.
Ericeric@example.comGroomer$18,000.0024Curabitur blandit ornare turpis, nec consequat nisi suscipit in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Danieldaniel@example.comFlight Service Specialist$32,000.0025Aenean neque quam, mollis vitae rhoncus non, sollicitudin vel quam. Donec lectus arcu, viverra eget tristique sed, venenatis id sem.


Nothing selected.
NameE-Mail
Bobbob@example.com
Joejoe@example.com
Stevesteve@example.com
Janejane@example.com
Williewillie@example.com
Bobobobo@example.com
Chrischris@example.com
Stephsteph@example.com
Karenkaren@example.com
Arnoldarnold@example.com
Bachbach@example.com
Jamesjames@example.com
Billybilly@example.com
Rickrick@example.com
Joshjosh@example.com
Buckbuck@example.com
Jasonjason@example.com
Geoffreygeoffrey@example.com
Natenate@example.com


NameE-Mail
Bobbob@example.com
Joejoe@example.com
Stevesteve@example.com
Janejane@example.com
Williewillie@example.com
Bobobobo@example.com
Chrischris@example.com
Stephsteph@example.com
Karenkaren@example.com
Arnoldarnold@example.com
Bachbach@example.com
Jamesjames@example.com
Billybilly@example.com
Rickrick@example.com
Joshjosh@example.com
Buckbuck@example.com
Jasonjason@example.com
NameE-Mail
Geoffreygeoffrey@example.com
Natenate@example.com


$('#test2').pgrid();
NameE-MailOccupationSalaryNumberDescription
Bobbob@example.comBuilder$25,000.001Mauris eget dolor arcu, in aliquet eros.
Joejoe@example.comWrecker$20,000.002Etiam ultrices vulputate venenatis.
Stevesteve@example.comBaker$23,000.003Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Janejane@example.comMailman$23,000.004Nunc ut urna ac neque malesuada tempus sit amet at felis. Nulla facilisi. Nullam varius ornare lacus id vestibulum.
Williewillie@example.comRetired$0.005Pellentesque ornare tellus nulla, quis rhoncus lorem.
Bobobobo@example.comSalesman$40,000.007Duis ut augue tellus. Fusce nisl nulla, blandit vel rutrum vel, commodo quis felis.
Chrischris@example.comStudent$0.0010Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque iaculis pharetra turpis.
Stephsteph@example.comStudent$0.0011Sed suscipit quam ut arcu iaculis pretium.
Karenkaren@example.comSinger$30,000.009Nam et sem quam, eu iaculis risus.
Arnoldarnold@example.comGovernor$60,000.006Nulla at orci leo, id egestas felis.
Bachbach@example.comI'll be$18,000.008In enim lectus, tincidunt quis dapibus nec, feugiat ac enim.
Jamesjames@example.comTeacher$33,000.0012Mauris ac odio mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Billybilly@example.comJudge$28,000.0113Nullam gravida velit sed leo viverra venenatis. Morbi vulputate nibh dui. Sed tincidunt ligula nulla, sit amet adipiscing quam.
Rickrick@example.comSheriff$28,000.0014Nam dolor nisl, accumsan a cursus et, blandit ac dolor. Morbi dui ligula, pulvinar nec malesuada id, blandit et eros. Pellentesque ut elit nulla, a ultricies tellus.
Joshjosh@example.comShopkeep$19,000.0015Morbi dictum velit vitae est ornare at lobortis nunc venenatis. Pellentesque non neque eget dui volutpat varius et non nibh.
Buckbuck@example.comPilot$26,000.0016Vestibulum fringilla cursus nulla, vitae euismod nulla laoreet non. Sed tincidunt facilisis hendrerit. Nulla facilisi. Aliquam laoreet vestibulum tempus.
Jasonjason@example.comKing$70,000.0017Ut faucibus gravida mauris, in auctor elit gravida sit amet.
Geoffreygeoffrey@example.comUndertaker$19,000.0018Proin a mi vulputate arcu ultricies sodales. Aliquam nec turpis lacus, ac lobortis nunc. In leo justo, varius non dignissim in, pellentesque non velit.
Natenate@example.comWorker$17,000.0019Sed id turpis ante. Mauris ac massa dui. Fusce consectetur magna quis dui mattis in fermentum sem commodo. Quisque semper pellentesque dictum.
Alexalex@example.comFisherman$18,000.0020Donec sed sem vitae urna commodo porttitor ut sit amet neque. Cras massa lectus, fringilla id varius in, mollis vel tellus. Quisque mollis neque vel metus laoreet pellentesque. Praesent ornare cursus convallis.
Barbarabarbara@example.comEngineer$38,000.0021Nunc ut lectus diam. Duis feugiat nulla quis metus sagittis in semper libero tincidunt. Vivamus pulvinar suscipit sagittis.
Geraldgerald@example.comLibrarian$18,000.0022Nullam volutpat mi vitae velit luctus ultrices vel in felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Janetjanet@example.comMachine Setter$20,000.0023Cras nisi velit, gravida quis lacinia ut, condimentum vitae ligula. Quisque id quam vitae massa aliquam suscipit euismod ac metus.
Ericeric@example.comGroomer$18,000.0024Curabitur blandit ornare turpis, nec consequat nisi suscipit in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Danieldaniel@example.comFlight Service Specialist$32,000.0025Aenean neque quam, mollis vitae rhoncus non, sollicitudin vel quam. Donec lectus arcu, viverra eget tristique sed, venenatis id sem.


NameE-MailOccupationSalaryNumberDescription
Bobbob@example.comBuilder$25,000.001Mauris eget dolor arcu, in aliquet eros.
Joejoe@example.comWrecker$20,000.002Etiam ultrices vulputate venenatis.
Stevesteve@example.comBaker$23,000.003Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Janejane@example.comMailman$23,000.004Nunc ut urna ac neque malesuada tempus sit amet at felis. Nulla facilisi. Nullam varius ornare lacus id vestibulum.
Williewillie@example.comRetired$0.005Pellentesque ornare tellus nulla, quis rhoncus lorem.
Bobobobo@example.comSalesman$40,000.007Duis ut augue tellus. Fusce nisl nulla, blandit vel rutrum vel, commodo quis felis.
Chrischris@example.comStudent$0.0010Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque iaculis pharetra turpis.
Stephsteph@example.comStudent$0.0011Sed suscipit quam ut arcu iaculis pretium.
Karenkaren@example.comSinger$30,000.009Nam et sem quam, eu iaculis risus.
Arnoldarnold@example.comGovernor$60,000.006Nulla at orci leo, id egestas felis.
Bachbach@example.comI'll be$18,000.008In enim lectus, tincidunt quis dapibus nec, feugiat ac enim.
Jamesjames@example.comTeacher$33,000.0012Mauris ac odio mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Billybilly@example.comJudge$28,000.0113Nullam gravida velit sed leo viverra venenatis. Morbi vulputate nibh dui. Sed tincidunt ligula nulla, sit amet adipiscing quam.
Rickrick@example.comSheriff$28,000.0014Nam dolor nisl, accumsan a cursus et, blandit ac dolor. Morbi dui ligula, pulvinar nec malesuada id, blandit et eros. Pellentesque ut elit nulla, a ultricies tellus.
Joshjosh@example.comShopkeep$19,000.0015Morbi dictum velit vitae est ornare at lobortis nunc venenatis. Pellentesque non neque eget dui volutpat varius et non nibh.
Buckbuck@example.comPilot$26,000.0016Vestibulum fringilla cursus nulla, vitae euismod nulla laoreet non. Sed tincidunt facilisis hendrerit. Nulla facilisi. Aliquam laoreet vestibulum tempus.
Jasonjason@example.comKing$70,000.0017Ut faucibus gravida mauris, in auctor elit gravida sit amet.
Geoffreygeoffrey@example.comUndertaker$19,000.0018Proin a mi vulputate arcu ultricies sodales. Aliquam nec turpis lacus, ac lobortis nunc. In leo justo, varius non dignissim in, pellentesque non velit.
Natenate@example.comWorker$17,000.0019Sed id turpis ante. Mauris ac massa dui. Fusce consectetur magna quis dui mattis in fermentum sem commodo. Quisque semper pellentesque dictum.
Alexalex@example.comFisherman$18,000.0020Donec sed sem vitae urna commodo porttitor ut sit amet neque. Cras massa lectus, fringilla id varius in, mollis vel tellus. Quisque mollis neque vel metus laoreet pellentesque. Praesent ornare cursus convallis.
Barbarabarbara@example.comEngineer$38,000.0021Nunc ut lectus diam. Duis feugiat nulla quis metus sagittis in semper libero tincidunt. Vivamus pulvinar suscipit sagittis.
Geraldgerald@example.comLibrarian$18,000.0022Nullam volutpat mi vitae velit luctus ultrices vel in felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Janetjanet@example.comMachine Setter$20,000.0023Cras nisi velit, gravida quis lacinia ut, condimentum vitae ligula. Quisque id quam vitae massa aliquam suscipit euismod ac metus.
Ericeric@example.comGroomer$18,000.0024Curabitur blandit ornare turpis, nec consequat nisi suscipit in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Danieldaniel@example.comFlight Service Specialist$32,000.0025Aenean neque quam, mollis vitae rhoncus non, sollicitudin vel quam. Donec lectus arcu, viverra eget tristique sed, venenatis id sem.


Insert rows.

Installation

Installation is simple. Include jQuery 1.4 (or higher) and jQuery UI (only the CSS is required). Then include the following files:

  • jquery.pgrid.js or jquery.pgrid.min.js (Minified)
  • jquery.pgrid.default.css or jquery.pgrid.touch.css (Touch Screen Styling)