Table

alpha

Efficiently organize and present tabular data with a customizable, flexible display method.

Installation

API Reference

This is an illustration of a Table component.

<Table className="w-full">
  <TableHeader>
    <TableRow>
      <TableHead>Customer Name</TableHead>
      <TableHead>Units</TableHead>
      <TableHead>Costs</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableData>Rajesh Kumar</TableData>
      <TableData>10</TableData>
      <TableData>$130</TableData>
    </TableRow>
    <TableRow>
      <TableData>Priya Sharma</TableData>
      <TableData>12</TableData>
      <TableData>$210</TableData>
    </TableRow>
    <TableRow>
      <TableData>Ravi Patel</TableData>
      <TableData>6</TableData>
      <TableData>$55</TableData>
    </TableRow>
    <TableRow>
      <TableData>Ananya Gupta</TableData>
      <TableData>18</TableData>
      <TableData>$340</TableData>
    </TableRow>
    <TableRow>
      <TableData>Arjun Singh</TableData>
      <TableData>2</TableData>
      <TableData>$35</TableData>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableHead>Total</TableHead>
      <TableHead>48</TableHead>
      <TableHead>$770</TableHead>
    </TableRow>
  </TableFooter>
</Table>

Installation

CLI

Manual

Run the following command:

npx gluestack-ui add table

Step 1: Install the following dependencies:

npm i @expo/html-elements

Step 2: Copy and paste the following code into index.tsx in your project.

import React, { createContext, useMemo, useContext } from "react"
import {
  Table as ExpoTable,
  THead as ExpoTHead,
  TBody as ExpoTBody,
  TFoot as ExpoTFoot,
  TR as ExpoTR,
  Caption as ExpoTCaption,
} from "@expo/html-elements"

import {
  tableStyle,
  tableHeaderStyle,
  tableBodyStyle,
  tableFooterStyle,
  tableHeadStyle,
  tableRowStyleStyle,
  tableDataStyle,
  tableCaptionStyle,
} from "./styles"
import { Text, View } from "react-native"

const TableHeaderContext = createContext<{
  isHeaderRow: boolean
}>({
  isHeaderRow: false,
})
const TableFooterContext = createContext<{
  isFooterRow: boolean
}>({
  isFooterRow: false,
})

type ITableProps = React.ComponentProps<typeof ExpoTable>
type ITableHeaderProps = React.ComponentProps<typeof ExpoTHead>
type ITableBodyProps = React.ComponentProps<typeof ExpoTBody>
type ITableFooterProps = React.ComponentProps<typeof ExpoTFoot>
type ITableHeadProps = React.ComponentProps<typeof View | typeof Text> & {
  useRNView?: boolean
}
type ITableRowProps = React.ComponentProps<typeof ExpoTR>
type ITableDataProps = React.ComponentProps<typeof View | typeof Text> & {
  useRNView?: boolean
}
type ITableCaptionProps = React.ComponentProps<typeof ExpoTCaption>

const Table = React.forwardRef<React.ElementRef<typeof ExpoTable>, ITableProps>(
  ({ className, ...props }, ref) => {
    return (
      <ExpoTable
        // @ts-expect-error
        ref={ref}
        className={tableStyle({ class: className })}
        {...props}
      />
    )
  }
)

const TableHeader = React.forwardRef<
  React.ElementRef<typeof ExpoTHead>,
  ITableHeaderProps
>(({ className, ...props }, ref) => {
  const contextValue = useMemo(() => {
    return {
      isHeaderRow: true,
    }
  }, [])
  return (
    <TableHeaderContext.Provider value={contextValue}>
      <ExpoTHead
        // @ts-expect-error
        ref={ref}
        className={tableHeaderStyle({ class: className })}
        {...props}
      />
    </TableHeaderContext.Provider>
  )
})

const TableBody = React.forwardRef<
  React.ElementRef<typeof ExpoTBody>,
  ITableBodyProps
>(({ className, ...props }, ref) => {
  return (
    <ExpoTBody
      // @ts-expect-error
      ref={ref}
      className={tableBodyStyle({ class: className })}
      {...props}
    />
  )
})

const TableFooter = React.forwardRef<
  React.ElementRef<typeof ExpoTFoot>,
  ITableFooterProps
