Tables

Examples for opt-in styling of tables, alongside searching and sorting features.

The table search and sorting feature is enabled through the TanStack Table library. Ensure that you have imported all necessary files, as demonstrated in the code snippet of the respective component section.

Basic example

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88
4	Jane	Birkins	Support	+3 774 28 50

import Table from 'react-bootstrap/Table'

export default function TableBasicDemo() {
  return (
    <Table responsive>
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Position</th>
          <th scope="col">Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>John</td>
          <td>Doe</td>
          <td>CEO, Founder</td>
          <td className="text-nowrap">+3 555 68 70</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Anna</td>
          <td>Cabana</td>
          <td>Designer</td>
          <td className="text-nowrap">+3 434 65 93</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Kale</td>
          <td>Thornton</td>
          <td>Developer</td>
          <td className="text-nowrap">+3 285 42 88</td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td>Jane</td>
          <td>Birkins</td>
          <td>Support</td>
          <td className="text-nowrap">+3 774 28 50</td>
        </tr>
      </tbody>
    </Table>
  )
}

Fuzzy search

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88
4	Jane	Birkins	Support	+3 774 28 50
5	Robert	Smith	Marketing	+3 623 87 19
6	Emily	Johnson	Sales	+3 911 50 62
7	Matthew	Brown	Analyst	+3 329 49 75
8	Olivia	Davis	Finance	+3 146 91 27
9	William	Garcia	Project Manager	+3 509 76 39
10	Sophia	Adams	HR	+3 687 25 81

'use client'

import { useState, useMemo } from 'react'
import DocsComponentDemo from '@/components/docs/docs-component-demo'
import FormControl from 'react-bootstrap/FormControl'
import Table from 'react-bootstrap/Table'
import {
  ColumnDef,
  ColumnFiltersState,
  FilterFn,
  SortingFn,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  sortingFns,
  useReactTable,
} from '@tanstack/react-table'
import { RankingInfo, rankItem, compareItems } from '@tanstack/match-sorter-utils'

type Person = {
  id: number
  firstName: string
  lastName: string
  position: string
  phone: string
}

declare module '@tanstack/react-table' {
  // Add fuzzy filter to the filterFns
  interface FilterFns {
    fuzzy: FilterFn<unknown>
  }
  interface FilterMeta {
    itemRank: RankingInfo
  }
}

