The TableKit Data Table block lets you organizes information into a clear, customizable table. It allows you to easily sort, search, and view data in a structured grid.

Let’s learn how to use and what features the block offers.

How to use Data Table #

Warunek wstępny: Get TableKit Pro

To start, log into your WordPress dashboard. Find and click ‘Edit’ on the post or page where the table will be added.

Search and drag and drop the data table block.

Click on the Start Black button to begin.

Zakładka Treść #

This tab lets you upload and customize the content of your data table.

Treść #

Here, you have to select a data source. The choiches are CSV File, Google sheet, Json File and Nested Json File.

Upload easily and instantly transform your data into a dynamic and filterable table.

However, when you select an external data source like Arkusz Google, A Plik JSON, or a Nested JSON File , ‘Enable Auto Update’ feature becomes available. You’ll see options –

• Update Data (Refetch): It allows the table to automatically refresh I fetch the latest data from the external source at regular intervals.
• Enable Auto Update: Turn this on Do make the table refresh the data by itself over time.
• Auto Update Interval: This is the setting that tells the table how often to automatically refresh (e.g., every 5 minutes).

Ustawienia #

• Enable Header: Shows or hides the row with column titles (like ID, Name, Title).
• Enable Pagination: Breaks up large results into multiple, manageable pages.
• Enable Row Per Page: Adds a control so users can choose how many items appear on each page.
• Enable Result: Shows text like “Showing 1 to 10 of 50 results” at the bottom.
• Enable Pagination Control: Displays the page navigation links (Previous, Next, Page numbers).
• Enable Search: Adds a main search bar to filter the whole table dynamically.
• Enable Individual Search: Adds a search box under each column for targeted filtering.
• Enable Export Button: Provides a button to download the table data (CSV, PDF, Excel).
• Enable Sorting: Allows users to click column headers to reorder the data.
• Fixed Width Table Cells: Makes sure all table cells keep the same width and don’t resize dynamically.
• Załamanie się granicy: Controls if table cell borders merge into one line or stay separate.

Szukaj #

Możesz choose the search icon you want to use and write your own placeholder text for the search box.

However, when you select All Columns, the search function examines every single field in the data table. When you choose a Specific Column, the search limits its check to only that designated column.

Let’s now see examples of how to conduct searches using different terms.

Paginacja #

Here are the individual components that make up the pagination bar.

• Previous First (<<): A button that links directly to the very first page of the data table.
• Previous (<): A button that links to the immediately preceding page.
• Next (>): It’s the button that links to the immediately following page.
• Next Last (>>): A button that links directly to the very last page of the data table.

• Row Per Page Label Customization: This setting allows you to modify the text displayed next to the dropdown menu that controls the quantity of items shown on a single page.
• Pagination Range Text Editing: It enables you to customize the full text string that reports the current range of visible results relative to the total number of items e.g., changing Showing 1 to 10 of 50 results.
• “Page of” Format Customization: This option lets you change the textual structure used to display the current page number in relation to the overall number of pages like modifying Page 1 of 5.

Hide Column #

Use this setting to select specific columns such as ID, Name, Title, or Date and remove or hide them from the table displayed to users.

Część stylowa #

Wspólny: It’s the standard visual settings for the whole block. This offers settings for Alignment, Fonts, Colors, Background, Borders, Shadows, and Spacing (Padding).

Nagłówek: Customize the top row or column headers easily. You can adjust Alignment, Text Style (Fonts/Color), Background, Borders, and Corner Rounding (Radius).

Kolumna: Add columns and start apply unique styles to individual columns. For example, if you choose ProductName, you can change Kolor tła I Kolor tekstu.

Komórki: Here, you can style the main data area by adjusting Alignment, Fonts, Colors, Borders, Border Radious and Padding. Includes separate options for Nawet I Odd rows for banded/striped effects.

Podpis: Adjust the look of the table caption text. You can change Color, Font, Alignment, Background, Border, Border Radious and Padding.

Export Button: Style the main button that opens download options, including Color, Background, Border, Granica Radious, and Padding Do Normalna I Unosić się states.

Export Button Dropdown: Style the menu box that contains the export options by exploring Padding, Margin, Color, Border, etc.

Paginacja: Control the look of the row counter and navigation arrows/buttons utilizing Icon/Text Colors, Background, Input Border, Icon Padding, etc.

Szukaj: It offers options to customize the main input field for searching including Colors, Background, Border, Border Radius, Width, itp.

Individual Search Button: Define the style, size, and position of the search icon/button. Includes Kolor Do Normal, Hover, and Active states.

Individual Search Options: Style the menu that lets users choose which column to search within: Color, Background, Border, and Margin across different states.

Sorting: Set the design for the small arrow icon next to the column headers, including its Size, Position (H/V), and Color when active.

It’s time to build! Start creating stunning, highly customized Post Tables right away to deliver your data with maximum clarity and impact.