>(({ className, ...props }, ref) => {
  const contextValue = useMemo(() => {
    return {
      isFooterRow: true,
    }
  }, [])
  return (
    <TableFooterContext.Provider value={contextValue}>
      <ExpoTFoot
        // @ts-expect-error
        ref={ref}
        className={tableFooterStyle({ class: className })}
        {...props}
      />
    </TableFooterContext.Provider>
  )
})

const TableHead = React.forwardRef<
  React.ElementRef<typeof View | typeof Text>,
  ITableHeadProps
>(({ useRNView = false, className, ...props }, ref) => {
  if (useRNView) {
    return (
      <View
        ref={ref}
        className={tableHeadStyle({ class: className })}
        {...props}
      />
    )
  } else {
    return (
      <Text
        ref={ref}
        className={tableHeadStyle({ class: className })}
        {...props}
      />
    )
  }
})

const TableRow = React.forwardRef<
  React.ElementRef<typeof ExpoTR>,
  ITableRowProps
>(({ className, ...props }, ref) => {
  const { isHeaderRow } = useContext(TableHeaderContext)
  const { isFooterRow } = useContext(TableFooterContext)

  return (
    <ExpoTR
      // @ts-expect-error
      ref={ref}
      className={tableRowStyleStyle({
        isHeaderRow,
        isFooterRow,
        class: className,
      })}
      {...props}
    />
  )
})

const TableData = React.forwardRef<
  React.ElementRef<typeof View | typeof Text>,
  ITableDataProps
>(({ useRNView = false, className, ...props }, ref) => {
  if (useRNView) {
    return (
      <View
        ref={ref}
        className={tableDataStyle({ class: className })}
        {...props}
      />
    )
  } else {
    return (
      <Text
        ref={ref}
        className={tableDataStyle({ class: className })}
        {...props}
      />
    )
  }
})

const TableCaption = React.forwardRef<
  React.ElementRef<typeof ExpoTCaption>,
  ITableCaptionProps
>(({ className, ...props }, ref) => {
  return (
    <ExpoTCaption
      // @ts-expect-error
      ref={ref}
      className={tableCaptionStyle({ class: className })}
      {...props}
    />
  )
})

Table.displayName = "Table"
TableHeader.displayName = "TableHeader"
TableBody.displayName = "TableBody"
TableFooter.displayName = "TableFooter"
TableHead.displayName = "TableHead"
TableRow.displayName = "TableRow"
TableData.displayName = "TableData"
TableCaption.displayName = "TableCaption"

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableData,
  TableCaption,
}

Important Note

Note: Step 3 is optional and only required if you want to add support for React Server Components, You can skip this and jump to Step 4 directly if you don't have this requirement.

Step 3(optional): Copy and paste the following code into index.web.tsx in your project.

import React, { createContext, useMemo, useContext } from "react"
import {
  tableStyle,
  tableHeaderStyle,
  tableBodyStyle,
  tableFooterStyle,
  tableHeadStyle,
  tableRowStyleStyle,
  tableDataStyle,
  tableCaptionStyle,
} from "./styles"

const TableHeaderContext = createContext<{
  isHeaderRow: boolean
}>({
  isHeaderRow: false,
})
const TableFooterContext = createContext<{
  isFooterRow: boolean
}>({
  isFooterRow: false,
})

const Table = React.forwardRef(({ className, ...props }: any, ref?: any) => {
  return (
    <table ref={ref} className={tableStyle({ class: className })} {...props} />
  )
})

const TableHeader = React.forwardRef(
  ({ className, ...props }: any, ref?: any) => {
    const contextValue = useMemo(() => {
      return {
        isHeaderRow: true,
      }
    }, [])
    return (
      <TableHeaderContext.Provider value={contextValue}>
        <thead
          ref={ref}
          className={tableHeaderStyle({ class: className })}
          {...props}
        />
      </TableHeaderContext.Provider>
    )
  }
)

const TableBody = React.forwardRef(
  ({ className, ...props }: any, ref?: any) => {
    return (
      <tbody
        ref={ref}
        className={tableBodyStyle({ class: className })}
        {...props}
      />
    )
  }
)

const TableFooter = React.forwardRef(
  ({ className, ...props }: any, ref?: any) => {
    const contextValue = useMemo(() => {
      return {
        isFooterRow: true,
      }
    }, [])
    return (
      <TableFooterContext.Provider value={contextValue}>
        <tfoot
          ref={ref}
          className={tableFooterStyle({ class: className })}
          {...props}
        />
      </TableFooterContext.Provider>
    )
  }
)

