Grid.js in Bricks

This Pro tutorial provides the steps to use Grid.js in a WordPress site powered by Bricks builder.

Grid.js is a lightweight and performant JavaScript library for showing tabular data with optional sorting, filter-as-you-type search and pagination.

We shall cover both static/hard-coded tables and dynamic (post grid) tables.

Note: If you don't want to accomplish the same as what this tutorial shows without writing a single line of code, our BricksExtras plugin comes with this feature (apart from many others) in the form of a Dynamic Table element.

Static Tables

Step 1

Edit a Page with Bricks.

Add a Section and inside its Container, a Div.

STYLE → CSS → CSS ID: wrapper (or, something that is more specific of your choice) - remember to also use the same in the next step.

Step 2