TablePress

Tables in WordPress made easy.

Get Started

Row Grouping

Group table rows by a common keyword, category, or title.

This feature module is part of the TablePress Premium plans.

Grouping rows in a table allows the site visitors to quickly and easily see the structure of the shown data.

Feature description

The following examples show some possible results. The grouping is done fully automatic from the table data.

Grouping by a single column

In this table with fictional data, the “Company” column was chosen as a “category”, so that all people belonging to that company are “grouped” under a common sub-heading:

Last NameFirst NameCompanyCountryBirthday
HoustonJordenAdobeCanada05/03/1978
GregoryBrynnAdobeCanada01/13/1994
BanksTravisAdobeItaly05/04/1969
HarrisMerrittAdobeItaly12/29/1989
BookerLoganAppleIndia12/16/1975
ValenzuelaLuneaAppleIndia01/09/1966
MoranAugustAppleUnited States07/04/1986
BuckleyStoneCiscoAustralia09/11/1980
LottLillithCiscoAustralia12/10/1978
BattleWylieCiscoUnited States01/03/1988
HollandAlyssaGoogleCanada06/25/1976
FreemanCheyenneGoogleGermany01/28/1981
SteinLawrenceGoogleGermany10/15/1960
MiddletonDennisGoogleSpain01/10/1992
VasquezKelseyIBMGermany03/31/1968
CainLawrenceIBMUnited States05/16/1994
LoganShayIBMUnited States09/13/1968
CurryMasonMozillaAustralia03/15/1969
GilbertChaneyMozillaCanada06/06/1970
BurgessQuynnMozillaFrance09/24/1988

Grouping by multiple columns

It is also possible to designate multiple columns to achieve multiple levels of grouping. In this example, the “Country” column was chosen as a second level:

Last NameFirst NameCompanyCountryBirthday
HoustonJordenAdobeCanada05/03/1978
GregoryBrynnAdobeCanada01/13/1994
BanksTravisAdobeItaly05/04/1969
HarrisMerrittAdobeItaly12/29/1989
BookerLoganAppleIndia12/16/1975
ValenzuelaLuneaAppleIndia01/09/1966
MoranAugustAppleUnited States07/04/1986
BuckleyStoneCiscoAustralia09/11/1980
LottLillithCiscoAustralia12/10/1978
BattleWylieCiscoUnited States01/03/1988
HollandAlyssaGoogleCanada06/25/1976
FreemanCheyenneGoogleGermany01/28/1981
SteinLawrenceGoogleGermany10/15/1960
MiddletonDennisGoogleSpain01/10/1992
VasquezKelseyIBMGermany03/31/1968
CainLawrenceIBMUnited States05/16/1994
LoganShayIBMUnited States09/13/1968
CurryMasonMozillaAustralia03/15/1969
GilbertChaneyMozillaCanada06/06/1970
BurgessQuynnMozillaFrance09/24/1988

Further details

Depending on the specific needs, it might make sense to then hide the columns that were used as categories using CSS code, to reduce the duplication of shown information. For that, you can e.g. add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-123 .column-5 {
  display: none;
}Code language: CSS (css)

where 123 is the table ID.

Usage instructions

To use this feature with your tables, enable the “Row Grouping” module on the TablePress “Modules” screen.

To use this feature with your tables, activate it in the “Row Grouping” section on the table’s “Edit” screen. You can then configure it in the “Advanced settings” of that section.

The available settings for the Row Grouping module on a table’s “Edit” screen.

On this page

window.addEventListener(‘DOMContentLoaded’,()=>{const o=new IntersectionObserver(d=>{d.forEach(e=>{const id=e.target.getAttribute(‘id’).slice(8);document.querySelector(`.wp-block-table-of-contents li a[href$=”#${id}”]`)?.parentElement.classList.toggle(‘active’,e.intersectionRatio>0);});});document.querySelectorAll(‘section[id]’).forEach(s=>{o.observe(s);});});