const TableHead = React.forwardRef(
  ({ className, ...props }: any, ref?: any) => {
    return (
      <th
        ref={ref}
        className={tableHeadStyle({ class: className })}
        {...props}
      />
    )
  }
)

const TableRow = React.forwardRef(({ className, ...props }: any, ref?: any) => {
  const { isHeaderRow } = useContext(TableHeaderContext)
  const { isFooterRow } = useContext(TableFooterContext)
  return (
    <tr
      ref={ref}
      className={tableRowStyleStyle({
        isHeaderRow,
        isFooterRow,
        class: className,
      })}
      {...props}
    />
  )
})

const TableData = React.forwardRef(
  ({ className, ...props }: any, ref?: any) => {
    return (
      <td
        ref={ref}
        className={tableDataStyle({ class: className })}
        {...props}
      />
    )
  }
)

const TableCaption = React.forwardRef(
  ({ className, ...props }: any, ref?: any) => {
    return (
      <caption
        ref={ref}
        className={tableCaptionStyle({ class: className })}
        {...props}
      />
    )
  }
)

Table.displayName = "Table"
TableHeader.displayName = "TableHeader"
TableBody.displayName = "TableBody"
TableFooter.displayName = "TableFooter"
TableHead.displayName = "TableHead"
TableRow.displayName = "TableRow"
TableData.displayName = "TableData"
TableCaption.displayName = "TableCaption"

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableData,
  TableCaption,
}

Step 4: Copy and paste the following code into styles.tsx in your project.

import { tva } from "@gluestack-ui/nativewind-utils/tva"
import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb"

const captionTableStyle = isWeb ? "caption-bottom" : ""

export const tableStyle = tva({
  base: `table border-collapse border-collapse w-[800px]`,
})

export const tableHeaderStyle = tva({
  base: "",
})

export const tableBodyStyle = tva({
  base: "",
})

export const tableFooterStyle = tva({
  base: "",
})

export const tableHeadStyle = tva({
  base: "flex-1 px-6 py-[14px] text-left font-bold text-[16px] leading-[22px] text-typography-800 font-roboto",
})

export const tableRowStyleStyle = tva({
  base: "border-0 border-b border-solid border-outline-200 bg-background-0",
  variants: {
    isHeaderRow: {
      true: "",
    },
    isFooterRow: {
      true: "border-b-0 ",
    },
  },
})

export const tableDataStyle = tva({
  base: "flex-1 px-6 py-[14px] text-left text-[16px] font-medium leading-[22px] text-typography-800 font-roboto",
})

export const tableCaptionStyle = tva({
  base: `${captionTableStyle} px-6 py-[14px] text-[16px] font-normal leading-[22px] text-typography-800 bg-background-50 font-roboto`,
})

Step 5: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.

import {
  Table,
  TableHeader,
  TableFooter,
  TableBody,
  TableHead,
  TableData,
  TableRow,
  TableCaption,
} from "@/components/ui/table"

export default () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead />
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableData />
      </TableRow>
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableData />
      </TableRow>
    </TableFooter>
    <TableCaption />
  </Table>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Table

It inherits all the properties of of @expo/html-elements's Table on native and html table tag on web.

TableHeader

It inherits all the properties of of @expo/html-elements's THead on native and html thead tag on web.

TableRow

It inherits all the properties of of @expo/html-elements's TR on native and html tr tag on web.

TableData

It inherits all the properties of React Native's Text component on native and html td tag on web.

Prop	Type	Default
useRNView	boolean	If true renders a react-native view component instead of a text component.

TableHead

It inherits all the properties of React Native's Text component on native and html th tag on web.

Prop	Type	Default
useRNView	boolean	If true renders a react-native view component instead of a text component.

TableBody

It inherits all the properties of of @expo/html-elements's TBody on native and html tbody tag on web.

TableFooter

It inherits all the properties of of @expo/html-elements's TFoot on native and html tfoot tag on web.

TableCaption

It inherits all the properties of of @expo/html-elements's Caption on native and html caption tag on web.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Table with caption

This is an example of a Table component with a caption.

