Table Component

A table is a method of organizing data, and is usually portrayed as rows and columns. Tables can be simple, meaning the first row has headers and is not counted as data, or multidimensional, meaning there is no header row, and all of the information presented is tabular data.

What is a table component?

A table component is a formatted data table used in a website or application. Table components are common and can be created in virtually every language.

A simple table component
A simple table component via CSS Script

Table uses in websites and apps

Tables are a phenomenal way to portray tabular data in a way that is easy to understand. In websites and applications, tables are often accompanied by additional modules like scroll bars and other navigation to make browsing easier.

Tables can be premade—with each data value already coded into the design—or created as a placeholder template in which data automatically populates from a data source.

Example: A library’s website features a table that allows users to browse books and filter by columns like category, author, year published, title, availability, etc., and also perform a search that matches user input to data. The table also might display 50 rows at a time, with arrow keys to navigate through pages.

This table displays information directly from a data source—the library’s record-keeping system. This ensures that information is updated in real-time, allowing users to see if a book is checked out or available.

Internal table components

Internal’s table component connects to a data source, allowing users to simply drag and drop it into their workspace and begin customizing it immediately.

Using a dynamic table component in Internal
A dynamic table component in Internal

Tables can:

  • Search and filter using a built-in search input

  • Provide data to prefill other component fields

  • Dynamically filter data displayed in other components

  • Display in-line actions

  • Display the results from the execution of a function

  • Much more.

Tables can easily be configured to allow data to be exported as a CSV, support custom visibility rules, and come with numerous design options so that they can be easily added to a Space. The table component is very flexible, very powerful, and very easy to use.

For more information about table components in Internal, check out the table component documentation.


CSS Tricks: Complete Guide to the Table Element

Mozilla: HTML Table Basics

Infogram: When to Use Tables vs Charts