BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Actions
      • Overview
      • Button
      • ContextMenu
      • Link
    • Controls
      • Overview
      • Checkbox
      • Tag
      • Toggle
    • Forms
      • Overview
      • DatePicker
      • FileUploader
      • Input
      • NumberInput
      • RadioButton
      • Search
      • Select
      • Slider
      • TextArea
      • TextInput
    • Hooks
      • useIsomorphicLayoutEffect
      • useMediaQuery
      • useSettings
    • Navigation
      • Overview
      • AnchorNavigation
      • BannerNavigation
      • Breadcrumb
      • Footer
      • InfoBar
      • MainNavigation
      • SecondaryNavigation
      • StepNavigation
      • SubNavigation
    • Overlay
      • Overview
      • Credits
      • Modal
      • ModalWrapper
      • Notification
      • Tooltip
    • Structure
      • Overview
      • Accordion
      • AuthLayout
      • Avatar
      • Callout
      • Card
      • ContentSwitcher
      • Empty
      • Hero
      • InlineLoading
      • Item
      • List
      • Loading
      • mdxComponents
      • Module
      • Pagination
      • ReadMore
      • Story
      • Table
      • Tabs
      • Text
      • Unit
      • User
      • WFPCoreProvider
      • Wrapper
Components
Structure
Table

Table

  • Design
  • Code
  • Props

Import statement

import { Table, TableSorting } from "@wfp/react"

Usage

Basic Example

Expand code

Editable Example

import { Table } from "@wfp/react";

<Table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</Table>;

React Table

Expand code

Editable Example

const columnsSample = [
  {
    Header: "Name",
    columns: [
      {
        Header: "First Name",
        accessor: "firstName",
      },
      {
        Header: "Last Name",
        accessor: "lastName",
      },
    ],
  },
  {
    Header: "Info",
    columns: [
      {
        Header: "Age",
        accessor: "age",
      },
    ],
  },
];

const dataSample = [
  {
    id: 1,
    firstName: "Ama",
    lastName: "Super",
    age: 23,
  },
  {
    id: 2,
    firstName: "Ama",
    lastName: "Duper",
    age: 46,
  },
  {
    id: 3,
    firstName: "Smith",
    lastName: "Super",
    age: 28,
  },
  {
    id: 4,
    firstName: "Duper",
    lastName: "Super",
    age: 79,
  },
  {
    id: 5,
    firstName: "Gate",
    lastName: "Super",
    age: 50,
  },
];

const ReactTableExample = () => {
  const columns = useMemo(() => columnsSample, []);
  const data = useMemo(() => dataSample, []);

  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  });

  // Render the UI for your table
  return (
    <Table {...getTableProps()} withBorder={true}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>
                {column.render("Header")}
                {/* <TableSorting {...column} /> */}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <td {...cell.getCellProps()}>
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
};

render(<ReactTableExample />);

On this page

  • Usage

References

  • Storybook
Storybook
Figma library
Contact us
2025 © World Food Programme