function App() {
  return (
    <Box className="rounded-lg overflow-hidden w-full">
      <Table className="w-full">
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Email Address</TableHead>
            <TableHead>Phone Number</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableData>Rajesh Kumar</TableData>
            <TableData fontWeight="$normal">rajesh@example.com</TableData>
            <TableData fontWeight="$normal">1234567890</TableData>
          </TableRow>
          <TableRow>
            <TableData>Priya Sharma</TableData>
            <TableData fontWeight="$normal">priya@example.com</TableData>
            <TableData fontWeight="$normal">1234567890</TableData>
          </TableRow>
          <TableRow>
            <TableData>Ravi Patel</TableData>
            <TableData fontWeight="$normal">ravi@example.com</TableData>
            <TableData fontWeight="$normal">1234567890</TableData>
          </TableRow>
          <TableRow>
            <TableData>Ananya Gupta</TableData>
            <TableData fontWeight="$normal">ananya@example.com</TableData>
            <TableData fontWeight="$normal">1234567890</TableData>
          </TableRow>
          <TableRow>
            <TableData>Arjun Singh</TableData>
            <TableData fontWeight="$normal">arjun@example.com</TableData>
            <TableData fontWeight="$normal">1234567890</TableData>
          </TableRow>
          <TableRow>
            <TableData>Nisha Verma</TableData>
            <TableData fontWeight="$normal">nisha@example.com</TableData>
            <TableData fontWeight="$normal">1234567890</TableData>
          </TableRow>
        </TableBody>
        <TableCaption fontWeight="$normal">
          Showing recent membership details
        </TableCaption>
      </Table>
    </Box>
  )
}

Stripped table

This example demonstrates a table with a striped background.

function App() {
  return (
    <Box className="p-3 bg-background-0 rounded-lg overflow-hidden">
      <Table className="w-full">
        <TableHeader>
          <TableRow className="border-b-0 bg-background-0 hover:bg-background-0">
            <TableHead className="font-bold">Order id</TableHead>
            <TableHead>Items</TableHead>
            <TableHead>Name</TableHead>
            <TableHead>City</TableHead>
            <TableHead>Order price</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow className="border-b-0 bg-background-50">
            <TableData>5771</TableData>
            <TableData>3</TableData>
            <TableData>Rajesh Kumar</TableData>
            <TableData>New Jersey</TableData>
            <TableData>$ 200</TableData>
            <TableData>
              <Badge
                size="sm"
                action="success"
                className="w-fit justify-center"
              >
                <BadgeText>Completed</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow className="border-b-0 hover:bg-background-0">
            <TableData>5231</TableData>
            <TableData>2</TableData>
            <TableData>Priya Sharma</TableData>
            <TableData>Austin</TableData>
            <TableData>$ 150</TableData>
            <TableData>
              <Badge size="sm" action="info" className="w-fit justify-center">
                <BadgeText>Processing</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow className="border-b-0 bg-background-50">
            <TableData>5771</TableData>
            <TableData>3</TableData>
            <TableData>Ravi Patel</TableData>
            <TableData>Seattle</TableData>
            <TableData>$ 215</TableData>
            <TableData>
              <Badge
                size="sm"
                action="warning"
                className="w-fit justify-center"
              >
                <BadgeText>Shipped</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow className="border-b-0 hover:bg-background-0">
            <TableData>5231</TableData>
            <TableData>4</TableData>
            <TableData>Ananya Gupta</TableData>
            <TableData>California</TableData>
            <TableData>$ 88</TableData>
            <TableData>
              <Badge size="sm" action="info" className="w-fit justify-center">
                <BadgeText>Processing</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow className="border-b-0 bg-background-50">
            <TableData>5771</TableData>
            <TableData>3</TableData>
            <TableData>Arjun Singh</TableData>
            <TableData>Seattle</TableData>
            <TableData>$ 115</TableData>
            <TableData>
              <Badge
                size="sm"
                action="success"
                className="w-fit justify-center"
              >
                <BadgeText>Completed</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow className="border-b-0 bg-background-0 hover:bg-background-0">
            <TableData>5771</TableData>
            <TableData>3</TableData>
            <TableData>Nisha Verma</TableData>
            <TableData>Seattle</TableData>
            <TableData>$ 115</TableData>
            <TableData>
              <Badge size="sm" action="info" className="w-fit justify-center">
                <BadgeText>Processing</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
        </TableBody>
      </Table>
    </Box>
  )
}

Table with other components

This example illustrates a table component with a badge component.