export default function TableSearchDemo() {
  const persons: Person[] = [
    { id: 1, firstName: 'John', lastName: 'Doe', position: 'CEO, Founder', phone: '+3 555 68 70' },
    { id: 2, firstName: 'Anna', lastName: 'Cabana', position: 'Designer', phone: '+3 434 65 93' },
    { id: 3, firstName: 'Kale', lastName: 'Thornton', position: 'Developer', phone: '+3 285 42 88' },
    { id: 4, firstName: 'Jane', lastName: 'Birkins', position: 'Support', phone: '+3 774 28 50' },
    { id: 5, firstName: 'Robert', lastName: 'Smith', position: 'Marketing', phone: '+3 623 87 19' },
    { id: 6, firstName: 'Emily', lastName: 'Johnson', position: 'Sales', phone: '+3 911 50 62' },
    { id: 7, firstName: 'Matthew', lastName: 'Brown', position: 'Analyst', phone: '+3 329 49 75' },
    { id: 8, firstName: 'Olivia', lastName: 'Davis', position: 'Finance', phone: '+3 146 91 27' },
    { id: 9, firstName: 'William', lastName: 'Garcia', position: 'Project Manager', phone: '+3 509 76 39' },
    { id: 10, firstName: 'Sophia', lastName: 'Adams', position: 'HR', phone: '+3 687 25 81' },
  ]

  const [data, setData] = useState<Person[]>(persons)
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
  const [globalFilter, setGlobalFilter] = useState('')

  const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
    const itemRank = rankItem(row.getValue(columnId), value)

    addMeta({ itemRank })

    return itemRank.passed
  }

  const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
    let dir = 0
    if (rowA.columnFiltersMeta[columnId]) {
      dir = compareItems(rowA.columnFiltersMeta[columnId]?.itemRank!, rowB.columnFiltersMeta[columnId]?.itemRank!)
    }

    return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
  }

  const columns = useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'id',
        cell: (info) => info.getValue(),
        header: '#',
        sortingFn: fuzzySort,
        filterFn: 'fuzzy',
      },
      {
        accessorKey: 'firstName',
        cell: (info) => info.getValue(),
        header: 'First',
        sortingFn: fuzzySort,
        filterFn: 'fuzzy',
      },
      {
        accessorKey: 'lastName',
        cell: (info) => info.getValue(),
        header: 'Last',
        sortingFn: fuzzySort,
        filterFn: 'fuzzy',
      },
      {
        accessorKey: 'position',
        cell: (info) => info.getValue(),
        header: 'Position',
        sortingFn: fuzzySort,
        filterFn: 'fuzzy',
      },
      {
        accessorKey: 'phone',
        cell: (info) => info.getValue(),
        header: 'Phone',
        sortingFn: fuzzySort,
        filterFn: 'fuzzy',
        enableSorting: false,
      },
    ],
    []
  )

  const table = useReactTable({
    columns,
    data,
    state: {
      columnFilters,
      globalFilter,
    },
    filterFns: {
      fuzzy: fuzzyFilter, // define as a filter function that can be used in column definitions
    },
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
    globalFilterFn: 'fuzzy', // apply fuzzy filter to the global filter (most common use case for fuzzy filter)
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getSortedRowModel: getSortedRowModel(),
  })

  return (
    <>
      <div className="position-relative mb-2" style={{ maxWidth: 280 }}>
        <i className="ci-search position-absolute top-50 start-0 translate-middle-y ms-3" />
        <FormControl
          type="text"
          className="form-icon-start"
          value={globalFilter ?? ''}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            setGlobalFilter(e.target.value)
          }}
          placeholder="Search table"
        />
        {globalFilter && (
          <button
            className="btn btn-sm btn-outline-secondary w-auto border-0 p-1 position-absolute top-50 end-0 translate-middle-y me-2"
            onClick={() => setGlobalFilter('')}
            aria-label="Clear search"
          >
            <svg className="opacity-75" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18.619 5.381a.875.875 0 0 1 0 1.238l-12 12A.875.875 0 0 1 5.38 17.38l12-12a.875.875 0 0 1 1.238 0Z"></path>
              <path d="M5.381 5.381a.875.875 0 0 1 1.238 0l12 12a.875.875 0 1 1-1.238 1.238l-12-12a.875.875 0 0 1 0-1.238Z"></path>
            </svg>
          </button>
        )}
      </div>
      <div className="table-responsive overflow-auto" style={{ height: 300 }}>
        <Table>
          <thead className="position-sticky top-0">
            {table.getHeaderGroups().map((headerGroup) => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <th key={header.id} colSpan={header.colSpan}>
                    {header.isPlaceholder ? null : (
                      <>
                        {header.column.getCanSort() ? (
                          <div
                            className={header.column.getCanSort() ? 'cursor-pointer text-nowrap select-none' : ''}
                            onClick={header.column.getToggleSortingHandler()}
                            title={
                              header.column.getCanSort()
                                ? header.column.getNextSortingOrder() === 'asc'
                                  ? 'Sort ascending'
                                  : header.column.getNextSortingOrder() === 'desc'
                                    ? 'Sort descending'
                                    : 'Clear sorting'
                                : undefined
                            }
                          >
                            {flexRender(header.column.columnDef.header, header.getContext())}
                            <span className="fs-sm opacity-75 ms-1">
                              {' '}
                              {{ asc: '↑', desc: '↓' }[header.column.getIsSorted() as string] ?? (
                                <i className="ci-sort align-middle" />
                              )}
                            </span>
                          </div>
                        ) : (
                          flexRender(header.column.columnDef.header, header.getContext())
                        )}
                      </>
                    )}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody>
            {table.getRowModel().rows.map((row) => (
              <tr key={row.id}>
                {row.getVisibleCells().map((cell) => (
                  <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    </>
  )
}

Sorting

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88
4	Jane	Birkins	Support	+3 774 28 50
5	Robert	Smith	Marketing	+3 623 87 19
6	Emily	Johnson	Sales	+3 911 50 62
7	Matthew	Brown	Analyst	+3 329 49 75
8	Olivia	Davis	Finance	+3 146 91 27
9	William	Garcia	Project Manager	+3 509 76 39
10	Sophia	Adams	HR	+3 687 25 81

'use client'

import { useState, useMemo } from 'react'
import DocsComponentDemo from '@/components/docs/docs-component-demo'
import Table from 'react-bootstrap/Table'
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  SortingState,
  useReactTable,
} from '@tanstack/react-table'

type Person = {
  id: number
  firstName: string
  lastName: string
  position: string
  phone: string
}

export default function TableSortingDemo() {
  const columns = useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'id',
        cell: (info) => info.getValue(),
        header: '#',
        sortingFn: 'alphanumeric',
      },
      {
        accessorKey: 'firstName',
        cell: (info) => info.getValue(),
        header: 'First',
        sortingFn: 'textCaseSensitive',
      },
      {
        accessorKey: 'lastName',
        cell: (info) => info.getValue(),
        header: 'Last',
        sortingFn: 'textCaseSensitive',
      },
      {
        accessorKey: 'position',
        cell: (info) => info.getValue(),
        header: 'Position',
        sortingFn: 'textCaseSensitive',
      },
      {
        accessorKey: 'phone',
        cell: (info) => info.getValue(),
        header: 'Phone',
        enableSorting: false,
      },
    ],
    []
  )

  const persons: Person[] = [
    { id: 1, firstName: 'John', lastName: 'Doe', position: 'CEO, Founder', phone: '+3 555 68 70' },
    { id: 2, firstName: 'Anna', lastName: 'Cabana', position: 'Designer', phone: '+3 434 65 93' },
    { id: 3, firstName: 'Kale', lastName: 'Thornton', position: 'Developer', phone: '+3 285 42 88' },
    { id: 4, firstName: 'Jane', lastName: 'Birkins', position: 'Support', phone: '+3 774 28 50' },
    { id: 5, firstName: 'Robert', lastName: 'Smith', position: 'Marketing', phone: '+3 623 87 19' },
    { id: 6, firstName: 'Emily', lastName: 'Johnson', position: 'Sales', phone: '+3 911 50 62' },
    { id: 7, firstName: 'Matthew', lastName: 'Brown', position: 'Analyst', phone: '+3 329 49 75' },
    { id: 8, firstName: 'Olivia', lastName: 'Davis', position: 'Finance', phone: '+3 146 91 27' },
    { id: 9, firstName: 'William', lastName: 'Garcia', position: 'Project Manager', phone: '+3 509 76 39' },
    { id: 10, firstName: 'Sophia', lastName: 'Adams', position: 'HR', phone: '+3 687 25 81' },
  ]

  const [data, setData] = useState<Person[]>(persons)
  const [sorting, setSorting] = useState<SortingState>([])
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: {
      sorting,
    },
    filterFns: {
      fuzzy: () => true,
    },
  })

  return (
    <div className="table-responsive overflow-auto" style={{ height: 300 }}>
      <Table>
        <thead className="position-sticky top-0">
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id} colSpan={header.colSpan}>
                  {header.isPlaceholder ? null : (
                    <>
                      {header.column.getCanSort() ? (
                        <div
                          className={header.column.getCanSort() ? 'cursor-pointer text-nowrap select-none' : ''}
                          onClick={header.column.getToggleSortingHandler()}
                          title={
                            header.column.getCanSort()
                              ? header.column.getNextSortingOrder() === 'asc'
                                ? 'Sort ascending'
                                : header.column.getNextSortingOrder() === 'desc'
                                  ? 'Sort descending'
                                  : 'Clear sorting'
                              : undefined
                          }
                        >
                          {flexRender(header.column.columnDef.header, header.getContext())}
                          <span className="fs-sm opacity-75 ms-1">
                            {' '}
                            {{ asc: '↑', desc: '↓' }[header.column.getIsSorted() as string] ?? (
                              <i className="ci-sort align-middle" />
                            )}
                          </span>
                        </div>
                      ) : (
                        flexRender(header.column.columnDef.header, header.getContext())
                      )}
                    </>
                  )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  )
}

