Table

Presents related data in semantic rows and columns.

On this page

This docs is LLM-friendly and available as clean Markdown.

Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more

Usage

import {
  GlTable,
  GlTableBody,
  GlTableCaption,
  GlTableCell,
  GlTableFooter,
  GlTableHead,
  GlTableHeader,
  GlTableRow,
} from "gitlab-ui-react/table";

<GlTable>
  <GlTableCaption>Project members</GlTableCaption>
  <GlTableHeader>
    <GlTableRow>
      <GlTableHead>Name</GlTableHead>
    </GlTableRow>
  </GlTableHeader>
  <GlTableBody>
    <GlTableRow>
      <GlTableCell>Norcleeh</GlTableCell>
    </GlTableRow>
  </GlTableBody>
  <GlTableFooter>
    <GlTableRow>
      <GlTableCell>1 member</GlTableCell>
    </GlTableRow>
  </GlTableFooter>
</GlTable>

Default

Use semantic table parts to preserve the relationship between headers and cells. Data processing such as sorting, filtering, and pagination remains the responsibility of the parent.

Example data table

Storybook

Example entities
Name	Type	Context
Norcleeh	User name	OPanel
@NriotHrreion	User ID	Profile
Nocpiun	Organization	OPanel

import {
  GlTable,
  GlTableBody,
  GlTableCaption,
  GlTableCell,
  GlTableHead,
  GlTableHeader,
  GlTableRow,
} from "gitlab-ui-react/table";

const rows = [
  { context: "OPanel", name: "Norcleeh", type: "User name" },
  { context: "Profile", name: "@NriotHrreion", type: "User ID" },
  { context: "OPanel", name: "Nocpiun", type: "Organization" },
];

export default function TableExample() {
  return (
    <GlTable>
      <GlTableCaption>Example entities</GlTableCaption>
      <GlTableHeader>
        <GlTableRow>
          <GlTableHead>Name</GlTableHead>
          <GlTableHead>Type</GlTableHead>
          <GlTableHead>Context</GlTableHead>
        </GlTableRow>
      </GlTableHeader>
      <GlTableBody>
        {rows.map((row) => (
          <GlTableRow key={row.name}>
            <GlTableHead scope="row" stackedHeading="Name">{row.name}</GlTableHead>
            <GlTableCell stackedHeading="Type">{row.type}</GlTableCell>
            <GlTableCell stackedHeading="Context">{row.context}</GlTableCell>
          </GlTableRow>
        ))}
      </GlTableBody>
    </GlTable>
  );
}

Striped

Use striped to add alternating backgrounds when they help users distinguish adjacent rows.

Striped table

Project members
Name	Role
Norcleeh	Maintainer
@NriotHrreion	Developer

import {
  GlTable,
  GlTableBody,
  GlTableCaption,
  GlTableCell,
  GlTableHead,
  GlTableHeader,
  GlTableRow,
} from "gitlab-ui-react/table";

export default function TableStripedExample() {
  return (
    <GlTable striped>
      <GlTableCaption>Project members</GlTableCaption>
      <GlTableHeader>
        <GlTableRow>
          <GlTableHead>Name</GlTableHead>
          <GlTableHead>Role</GlTableHead>
        </GlTableRow>
      </GlTableHeader>
      <GlTableBody>
        <GlTableRow>
          <GlTableHead scope="row">Norcleeh</GlTableHead>
          <GlTableCell>Maintainer</GlTableCell>
        </GlTableRow>
        <GlTableRow>
          <GlTableHead scope="row">@NriotHrreion</GlTableHead>
          <GlTableCell>Developer</GlTableCell>
        </GlTableRow>
      </GlTableBody>
    </GlTable>
  );
}

Bordered

Use bordered when every cell needs a visible boundary.

Bordered table

Project members
Name	Role
Norcleeh	Maintainer
@NriotHrreion	Developer

import {
  GlTable,
  GlTableBody,
  GlTableCaption,
  GlTableCell,
  GlTableHead,
  GlTableHeader,
  GlTableRow,
} from "gitlab-ui-react/table";

export default function TableBorderedExample() {
  return (
    <GlTable bordered>
      <GlTableCaption>Project members</GlTableCaption>
      <GlTableHeader>
        <GlTableRow>
          <GlTableHead>Name</GlTableHead>
          <GlTableHead>Role</GlTableHead>
        </GlTableRow>
      </GlTableHeader>
      <GlTableBody>
        <GlTableRow>
          <GlTableHead scope="row">Norcleeh</GlTableHead>
          <GlTableCell>Maintainer</GlTableCell>
        </GlTableRow>
        <GlTableRow>
          <GlTableHead scope="row">@NriotHrreion</GlTableHead>
          <GlTableCell>Developer</GlTableCell>
        </GlTableRow>
      </GlTableBody>
    </GlTable>
  );
}

Compact

Use small to reduce cell padding in dense, text-focused data sets.

Compact table

Project members
Name	Role
Norcleeh	Maintainer
@NriotHrreion	Developer

import {
  GlTable,
  GlTableBody,
  GlTableCaption,
  GlTableCell,
  GlTableHead,
  GlTableHeader,
  GlTableRow,
} from "gitlab-ui-react/table";

export default function TableCompactExample() {
  return (
    <GlTable small>
      <GlTableCaption>Project members</GlTableCaption>
      <GlTableHeader>
        <GlTableRow>
          <GlTableHead>Name</GlTableHead>
          <GlTableHead>Role</GlTableHead>
        </GlTableRow>
      </GlTableHeader>
      <GlTableBody>
        <GlTableRow>
          <GlTableHead scope="row">Norcleeh</GlTableHead>
          <GlTableCell>Maintainer</GlTableCell>
        </GlTableRow>
        <GlTableRow>
          <GlTableHead scope="row">@NriotHrreion</GlTableHead>
          <GlTableCell>Developer</GlTableCell>
        </GlTableRow>
      </GlTableBody>
    </GlTable>
  );
}

