Chakra-UI

I♥️Components

Table

|

Chakra Docs

|

⦾ A well-designed table component is fundamental for displaying large amounts of data in an organized and user-friendly manner. The Table component from Chakra UI is a powerful and flexible tool that you can use to display data in a clear, readable, and stylish manner. The Table component in Chakra UI is used to organize and display data efficiently. By default, it renders a <table> HTML element, but with additional functionality and style enhancements.

The Table component in Chakra UI is made up of several subcomponents, each playing an important role in the overall structure and functionality.

  • Table: The main container for the table that sets up the necessary styling and context for its child components.
  • Thead: Defines a table header section. This is where you would place your table header row(s).
  • Tbody: Defines a table body section. This contains all of your main data rows.
  • Tfoot: Defines a table footer section. This is an optional section that can be used for summing up data or providing additional table details.
  • Tr: Represents a table row. This is a container for table cell components.
  • Th: Represents a table header cell. It provides labeling information for its respective column.
  • Td: Represents a table data cell. This is where individual pieces of data are displayed in their respective rows and columns.
  • TableCaption: An optional component that provides a label or summary for the table.
  • TableContainer: A wrapper around the Table that provides a means of controlling the overflow of content.

These components can be imported as follows:

Examples

Basic Usage

⦾ This first example creates a simple table displaying the different types of coffee and their descriptions. In this example, we've created a simple table with a caption and two columns: one for the type of coffee and another for its description. We've filled the table body with three rows of data, each representing a type of coffee.
Coffee Types and Descriptions
Type of CoffeeDescription
EspressoA full-flavored, concentrated form of coffee that is served in 'shots'.
AmericanoEspresso diluted with hot water, making it a less-concentrated version of regular espresso.
LatteEspresso mixed with hot steamed milk, usually topped with a small amount of foam.

Code

Striped Table

⦾ You can also easily add striped rows to your table to enhance readability. Here, we've added the variant="striped" and colorScheme="blue" props to the Table component. The variant prop changes the table's look, and the colorScheme prop changes the table's color theme. Keep in mind here that I have a detailed extended theme in Chakra, so my colors will vary greatl from the defaults.
Striped: Coffee Types and Descriptions
Type of CoffeeDescription
EspressoA full-flavored, concentrated form of coffee that is served in 'shots'.
AmericanoEspresso diluted with hot water, making it a less-concentrated version of regular espresso.
LatteEspresso mixed with hot steamed milk, usually topped with a small amount of foam.

Code

Table Sizes

⦾ Chakra UI provides three sizes for tables: sm, md, lg. By default, the size is md. In the following example, we've added the size='sm' prop to the Table component to create a small-sized table and size="lg" to the second table.
Type of CoffeeDescription
EspressoA full-flavored, concentrated form of coffee that is served in 'shots'.
AmericanoEspresso diluted with hot water, making it a less-concentrated version of regular espresso.
LatteEspresso mixed with hot steamed milk, usually topped with a small amount of foam.

Type of CoffeeDescription
EspressoA full-flavored, concentrated form of coffee that is served in 'shots'.
AmericanoEspresso diluted with hot water, making it a less-concentrated version of regular espresso.
LatteEspresso mixed with hot steamed milk, usually topped with a small amount of foam.

Code

The Table Container

⦾ The TableContainer component is a wrapper for the Table component that can help manage the display and overflow of your tables, especially useful when you're dealing with large data sets that would otherwise overflow their container. Here we are wrapping the TableContainer in a Box component that has a maximum width set. This will prevent the TableContainer from growing beyond this width. The TableContainer will then manage the display of the Table within it, providing scrollbars as necessary to navigate larger data sets.
EspressoA full-flavored, concentrated form of coffee that is served in 'shots'.
AmericanoEspresso diluted with hot water, making it a less-concentrated version of regular espresso.
LatteEspresso mixed with hot steamed milk, usually topped with a small amount of foam.

Code

Complex Table

⦾ We will now explore creating a more complex table with multiple types of data. In this example, we have a more complex table displaying an inventory of a coffee shop. We've added a new Tfoot section that totals up the quantities and prices of all products. We've also made use of the isNumeric prop on Th and Td components, which aligns the text to the right, which is standard for numeric data.
Coffee Shop Inventory
ProductDescriptionQuantityPrice
EspressoA full-flavored, concentrated form of coffee that is served in 'shots'.50$3.00
AmericanoEspresso diluted with hot water, making it a less-concentrated version of regular espresso.30$2.50
LatteEspresso mixed with hot steamed milk, usually topped with a small amount of foam.20$4.00
Total Quantity100$9.50

Code

Did you know?

Creative Idea No. 1

Interactive Table Rows: You can make your table rows interactive, enhancing user experience, especially when the table is used to display a list of items that the user can select. In the following table, you can click on any row to find out more about the individual listed.
NameAgeAddress
John Doe24123 Main St
Jane Doe23123 Main St
Chester Cheetah33987 Wild Cat Lane

Code

Creative Idea No. 2

Expanding Table Rows: You can create tables with expanding rows. This is useful when you want to provide more information without cluttering the table. This example demonstrates how to create an expandable row within a table. When a row is clicked, more information is displayed below it. The table can be clicked again to collapse the row back to its original size. This can improve your UI by decluttering information and displaying it only when necessary.
NameAgeDetails
John Doe24Click for more

Code

Creative Idea No. 3

Custom Cell Rendering: You can customize the rendering of your table cells. In some cases, you may want to display custom content in table cells. For example, you might want to show progress bars, tags, or even buttons. Chakra UI Table component can handle this with ease. It allows you to create rich, interactive tables that can display a variety of custom components, giving you maximum flexibility in how you present your data.
TaskProgress
Task 1
Task 2
Task 3

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.