function App() {
  return (
    <Box className="rounded-lg overflow-hidden">
      <Table className="w-full">
        <TableHeader>
          <TableRow>
            <TableHead className="font-bold">Order id</TableHead>
            <TableHead>Items</TableHead>
            <TableHead>Name</TableHead>
            <TableHead>City</TableHead>
            <TableHead>Order price</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableData>571</TableData>
            <TableData>3</TableData>
            <TableData>Rajesh Kumar</TableData>
            <TableData>New Jersey</TableData>
            <TableData>$ 200</TableData>
            <TableData>
              <Badge
                size="sm"
                action="success"
                className="w-fit justify-center"
              >
                <BadgeText>Completed</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow>
            <TableData>5231</TableData>
            <TableData>2</TableData>
            <TableData>Priya Sharma</TableData>
            <TableData>Austin</TableData>
            <TableData>$ 150</TableData>
            <TableData>
              <Badge size="sm" action="info" className="w-fit justify-center">
                <BadgeText>Processing</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow>
            <TableData>5771</TableData>
            <TableData>3</TableData>
            <TableData>Ravi Patel</TableData>
            <TableData>Seattle</TableData>
            <TableData>$ 215</TableData>
            <TableData>
              <Badge
                size="sm"
                action="warning"
                className="w-fit justify-center"
              >
                <BadgeText>Shipped</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow>
            <TableData>5231</TableData>
            <TableData>4</TableData>
            <TableData>Ananya Gupta</TableData>
            <TableData>California</TableData>
            <TableData>$ 88</TableData>
            <TableData>
              <Badge size="sm" action="info" className="w-fit justify-center">
                <BadgeText>Processing</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow>
            <TableData>5771</TableData>
            <TableData>3</TableData>
            <TableData>Arjun Singh</TableData>
            <TableData>Seattle</TableData>
            <TableData>$ 115</TableData>
            <TableData>
              <Badge size="sm" action="info" className="w-fit justify-center">
                <BadgeText>Processing</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
          <TableRow>
            <TableData>5771</TableData>
            <TableData>3</TableData>
            <TableData>Nisha Verma</TableData>
            <TableData>Austin</TableData>
            <TableData>$ 115</TableData>
            <TableData>
              <Badge
                size="sm"
                action="success"
                className="w-fit justify-center"
              >
                <BadgeText>Completed</BadgeText>
              </Badge>
            </TableData>
          </TableRow>
        </TableBody>
      </Table>
    </Box>
  )
}

Table with top and side header

This example illustrates a table component with a top and a side header.

function App() {
  return (
    <Box className="border border-solid border-outline-200 rounded-lg overflow-hidden w-full">
      <Table className="w-full">
        <TableHeader>
          <TableRow className="bg-background-50">
            <TableHead className="border-0 border-r border-solid border-outline-200">
              Player
            </TableHead>
            <TableHead>Pts</TableHead>
            <TableHead>Reb</TableHead>
            <TableHead>Ast</TableHead>
            <TableHead>Stl</TableHead>
            <TableHead>Blk</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableHead className="bg-background-50 border-0 border-solid border-r border-outline-200 font-medium">
              LeBron James
            </TableHead>
            <TableData>30</TableData>
            <TableData>10</TableData>
            <TableData>5</TableData>
            <TableData>5</TableData>
            <TableData>2</TableData>
          </TableRow>
          <TableRow>
            <TableHead className="bg-background-50 border-0 border-solid border-r border-outline-200 font-medium">
              Anthony Davis
            </TableHead>
            <TableData>21</TableData>
            <TableData>15</TableData>
            <TableData>10</TableData>
            <TableData>3</TableData>
            <TableData>6</TableData>
          </TableRow>
          <TableRow>
            <TableHead className="bg-background-50 border-0 border-solid border-r border-outline-200 font-medium">
              Austin Reaves
            </TableHead>
            <TableData>18</TableData>
            <TableData>8</TableData>
            <TableData>15</TableData>
            <TableData>3</TableData>
            <TableData>3</TableData>
          </TableRow>
          <TableRow className="border-b-0">
            <TableHead className="bg-background-50 border-0 border-solid border-r border-outline-200 font-medium">
              Kobe Bryant
            </TableHead>
            <TableData>32</TableData>
            <TableData>12</TableData>
            <TableData>13</TableData>
            <TableData>4</TableData>
            <TableData>5</TableData>
          </TableRow>
        </TableBody>
      </Table>
    </Box>
  )
}