Table

 

Anatomy

Good to Know

The table component typically consists of several sub-components that work together to display complex data in a structured and organized manner. Here are the main sub-components of a table component:

 

Table Title

The Data Table Title serves as the heading or title section of a data table. It helps users quickly understand the context and purpose of the data presented in the table. The component is designed to maintain consistency and visual harmony throughout our applications.

 

Table Search

Data Table Search is an essential element that enhances data exploration and analysis within data tables. It allows users to quickly locate specific data based on their search queries, streamlining the data discovery process.

 

Table Actions

Data Table Actions are critical elements that enable users to interact with data tables effectively. These actions facilitate data exploration and manipulation, providing a seamless user experience within the table.

 

Sorting and filtering controls

These enable users to reorder the rows based on specific columns or filter the table to display only the rows that meet certain criteria. These controls enhance the usability and interactivity of the table, allowing users to manipulate and explore the data more effectively.

Bulk actions

In the context of a table component, a bulk action refers to the ability to perform an action or operation on multiple items or rows simultaneously. Instead of individually selecting and manipulating each row, the bulk action feature allows users to select multiple rows and apply a specific action to all of them at once, saving time and effort.

Typically, a table component with bulk action functionality provides a checkbox or selection mechanism for each row. By checking the boxes next to the desired rows, users can indicate which items they want to include in the bulk action. Once the selection is made, they can trigger a bulk action through various means, such as clicking a button, choosing an option from a dropdown menu, or using a keyboard shortcut.

Table Container: The table container is the outermost component that encapsulates the entire table structure. It defines the boundaries of the table and provides a container for all other sub-components.

Table header: The table header is a component that appears at the top of the table. It typically contains column headers or labels that describe the content of each column in the table. The header helps users understand the meaning or purpose of each column.

Table body: The table body is the primary section of the table where the actual data rows are displayed. It contains one or more table rows (described below). The body is where the bulk of the information in the table resides.

Table row: A table row represents a horizontal row of data in the table. Each row typically contains cells or columns that align with the corresponding columns defined in the table header. A table can have multiple rows, and each row should contain the same number of cells as the header.

Table cell: A table cell is the smallest unit within a table. It represents a single value or data entry in the table. Each cell is located at the intersection of a row and a column and contains the actual data to be displayed. Cells can contain various types of content such as; text, numbers, images, links, and other widgets.

Pagination Controls: In cases where the table contains a large amount of data, pagination controls may be included as a sub-component. These controls allow users to navigate through different pages or sections of the table, displaying a subset of data at a time.

These sub-components work together to create a functional and visually appealing table component that presents data in a structured and easily understandable format. The exact implementation and appearance of these sub-components may vary depending on the specific UI framework or design choices.

---

Specification

Table Title

Bulk Action

Table Content Cell

Table Row