Responsive tables

Set stacked to true or a breakpoint when rows should become labeled blocks at smaller widths. Supply stackedHeading on each cell so its column label remains visible in stacked mode.

Stacked table

Storybook

Project members
Name	Role	Organization
Norcleeh	Maintainer	Nocpiun
NriotHrreion	Developer	Nocpiun

import {
  GlTable,
  GlTableBody,
  GlTableCaption,
  GlTableCell,
  GlTableHead,
  GlTableHeader,
  GlTableRow,
} from "gitlab-ui-react/table";

export default function TableResponsiveExample() {
  return (
    <div className="max-w-md">
      <GlTable stacked>
        <GlTableCaption>Project members</GlTableCaption>
        <GlTableHeader>
          <GlTableRow>
            <GlTableHead>Name</GlTableHead>
            <GlTableHead>Role</GlTableHead>
            <GlTableHead>Organization</GlTableHead>
          </GlTableRow>
        </GlTableHeader>
        <GlTableBody>
          <GlTableRow>
            <GlTableHead scope="row" stackedHeading="Name">Norcleeh</GlTableHead>
            <GlTableCell stackedHeading="Role">Maintainer</GlTableCell>
            <GlTableCell stackedHeading="Organization">Nocpiun</GlTableCell>
          </GlTableRow>
          <GlTableRow>
            <GlTableHead scope="row" stackedHeading="Name">NriotHrreion</GlTableHead>
            <GlTableCell stackedHeading="Role">Developer</GlTableCell>
            <GlTableCell stackedHeading="Organization">Nocpiun</GlTableCell>
          </GlTableRow>
        </GlTableBody>
      </GlTable>
    </div>
  );
}

Set stickyHeader when users need column headings to remain visible while a long table scrolls. A CSS length also limits the scrolling region’s height.

Table with sticky header

Storybook

Pipeline history
Pipeline	Status
Pipeline 1	Passed
Pipeline 2	Running
Pipeline 3	Passed
Pipeline 4	Running
Pipeline 5	Passed
Pipeline 6	Running
Pipeline 7	Passed
Pipeline 8	Running
Pipeline 9	Passed
Pipeline 10	Running

import {
  GlTable,
  GlTableBody,
  GlTableCaption,
  GlTableCell,
  GlTableHead,
  GlTableHeader,
  GlTableRow,
} from "gitlab-ui-react/table";

const pipelines = Array.from({ length: 10 }, (_, index) => ({
  name: `Pipeline ${index + 1}`,
  status: index % 2 === 0 ? "Passed" : "Running",
}));

export default function TableStickyExample() {
  return (
    <div className="max-w-md">
      <GlTable stickyHeader="14rem">
        <GlTableCaption>Pipeline history</GlTableCaption>
        <GlTableHeader>
          <GlTableRow>
            <GlTableHead>Pipeline</GlTableHead>
            <GlTableHead>Status</GlTableHead>
          </GlTableRow>
        </GlTableHeader>
        <GlTableBody>
          {pipelines.map((pipeline) => (
            <GlTableRow key={pipeline.name}>
              <GlTableHead scope="row">{pipeline.name}</GlTableHead>
              <GlTableCell>{pipeline.status}</GlTableCell>
            </GlTableRow>
          ))}
        </GlTableBody>
      </GlTable>
    </div>
  );
}

Accessibility

Add GlTableCaption to describe the table. A visually hidden caption is preferable to omitting one.
Use GlTableHead with scope="col" for column headers and scope="row" for row headers.
Keep table structure for genuinely tabular data; use a list for unrelated items.
When sorting is implemented by the parent, expose the sort state with aria-sort and use a keyboard-accessible control in the header.

API

`GlTable`

Prop	Description	Default
`bordered`	Adds borders around every cell.	`false`
`borderless`	Removes table borders and takes visual precedence over `bordered`.	`false`
`captionTop`	Places the caption above the table.	`false`
`fixed`	Uses a fixed table layout.	`false`
`hover`	Highlights body rows on hover.	`false`
`noBorderCollapse`	Separates cell borders instead of collapsing them.	`false`
`outlined`	Adds an outer border.	`false`
`small`	Uses compact cell padding.	`false`
`stacked`	Stacks rows at every width or below `sm`, `md`, `lg`, or `xl`.	`false`
`stickyHeader`	Makes the header sticky; a string also sets the wrapper’s maximum height.	`false`
`striped`	Adds alternating row backgrounds.	`false`

`GlTableCaption`

Accepts children and supported caption attributes.

`GlTableHeader`

Accepts children and supported thead attributes.

`GlTableBody`

Accepts children and supported tbody attributes.

`GlTableFooter`

Accepts children and supported tfoot attributes.

`GlTableRow`

Accepts children and supported tr attributes.

`GlTableHead`

Prop	Description	Default
`scope`	Defines whether `GlTableHead` labels a row or column.	`"col"`
`stackedHeading`	Supplies the visible header-cell label in stacked mode.	—

`GlTableCell`

Prop	Description	Default
`stackedHeading`	Supplies the visible data-cell label in stacked mode.	—

Usage

Default

Striped

Bordered

Compact

Responsive tables

Sticky header

Accessibility

API

GlTable

GlTableCaption

GlTableHeader

GlTableBody

GlTableFooter

GlTableRow

GlTableHead

GlTableCell

Related resources

`GlTable`

`GlTableCaption`

`GlTableHeader`

`GlTableBody`

`GlTableFooter`

`GlTableRow`

`GlTableHead`

`GlTableCell`