How to use DataTables plugins in Bubble

On your page in the Design tab, add a Row container group at the top of where you want the table. Inside it, add Text elements for each column header: Name, Price, Category, Status, and Actions. Set each text to bold and give the row a light background color like #F3F4F6 to distinguish it from data rows. Set consistent widths for each column by giving each text element a fixed or percentage width.

Below the header row, add a Repeating Group with Type of content set to your Data Type (such as Product). Set the Data source to Do a Search for Products sorted by Created Date descending. Set the layout to Column with each row being a fixed height of about 48 pixels. Inside each cell, add a Row container. Inside that row, add Text elements matching each header column: Current cell's Product's Name, Current cell's Product's Price formatted as currency, Current cell's Product's Category, and Current cell's Product's Status. Match the widths to the header columns.

Create a custom state on the page called Sort Field (text, default: Created Date) and another called Sort Order (text, default: descending). On each header Text element, add a click workflow: Set state of page, Sort Field equals the field name (such as Name or Price). In the same workflow, toggle Sort Order between ascending and descending. Update the Repeating Group's data source to use Dynamic sort: Sort Field with direction Sort Order. Add a small arrow icon next to each header that changes direction based on the current sort state.

Set the Repeating Group's number of rows to show to a fixed number like 10 or 20. Below the Repeating Group, add a Row container with pagination controls. Add a Text element showing the current page range (such as Showing 1-10 of 50). Add Previous and Next buttons. For the Next button, create a workflow that increments a custom state called Page Number. Use the Repeating Group's Show next and Show previous actions to navigate between pages. Add an Only when condition to disable Previous on page 1 and Next on the last page.

To let users edit data directly in the table, replace one of the Text elements (such as Status) with an Input element. Set its initial content to Current cell's Product's Status. Add a workflow: When Input's value is changed, Make changes to a thing, set Current cell's Product's Status to this Input's value. For a cleaner look, style the Input to look like a Text element (no border, transparent background) and only show a border on focus using the Conditional tab.

Above the header row, add a Search Input element. Modify the Repeating Group's data source to include a constraint: Name contains Search Input's value, with Ignore empty constraints checked. This filters the table as the user types. For more advanced filtering, add Dropdown filters for Category and Status with their own constraints on the same search.