Table

api-draft

The Table component provides a flexible and customizable way to display tabular data, facilitating easy organization and presentation of information in various applications.

Anatomy

API Reference

Accessibility

Unstyled

Anatomy

The structure provided below can help you identify and understand a Table component's various parts.

export default () => (
  <TableContainer>
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>
            <TableText />
          </TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableData>
            <TableText />
          </TableData>
        </TableRow>
      </TableBody>
      <TableCaption />
      <TablePagination>
        <TablePaginationFirstPageButton />
        <TablePaginationPreviousButton />
        <TablePaginationPageStats />
        <TablePaginationNextButton />
        <TablePaginationLastPageButton />
      </TablePagination>
    </Table>
  </TableContainer>
)

API Reference

The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.

TableContainer

It inherits all the properties of React Native's View component.

Table

Contains all the parts of a collapsible section.

Prop	Type	Default	Description
size	"sm" \| "md" \|"lg"	"md"	The overall size of the entire table.
isHeaderSticky	boolean	false	When true, keeps the table header sticky to top when you scroll inside the table.

Table.Head

A component to contain table headers with titles. It inherits all the properties of React Native's View component.

Table.Row

A component to show a single row inside of a table. It inherits all the properties of React Native's View component.

Prop	Type	Default	Description
isSelected	boolean	false	If true, the table row will have the selected shading.

Table.Body

It inherits all the properties of React Native's View component.

Table.Header

A component to show a single heading inside of a table head. It inherits all the properties of React Native's View component.

Table.Data

A component to show a single data cell inside of a table. It inherits all the properties of React Native View component.

Table.Text

A component to show text of a table heading, it must be wrapped with Table.Header or Table.Data for appropriate styling. It inherits all the properties of React Native's Text component.

Table.Caption

It inherits all the properties of React Native's Text component.

Prop	Type	Default	Description
placement	"top" \| "bottom"	"bottom"	If true, the table row will have the selected shading.

Table.Pagination

A component to show pagination for data table.

Prop	Type	Default	Description
page	number	0	The zero-based index of the current page.
rowsPerPage	number	-1	The number of rows per page. Set -1 to display all the rows.
onPageChange	function(event: any \| null, page: number) => void	-	Callback fired when the page is changed.
onRowsPerPageChange	function(event: any \| null, rowsPerPage: number) => void	-	Callback fired when the number of rows per page is changed.
rowsPerPage	number	-1	The number of rows per page. Set -1 to display all the rows.
rowsPerPage	number	-1	The number of rows per page. Set -1 to display all the rows.
rowsPerPage	number	-1	The number of rows per page. Set -1 to display all the rows.

Table.Pagination.FirstPageButton

A component to navigate to the first page of the table.

Table.Pagination.PreviousButton

A component to navigate to the previous page of the table.

Table.Pagination.PageStats

A component to show the current page and total pages of the table.

Table.Pagination.NextButton

A component to navigate to the next page of the table.

Table.Pagination.LastPageButton

A component to navigate to the last page of the table.

Accessibility

Adheres to the Table WAI-ARIA design pattern.

We have outlined the various features that ensure the Table component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

The table container has role table.
Each row container has role row and is owned by the table element or an element with role rowgroup.
Each header & data is owned by a row element and has one of the following roles:
- columnheader if the cell contains a title or header information for the column.
- cell if the data does not contain column or row header information.
A label is specified for the table element using aria-label.
If the table has a caption or description, aria-describedby is set on the table element with a value referring to the element containing the description.
If the table contains sortable columns or rows, aria-sort is set to an appropriate value on the header element for the sorted column or row.
aria-colcount or aria-rowcount is set to the total number of columns or rows, respectively.
aria-colindex or aria-rowindex is set to the position of a cell within a row or column, respectively.

Unstyled

We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

Customizing the Table

We have a function called createTable which can be used to create a custom table component. This function takes in a configuration object which contains the styled components that you want to use for the Table. You can refer gluestack.io/style on how to use styled components.

Usage

Default styling of all these components can be found in the components/core/table file. For reference, you can view the source code of the styled Table components.

// import the styled components

import {
  Container,
  Root,
  Head,
  Row,
  Header,
  Text,
  Body,
  Caption,
  Pagination,
  FirstPageButton,
  PreviousButton,
  PageStats,
  NextButton,
  LastPageButton,
  Data,
} from "../components/core/table/styled-components"

// import the createTable function
import { createTable } from "@gluestack-ui/table"

// Understanding the API
export const { Table, TableContainer } = createTable({
  Container,
  Root,
  Head,
  Row,
  Header,
  Text,
  Body,
  Caption,
  Pagination,
  FirstPageButton,
  PreviousButton,
  PageStats,
  NextButton,
  LastPageButton,
  Data,
})

// Using the table component
export default () => (
  <TableContainer>
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>
            <TableText>Prop</TableText>
          </TableHeader>
          <TableHeader>
            <TableText>Description</TableText>
          </TableHeader>
          <TableHeader>
            <TableText>Default</TableText>
          </TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableData>
            <TableText>Prop1</TableText>
          </TableData>
          <TableData>
            <TableText>Prop1 description</TableText>
          </TableData>
          <TableData>
            <TableText>default value</TableText>
          </TableData>
        </TableRow>
        <TableRow>
          <TableData>
            <TableText>Prop2</TableText>
          </TableData>
          <TableData>
            <TableText>Prop2 description</TableText>
          </TableData>
          <TableData>
            <TableText>default value</TableText>
          </TableData>
        </TableRow>
        <TableRow>
          <TableData>
            <TableText>Prop3</TableText>
          </TableData>
          <TableData>
            <TableText>Prop3 description</TableText>
          </TableData>
          <TableData>
            <TableText>default value</TableText>
          </TableData>
        </TableRow>
      </TableBody>
      <TableCaption />
      <TablePagination rowsPerPage={1}>
        <TablePaginationFirstPageButton />
        <TablePaginationPreviousButton />
        <TablePaginationPageStats />
        <TablePaginationNextButton />
        <TablePaginationLastPageButton />
      </TablePagination>
    </Table>
  </TableContainer>
)

Edit this page on GitHub