Dark table

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88
4	Jane	Birkins	Support	+3 774 28 50

import Table from 'react-bootstrap/Table'

export default function TableDarkDemo() {
  return (
    <Table variant="dark" responsive>
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Position</th>
          <th scope="col">Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>John</td>
          <td>Doe</td>
          <td>CEO, Founder</td>
          <td className="text-nowrap">+3 555 68 70</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Anna</td>
          <td>Cabana</td>
          <td>Designer</td>
          <td className="text-nowrap">+3 434 65 93</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Kale</td>
          <td>Thornton</td>
          <td>Developer</td>
          <td className="text-nowrap">+3 285 42 88</td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td>Jane</td>
          <td>Birkins</td>
          <td>Support</td>
          <td className="text-nowrap">+3 774 28 50</td>
        </tr>
      </tbody>
    </Table>
  )
}

Striped rows

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

import Table from 'react-bootstrap/Table'

export default function TableStripedRowsDemo() {
  return (
    <>
      <Table striped responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>

      <Table variant="dark" striped responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>
    </>
  )
}

Striped columns

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

import Table from 'react-bootstrap/Table'

export default function TableStripedColsDemo() {
  return (
    <>
      <Table striped="columns" responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>

      <Table variant="dark" striped="columns" responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>
    </>
  )
}

