TableKit Post Table block is a tool that dynamically fetches content such as posts, pages, products, etc. and displays it in a sortable, searchable, and customizable grid or tabular format.
Let’s learn how to use and what features the block offers.
How to Create WordPress Post Table #
👑 This is a premium feature. Get TableKit Pro to use this feature.
Access your WordPress dashboard and choose any post or page where you want to add a post table. Click edit and start.
Search for Post Table block and simply drag and drop it.
parte del contenido #
The content part includes –
Query Filter #
- Select post type: It lets you Select Post Type to display, like Post, Page, Media, Product, Template, etc. And the table will show columns for ID, Name, Title, and Date.
- Taxonomía: The available classification system will change based on your post type.
- Term: This is a specific item or label within a Taxonomy.
- Autor: Este es el metadata field that identifies the creator or primary contributor of the content.
For example, if you select a custom post type ‘Product’, you’ll see taxonomies like Brands, Product type, Product tags. And you’ll see the associated terms and author names. Check the below example.
- Ordenar por: This setting defines how the content will be sorted, like by Date, Title, Type, Author, etc.
- Orden: This setting allows you to specify the direction of the sorting set by ‘Order By’, typically choosing between DESC (Descending) or ASC (Ascending).
- Posts Per Page: It specifies the maximum number of content items, like posts, pages, products to display on a single page of results.
- Page: Here you can set which specific page number of the overall results list should be displayed.
- Compensar: The number of posts to skip before the results start displaying.
Column Settings #
It lets you add columns based on your needs. For example, you can add a column for ID, name it as ID, select fields like Post status, Comment count, ID, author, etc.
So, for the ID column, the label name will appear at the top of the column in the table and shows the ID numbers.
Similarly, you can add columns like name, title, date, etc. However, for labels like Title, your can set character limit and add link.
And for labels like Date, you can adjust date and time format.
However, whichever labels you add, the system will give you the options based on the Post Type you’ve selected in the Query Filter option.
Ajustes #
- Enable Header: Turns the column heading row like ID, Name, Title, Date, etc. display on or off.
- Enable Pagination: Activates the ability to break the results into multiple pages.
- Enable Row Per Page: Displays a control that lets the user change how many items appear on each page.
- Enable Result: Shows text indicating the total number of results and which range is currently visible e.g., Showing 1 to 10 of 50 results.
- Enable Pagination Control: Displays the page number navigation links e.g., Previous, 1, 2, 3, Next.
- Enable Search: Adds a search bar allowing users to filter the table content dynamically.
- Enable Individual Search: It adds a search field under each column header for targeted filtering of specific columns.
- Enable Export Button: Provides a button to download the table data such as CSV, PDF, Excel file, etc.
- Enable Sorting: Allows you to click the column headers to reorder the table content.
- Fixed Width Table Cells: Applies a styling property to ensure all table cells maintain a consistent, non-dynamic width.
- Colapso fronterizo: This allows you to control whether the borders of adjacent table cells merge into a single line or remain separate.
Paginación #
- Previous First: This button takes you immediately to the very first page of the results.
- Anterior: It helps to navigate you one page backward in the sequence of results.
- Próximo: This button navigates you one page forward in the sequence of results.
- Next Last: Enabling this button you can immediately go to the very last page of the results.
- Row Per Page: Here you can customize the label displayed next to the dropdown that controls the number of items per page.
- Pagination Range: This feature allows you to customize the text string that displays the visible results range e.g., Showing 1 to 10 of 50 results. The Content field lets you change the text of pagination range.
- Pagination page of: It lets you to customize the text string that displays the current page number versus the total page count e.g., Page 1 of 5.
Buscar #
Here, you can choose the search icon and personalize the search placeholder text.
When you use All Columns, the search checks every part of the table. When you choose a specific column, the search only checks that one column.
Let’s see how you can search with using different search terms.
Hide Column #
This setting lets you select specific columns like ID, Name, Title, and Date to hide from the table display on the front end.
Parte de estilo #
Común: The Style tab provides options for common visual adjustments like Alignment, Typography, Color, Background, Border, Box Shadow, and Padding.
Encabezamiento: It lets you visually style the column header row of the table. It offering controls for Alignment, Typography, Color, Background, Border, Border Radius, etc.
Columna: These settings allow users to select specific columns such as ID, Name, Title, etc. from the table and apply unique styling to them, including setting the Background and text Color.
Cells: Here you get to style the main body of the table. This including Alignment, Typography, Color, Background, Border, Padding, etc., with separate options for applying styles to Incluso y Odd numbered rows.
Subtítulo: To style the table caption text, here you’ll get to change color, font, alignment, background, padding, etc.
Export Button: You can style the Export button that opens the download options. The options are color, background, border for Normal/Hover states, etc.
Export Button Dropdown: This feature offers options like Padding, Margin, Background, text Color, etc. to style the menu containing the export options.
Paginación: It manages the visual styling for the row count and navigation controls, offering options for icon/text colors, background, gap, and more.
Buscar: If you want to customize the appearance of the primary search input field and its container, use colors, background, border, radius, and other.
Individual Search Button: It defines the aesthetics of the magnifying glass icon/button used to initiate a search, covering its size, placement, color states Normal/Hover/Active, and more.
Individual Search Options: Controls the look and feel of the column selection dropdown menu for focused searching, styling its color, background, border, margin, etc. across different states.
Sorting: Here, you can set the design attributes for the sort arrow icon located by the column headers, adjusting its size, spatial positioning (H/V), and color on interaction.
You have successfully mastered the features and styling controls of the TableKit Post Table block. Start building dynamic and customized Post Tables today for maximum clarity and impact.
If you are done with creating WordPress post table with TableKit, you can customize the table easily.
