RockGrid - A powerful tabular data display module for ProcessWire's backend

[bernhard]

This powerful module has been under ongoing development for several years. The history dates back to the year 2016 🤯 Back then it was built on top of https://datatables.net/. Later I switched to https://www.ag-grid.com/ and finally settled with https://tabulator.info/ to do the heavy lifting.

With RockGrid you can display any kind of tabular data on the ProcessWire backend. It helps you structure your code in a way to keep it maintainable and it comes with a lot of helpers that customise tabulator to the needs of ProcessWire.

Download & Docs: baumrock.com/RockGrid

[bernhard]

Are you wondering about how this module is different to ListerPro? Have a look at this thread: 

 

[Andy]

Hi @bernhard

This project looks extremely interesting. I use Tabulator for frontend and find it one of the best solutions for tables. It's great that you have made it easier to use it in the backend. Thank you for another one  great module.

By the way, I have up to 50 columns in a table, and the database has over 1,000,000 items. However, it doesn't make much sense to make tables of even 10,000 rows. It is better to categorize them and show them in separate tables.

[bernhard]

RockGrid has seen a lot of great improvements over the last few days 😍 The whole codebase has been cleaned up and all javascript files have been split into several files to make maintenance easier. All of that was easily possible thanks to RockDevTools.

RockGrid now supports so called "magic attributes" that can pull data from the grid and create UI elements completely automatic.

TagsFilter

The new tags filter pulls data from one column of your grid and lists all available options as clickable filter tags:

All you have to do:

<div rg-tagsfilter="field:your_field_name;"></div>

---

Flipper

I realised that when building grids for my custom bookkeeping software I built the same stuff over and over again, for example buttons to quickly flip over time periods (like the current year, previous year, this month, previous month, etc...). Now that's also built into RockGrid and can be used with a single dom attribute! 😎

All you have to do:

<div rg-flipper="field:date_column;range:year;">Y</div>
<div rg-flipper="field:date_column;range:month;">M</div>
<div rg-flipper="field:date_column;range:day;">D</div>

Go and check out RockGrid v1.6.0 🚀🚀

[bernhard]

PS: The "Flipper" feature has been possible before quite easily as well, but it got a lot nicer today!!

--- code necessary for flipper buttons before today ---

  // year buttons
  RockGrid.on("button:year", (button) => {
    // set headerfilter of day column to
    // current date in format yyyy
    // reset all other columns filters
    table.clearHeaderFilter();
    table.setHeaderFilterValue("day", luxon.DateTime.local().toFormat("yyyy"));
  });
  RockGrid.on("button:prevyear", (button) => {
    // get current header filter of day column
    const filter = table.getHeaderFilterValue("day");
    const year = filter
      ? luxon.DateTime.fromFormat(filter, "yyyy")
      : luxon.DateTime.local();
    // set header filter to previous year
    table.clearHeaderFilter();
    table.setHeaderFilterValue(
      "day",
      year.minus({ years: 1 }).toFormat("yyyy")
    );
  });
  RockGrid.on("button:nextyear", (button) => {
    // get current header filter of day column
    const filter = table.getHeaderFilterValue("day");
    const year = filter
      ? luxon.DateTime.fromFormat(filter, "yyyy")
      : luxon.DateTime.local();
    // set header filter to next year
    table.clearHeaderFilter();
    table.setHeaderFilterValue("day", year.plus({ years: 1 }).toFormat("yyyy"));
  });

--- code as of today ---

<span rg-flipper="field:date;range:year;">Y</span>
<span rg-flipper="field:date;range:month;">M</span>
<span rg-flipper="field:date;range:day;">D</span>

So cool 😍🚀