Bordered table

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

import Table from 'react-bootstrap/Table'

export default function TableBorderedDemo() {
  return (
    <>
      <Table bordered responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>

      <Table variant="dark" bordered responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>
    </>
  )
}

Table without borders

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

import Table from 'react-bootstrap/Table'

export default function TableBorderlessDemo() {
  return (
    <>
      <Table borderless responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>

      <Table variant="dark" borderless responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>
    </>
  )
}

Hoverable rows

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93
3	Kale	Thornton	Developer	+3 285 42 88

import Table from 'react-bootstrap/Table'

export default function TableHoverableDemo() {
  return (
    <>
      <Table hover responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>

      <Table variant="dark" hover responsive>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td className="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </Table>
    </>
  )
}

Contextual colors

#	Class	Heading	Heading
1	Primary	Column content	Column content
2	Secondary	Column content	Column content
3	Success	Column content	Column content
4	Info	Column content	Column content
5	Warning	Column content	Column content
6	Danger	Column content	Column content
7	Lght	Column content	Column content
8	Dark	Column content	Column content

import Table from 'react-bootstrap/Table'

export default function TableContextualDemo() {
  return (
    <Table responsive style={{ '--cz-table-bg': 'transparent' } as React.CSSProperties}>
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Class</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr className="bg-primary-subtle">
          <th scope="row">1</th>
          <td>Primary</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr className="bg-secondary-subtle">
          <th scope="row">2</th>
          <td>Secondary</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr className="bg-success-subtle">
          <th scope="row">3</th>
          <td>Success</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr className="bg-info-subtle">
          <th scope="row">4</th>
          <td>Info</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr className="bg-warning-subtle">
          <th scope="row">5</th>
          <td>Warning</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr className="bg-danger-subtle">
          <th scope="row">6</th>
          <td>Danger</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr className="bg-light-subtle">
          <th scope="row">7</th>
          <td>Lght</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr className="bg-dark-subtle">
          <th scope="row">8</th>
          <td>Dark</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
      </tbody>
    </Table>
  )
}

Color borders

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93

#	First	Last	Position	Phone
1	John	Doe	CEO, Founder	+3 555 68 70
2	Anna	Cabana	Designer	+3 434 65 93

import Table from 'react-bootstrap/Table'

export default function TableColorBordersDemo() {
  return (
    <>
      <Table bordered responsive className="border-info">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
        </tbody>
      </Table>

      <Table bordered responsive className="border-primary">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td className="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td className="text-nowrap">+3 434 65 93</td>
          </tr>
        </tbody>
      </Table>
    </>
  )
}