Charts · Gutenberg
Data Table block for WordPress
Interactive data table with sorting, search, pagination and export.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Interactive data table with sorting, search, pagination and export.
Inspector panels on this block: Features, Layout, Header Colors, Cell Colors, Import Data. Those titles come from index.js, not from a shared template.
Behavior controls: “Responsive Mode” options: Horizontal Scroll, Stack on Mobile; “Caption Position” options: Top, Bottom; “Table Style” options: Default, Bordered, Minimal; “Paste CSV Data” (First row will be used as headers).
Where to find it
Gutenberg inserter → Charts → search “Data Table” (block name `blockenberg/data-table` in block.json). Style it in the sidebar after insert.
How to use Data Table block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Data Table”, insert it. Category: Charts.
- Configure inspector controls that exist on this block. Open Features. Set “Enable Search”, “Search Placeholder”, “Enable Sorting”, “Enable Pagination”.
- Check the published page. The view script reads HTML data attributes: data-export, data-initialized, data-paginate, data-per-page, data-search, data-sort, data-sortable. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Enable Search | On/off toggle in the inspector. On by default. Saved as `searchEnabled`. |
| Search Placeholder | Text field in the inspector. block.json default: Search.... Saved as `searchPlaceholder`. |
| Enable Sorting | On/off toggle in the inspector. On by default. Saved as `sortingEnabled`. |
| Enable Pagination | On/off toggle in the inspector. Off by default. Saved as `paginationEnabled`. |
| Items Per Page | Numeric range control in the inspector. Range 5–100. block.json default: 10. Saved as `itemsPerPage`. |
| Enable Export | On/off toggle in the inspector. On by default. Saved as `exportEnabled`. |
| Export Button Text | Text field in the inspector. block.json default: Export CSV. Saved as `exportCsvText`. |
| Sticky Header | On/off toggle in the inspector. Off by default. Saved as `stickyHeader`. |
| Sticky First Column | On/off toggle in the inspector. Off by default. Saved as `stickyFirstColumn`. |
| Zebra Striping | On/off toggle in the inspector. On by default. Saved as `zebraStriping`. |
| Row Hover Highlight | On/off toggle in the inspector. On by default. Saved as `rowHoverHighlight`. |
| Responsive Mode | Select control; the chosen value is saved on the block. Options: Horizontal Scroll; Stack on Mobile. block.json default: scroll. Saved as `responsiveMode`. |
| Caption | Text field in the inspector. Saved as `caption`. |
| Caption Position | Select control; the chosen value is saved on the block. Options: Top; Bottom. block.json default: bottom. Saved as `captionPosition`. |
| Table Style | Select control; the chosen value is saved on the block. Options: Default; Bordered; Minimal. block.json default: default. Saved as `tableStyle`. |
| Cell Padding | Numeric range control in the inspector. Range 6–24. block.json default: 12. Saved as `cellPadding`. |
| Border Width | Numeric range control in the inspector. Range 0–3. block.json default: 1. Saved as `borderWidth`. |
| Border Radius | Numeric range control in the inspector. Range 0–16. block.json default: 8. Saved as `borderRadius`. |
| Typography — Header | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeader`. |
| Cell | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoCell`. |
| Header Colors — Background | Color control in the inspector. block.json default: #f8fafc. Saved as `headerBg`. |
| Header Colors — Text | Color control in the inspector. block.json default: #1e293b. Saved as `headerColor`. |
| Header Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `headerBorderColor`. |
| Cell Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `cellBg`. |
| Alt Background | Color control in the inspector. block.json default: #f8fafc. Saved as `cellBgAlt`. |
| Cell Colors — Text | Color control in the inspector. block.json default: #475569. Saved as `cellColor`. |
| Cell Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cellBorderColor`. |
| Hover Background | Color control in the inspector. block.json default: #f1f5f9. Saved as `hoverBg`. |
| Accent | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
| Paste CSV Data | Multiline text field in the inspector. First row will be used as headers. |
What the front-end script actually does
- The view script reads HTML data attributes: data-export, data-initialized, data-paginate, data-per-page, data-search, data-sort, data-sortable.
When this is the right block
- Interactive data table with sorting, search, pagination and export — that is the job of Data Table, not a generic content block.
- Use it when you need the editor control labeled “Enable Search”, which exists on this block’s inspector.
- It matches pages about table, data, grid.
- Inserter grouping: reports, dashboards, and data-heavy pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Data Table block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Data Table”. It sits under Charts. After insert, open Features and set “Enable Search”, “Search Placeholder”, “Enable Sorting”, “Enable Pagination”.
What makes Data Table different from other Blockenberg blocks?
Interactive data table with sorting, search, pagination and export. Inspector labels on this block include “Enable Search”, “Search Placeholder”, “Enable Sorting”, “Enable Pagination”.
Is the Data Table Gutenberg block free?
Yes. Data Table ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Data Table to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Features, Layout, Header Colors, Cell Colors).
Related charts blocks
Area Chart
Smooth filled area chart with multiple datasets, gradient fills, and animation using Chart.js (CDN). Great for showing trends over time.
Bar Chart
Vertical or horizontal bar chart with multiple datasets using Chart.js (CDN). Supports stacked, border radius, and custom colors.
Bubble Chart
Interactive bubble chart powered by Chart.js.
Comparison Table
Feature matrix comparing multiple plans with check/cross marks, text values, and a highlighted popular column.
Doughnut Chart
Pie/doughnut chart with adjustable cutout, center label, and per-slice colors using Chart.js (CDN).
Heatmap Calendar
GitHub-style activity heatmap calendar showing intensity by day across a full year. 53 × 7 grid of colour-coded squares with month labels, day-of-week labels, and a configurable colour scale.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Data Table from the Gutenberg inserter.