Tailwind CSS Table - React

Use our React and Tailwind CSS table to display sets of data in your web projects.

See below our beautiful table examples that you can use in your Tailwind CSS and React project. The examples also comes in different styles so you can adapt it easily to your needs.

Table Demo

Here's how to implement a very simple and responsive table component. It can be used to display sets of data in your website.

NameJobEmployed
John MichaelManager23/04/18Edit
Alexa LirasDeveloper23/04/18Edit
Laurent PerrierExecutive19/09/17Edit
Michael LeviDeveloper24/12/08Edit
Richard GranManager04/10/21Edit
import { Card, Typography } from "@material-tailwind/react";

const TABLE_HEAD = ["Name", "Job", "Employed", ""];

const TABLE_ROWS = [
  {
    name: "John Michael",
    job: "Manager",
    date: "23/04/18",
  },
  {
    name: "Alexa Liras",
    job: "Developer",
    date: "23/04/18",
  },
  {
    name: "Laurent Perrier",
    job: "Executive",
    date: "19/09/17",
  },
  {
    name: "Michael Levi",
    job: "Developer",
    date: "24/12/08",
  },
  {
    name: "Richard Gran",
    job: "Manager",
    date: "04/10/21",
  },
];

export function TableDemo() {
  return (
    <div className="w-full overflow-hidden rounded-lg border border-surface">
      <table className="w-full">
        <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
          <tr>
            {TABLE_HEAD.map((head) => (
              <th key={head} className="px-2.5 py-2 text-start font-medium">
                {head}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="group text-sm text-black dark:text-white">
          {TABLE_ROWS.map(({ name, job, date }, index) => {
            return (
              <tr key={index} className="border-b border-surface last:border-0">
                <td className="p-3">{name}</td>
                <td className="p-3">{job}</td>
                <td className="p-3">{date}</td>
                <td className="p-3">
                  <Typography
                    as="a"
                    href="#"
                    type="small"
                    className="font-medium hover:text-primary"
                  >
                    Edit
                  </Typography>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}
import { Card, Typography } from "@material-tailwind/react";

const TABLE_HEAD = ["Name", "Job", "Employed", ""];

const TABLE_ROWS = [
  {
    name: "John Michael",
    job: "Manager",
    date: "23/04/18",
  },
  {
    name: "Alexa Liras",
    job: "Developer",
    date: "23/04/18",
  },
  {
    name: "Laurent Perrier",
    job: "Executive",
    date: "19/09/17",
  },
  {
    name: "Michael Levi",
    job: "Developer",
    date: "24/12/08",
  },
  {
    name: "Richard Gran",
    job: "Manager",
    date: "04/10/21",
  },
];

export function TableDemo() {
  return (
    <div className="w-full overflow-hidden rounded-lg border border-surface">
      <table className="w-full">
        <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
          <tr>
            {TABLE_HEAD.map((head) => (
              <th key={head} className="px-2.5 py-2 text-start font-medium">
                {head}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="group text-sm text-black dark:text-white">
          {TABLE_ROWS.map(({ name, job, date }, index) => {
            return (
              <tr key={index} className="border-b border-surface last:border-0">
                <td className="p-3">{name}</td>
                <td className="p-3">{job}</td>
                <td className="p-3">{date}</td>
                <td className="p-3">
                  <Typography
                    as="a"
                    href="#"
                    type="small"
                    className="font-medium hover:text-primary"
                  >
                    Edit
                  </Typography>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

Table with Striped Row

Use this table example to create a table with striped rows. This will help you to make your table more readable and user-friendly.

NameJobEmployed
John MichaelManager23/04/18Edit
Alexa LirasDeveloper23/04/18Edit
Laurent PerrierExecutive19/09/17Edit
Michael LeviDeveloper24/12/08Edit
Richard GranManager04/10/21Edit
import { Typography } from "@material-tailwind/react";

const TABLE_HEAD = ["Name", "Job", "Employed", ""];

const TABLE_ROWS = [
  {
    name: "John Michael",
    job: "Manager",
    date: "23/04/18",
  },
  {
    name: "Alexa Liras",
    job: "Developer",
    date: "23/04/18",
  },
  {
    name: "Laurent Perrier",
    job: "Executive",
    date: "19/09/17",
  },
  {
    name: "Michael Levi",
    job: "Developer",
    date: "24/12/08",
  },
  {
    name: "Richard Gran",
    job: "Manager",
    date: "04/10/21",
  },
];

export function TableWithStripedRow() {
  return (
    <div className="w-full overflow-hidden rounded-lg border border-surface">
      <table className="w-full">
        <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
          <tr>
            {TABLE_HEAD.map((head) => (
              <th key={head} className="px-2.5 py-2 text-start font-medium">
                {head}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="group text-sm text-black dark:text-white">
          {TABLE_ROWS.map(({ name, job, date }, index) => {
            return (
              <tr
                key={index}
                className="even:bg-surface-light dark:even:bg-surface-dark"
              >
                <td className="p-3">{name}</td>
                <td className="p-3">{job}</td>
                <td className="p-3">{date}</td>
                <td className="p-3">
                  <Typography
                    as="a"
                    href="#"
                    type="small"
                    className="font-medium hover:text-primary"
                  >
                    Edit
                  </Typography>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}
import { Typography } from "@material-tailwind/react";

const TABLE_HEAD = ["Name", "Job", "Employed", ""];

const TABLE_ROWS = [
  {
    name: "John Michael",
    job: "Manager",
    date: "23/04/18",
  },
  {
    name: "Alexa Liras",
    job: "Developer",
    date: "23/04/18",
  },
  {
    name: "Laurent Perrier",
    job: "Executive",
    date: "19/09/17",
  },
  {
    name: "Michael Levi",
    job: "Developer",
    date: "24/12/08",
  },
  {
    name: "Richard Gran",
    job: "Manager",
    date: "04/10/21",
  },
];

export function TableWithStripedRow() {
  return (
    <div className="w-full overflow-hidden rounded-lg border border-surface">
      <table className="w-full">
        <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
          <tr>
            {TABLE_HEAD.map((head) => (
              <th key={head} className="px-2.5 py-2 text-start font-medium">
                {head}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="group text-sm text-black dark:text-white">
          {TABLE_ROWS.map(({ name, job, date }, index) => {
            return (
              <tr
                key={index}
                className="even:bg-surface-light dark:even:bg-surface-dark"
              >
                <td className="p-3">{name}</td>
                <td className="p-3">{job}</td>
                <td className="p-3">{date}</td>
                <td className="p-3">
                  <Typography
                    as="a"
                    href="#"
                    type="small"
                    className="font-medium hover:text-primary"
                  >
                    Edit
                  </Typography>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

Table with Striped Column

Use this table example to create a table with striped columns. This will help you to make your table more readable and user-friendly.

NameJobEmployed
John MichaelManager23/04/18Edit
Alexa LirasDeveloper23/04/18Edit
Laurent PerrierExecutive19/09/17Edit
Michael LeviDeveloper24/12/08Edit
Richard GranManager04/10/21Edit
import { Typography } from "@material-tailwind/react";

const TABLE_HEAD = ["Name", "Job", "Employed", ""];

const TABLE_ROWS = [
  {
    name: "John Michael",
    job: "Manager",
    date: "23/04/18",
  },
  {
    name: "Alexa Liras",
    job: "Developer",
    date: "23/04/18",
  },
  {
    name: "Laurent Perrier",
    job: "Executive",
    date: "19/09/17",
  },
  {
    name: "Michael Levi",
    job: "Developer",
    date: "24/12/08",
  },
  {
    name: "Richard Gran",
    job: "Manager",
    date: "04/10/21",
  },
];

export function TableWithStripedColumn() {
  return (
    <div className="w-full overflow-hidden rounded-lg border border-surface">
      <table className="w-full">
        <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
          <tr>
            {TABLE_HEAD.map((head) => (
              <th key={head} className="px-2.5 py-2 text-start font-medium">
                {head}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="group text-sm text-black dark:text-white">
          {TABLE_ROWS.map(({ name, job, date }, index) => {
            const isLast = index === TABLE_ROWS.length - 1;
            const classes = isLast ? "p-3" : "p-3 border-b border-surface";

            return (
              <tr key={index}>
                <td className={classes}>{name}</td>
                <td
                  className={`${classes} bg-surface-light dark:bg-surface-dark`}
                >
                  {job}
                </td>
                <td className={classes}>{date}</td>
                <td
                  className={`${classes} bg-surface-light dark:bg-surface-dark`}
                >
                  <Typography
                    as="a"
                    href="#"
                    type="small"
                    className="font-medium hover:text-primary"
                  >
                    Edit
                  </Typography>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}
import { Typography } from "@material-tailwind/react";

const TABLE_HEAD = ["Name", "Job", "Employed", ""];

const TABLE_ROWS = [
  {
    name: "John Michael",
    job: "Manager",
    date: "23/04/18",
  },
  {
    name: "Alexa Liras",
    job: "Developer",
    date: "23/04/18",
  },
  {
    name: "Laurent Perrier",
    job: "Executive",
    date: "19/09/17",
  },
  {
    name: "Michael Levi",
    job: "Developer",
    date: "24/12/08",
  },
  {
    name: "Richard Gran",
    job: "Manager",
    date: "04/10/21",
  },
];

export function TableWithStripedColumn() {
  return (
    <div className="w-full overflow-hidden rounded-lg border border-surface">
      <table className="w-full">
        <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
          <tr>
            {TABLE_HEAD.map((head) => (
              <th key={head} className="px-2.5 py-2 text-start font-medium">
                {head}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="group text-sm text-black dark:text-white">
          {TABLE_ROWS.map(({ name, job, date }, index) => {
            const isLast = index === TABLE_ROWS.length - 1;
            const classes = isLast ? "p-3" : "p-3 border-b border-surface";

            return (
              <tr key={index}>
                <td className={classes}>{name}</td>
                <td
                  className={`${classes} bg-surface-light dark:bg-surface-dark`}
                >
                  {job}
                </td>
                <td className={classes}>{date}</td>
                <td
                  className={`${classes} bg-surface-light dark:bg-surface-dark`}
                >
                  <Typography
                    as="a"
                    href="#"
                    type="small"
                    className="font-medium hover:text-primary"
                  >
                    Edit
                  </Typography>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

Transaction Table

Use this example to create a complex transaction table. This table is perfect to display transactions data in your dashboard or admin panel.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Recent Transactions

These are details about the last transactions

TransactionAmountDateStatusAccount
SpotifySpotify
$2,500Wed 3:00pm
paid
visa
visa 123406/2026
AmazonAmazon
$5,000Wed 1:00pm
paid
master-card
master card 123406/2026
PinterestPinterest
$3,400Mon 7:40pm
pending
master-card
master card 123406/2026
GoogleGoogle
$1,000Wed 5:00pm
paid
visa
visa 123406/2026
netflixnetflix
$14,000Wed 3:30am
cancelled
visa
visa 123406/2026
import { Download, Search, EditPencil } from "iconoir-react";
import {
  Typography,
  Button,
  Chip,
  Avatar,
  IconButton,
  Tooltip,
  Input,
} from "@material-tailwind/react";

const TABLE_HEAD = ["Transaction", "Amount", "Date", "Status", "Account", ""];

const TABLE_ROWS = [
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-spotify.svg",
    name: "Spotify",
    amount: "$2,500",
    date: "Wed 3:00pm",
    status: "paid",
    account: "visa",
    accountNumber: "1234",
    expiry: "06/2026",
  },
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-amazon.svg",
    name: "Amazon",
    amount: "$5,000",
    date: "Wed 1:00pm",
    status: "paid",
    account: "master-card",
    accountNumber: "1234",
    expiry: "06/2026",
  },
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-pinterest.svg",
    name: "Pinterest",
    amount: "$3,400",
    date: "Mon 7:40pm",
    status: "pending",
    account: "master-card",
    accountNumber: "1234",
    expiry: "06/2026",
  },
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-google.svg",
    name: "Google",
    amount: "$1,000",
    date: "Wed 5:00pm",
    status: "paid",
    account: "visa",
    accountNumber: "1234",
    expiry: "06/2026",
  },
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-netflix.svg",
    name: "netflix",
    amount: "$14,000",
    date: "Wed 3:30am",
    status: "cancelled",
    account: "visa",
    accountNumber: "1234",
    expiry: "06/2026",
  },
];

export function TransactionsTable() {
  return (
    <div className="w-full px-2">
      <div className="mb-4 flex flex-col justify-between gap-8 md:flex-row md:items-center">
        <div>
          <Typography type="h6">Recent Transactions</Typography>
          <Typography className="mt-1">
            These are details about the last transactions
          </Typography>
        </div>
        <div className="flex w-full shrink-0 gap-2 md:w-max">
          <div className="w-full md:w-72">
            <Input>
              <Input.Field placeholder="Search" />
              <Input.Icon placement="end">
                <Search className="h-5 w-5" />
              </Input.Icon>
            </Input>
          </div>
          <Button className="flex items-center gap-3" size="sm">
            <Download strokeWidth={2} className="h-4 w-4" /> Download
          </Button>
        </div>
      </div>

      <div className="w-full overflow-hidden rounded-lg border border-surface">
        <table className="w-full text-left">
          <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
            <tr>
              {TABLE_HEAD.map((head) => (
                <th key={head} className="px-2.5 py-2 text-start font-medium">
                  {head}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {TABLE_ROWS.map(
              (
                {
                  img,
                  name,
                  amount,
                  date,
                  status,
                  account,
                  accountNumber,
                  expiry,
                },
                index,
              ) => {
                const isLast = index === TABLE_ROWS.length - 1;
                const classes = isLast
                  ? "p-4"
                  : "p-4 border-b border-surface-light";

                return (
                  <tr key={name}>
                    <td className={classes}>
                      <div className="flex items-center gap-3">
                        <Avatar
                          src={img}
                          alt={name}
                          size="md"
                          className="border border-surface-light bg-surface-light object-contain p-1 dark:bg-surface-dark"
                        />
                        <Typography type="small" className="font-bold">
                          {name}
                        </Typography>
                      </div>
                    </td>
                    <td className={classes}>
                      <Typography type="small">{amount}</Typography>
                    </td>
                    <td className={classes}>
                      <Typography type="small">{date}</Typography>
                    </td>
                    <td className={classes}>
                      <div className="w-max">
                        <Chip
                          size="sm"
                          variant="ghost"
                          color={
                            status === "paid"
                              ? "success"
                              : status === "pending"
                                ? "warning"
                                : "error"
                          }
                        >
                          <Chip.Label>{status}</Chip.Label>
                        </Chip>
                      </div>
                    </td>
                    <td className={classes}>
                      <div className="flex items-center gap-3">
                        <div className="h-9 w-12 rounded-md border border-surface-light p-1">
                          <Avatar
                            src={
                              account === "visa"
                                ? "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/visa.png"
                                : "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/mastercard.png"
                            }
                            size="sm"
                            alt={account}
                            shape="square"
                            className="h-full w-full object-contain p-1"
                          />
                        </div>
                        <div className="flex flex-col">
                          <Typography type="small" className="capitalize">
                            {account.split("-").join(" ")} {accountNumber}
                          </Typography>
                          <Typography type="small" className="opacity-70">
                            {expiry}
                          </Typography>
                        </div>
                      </div>
                    </td>
                    <td className={classes}>
                      <Tooltip>
                        <Tooltip.Trigger
                          as={IconButton}
                          color="secondary"
                          variant="ghost"
                        >
                          <EditPencil className="h-4 w-4" />
                        </Tooltip.Trigger>
                        <Tooltip.Content>
                          Edit User
                          <Tooltip.Arrow />
                        </Tooltip.Content>
                      </Tooltip>
                    </td>
                  </tr>
                );
              },
            )}
          </tbody>
        </table>
      </div>
      <div className="flex items-center justify-between border-t border-surface-light py-4">
        <Button variant="outline" size="sm" color="secondary">
          Previous
        </Button>
        <div className="flex items-center gap-2">
          <IconButton size="sm" color="secondary">
            1
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            2
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            3
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            ...
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            8
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            9
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            10
          </IconButton>
        </div>
        <Button variant="outline" size="sm" color="secondary">
          Next
        </Button>
      </div>
    </div>
  );
}
import { Download, Search, EditPencil } from "iconoir-react";
import {
  Typography,
  Button,
  Chip,
  Avatar,
  IconButton,
  Tooltip,
  Input,
} from "@material-tailwind/react";

const TABLE_HEAD = ["Transaction", "Amount", "Date", "Status", "Account", ""];

const TABLE_ROWS = [
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-spotify.svg",
    name: "Spotify",
    amount: "$2,500",
    date: "Wed 3:00pm",
    status: "paid",
    account: "visa",
    accountNumber: "1234",
    expiry: "06/2026",
  },
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-amazon.svg",
    name: "Amazon",
    amount: "$5,000",
    date: "Wed 1:00pm",
    status: "paid",
    account: "master-card",
    accountNumber: "1234",
    expiry: "06/2026",
  },
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-pinterest.svg",
    name: "Pinterest",
    amount: "$3,400",
    date: "Mon 7:40pm",
    status: "pending",
    account: "master-card",
    accountNumber: "1234",
    expiry: "06/2026",
  },
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-google.svg",
    name: "Google",
    amount: "$1,000",
    date: "Wed 5:00pm",
    status: "paid",
    account: "visa",
    accountNumber: "1234",
    expiry: "06/2026",
  },
  {
    img: "https://docs.material-tailwind.com/img/logos/logo-netflix.svg",
    name: "netflix",
    amount: "$14,000",
    date: "Wed 3:30am",
    status: "cancelled",
    account: "visa",
    accountNumber: "1234",
    expiry: "06/2026",
  },
];

export function TransactionsTable() {
  return (
    <div className="w-full px-2">
      <div className="mb-4 flex flex-col justify-between gap-8 md:flex-row md:items-center">
        <div>
          <Typography type="h6">Recent Transactions</Typography>
          <Typography className="mt-1">
            These are details about the last transactions
          </Typography>
        </div>
        <div className="flex w-full shrink-0 gap-2 md:w-max">
          <div className="w-full md:w-72">
            <Input>
              <Input.Field placeholder="Search" />
              <Input.Icon placement="end">
                <Search className="h-5 w-5" />
              </Input.Icon>
            </Input>
          </div>
          <Button className="flex items-center gap-3" size="sm">
            <Download strokeWidth={2} className="h-4 w-4" /> Download
          </Button>
        </div>
      </div>

      <div className="w-full overflow-hidden rounded-lg border border-surface">
        <table className="w-full text-left">
          <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
            <tr>
              {TABLE_HEAD.map((head) => (
                <th key={head} className="px-2.5 py-2 text-start font-medium">
                  {head}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {TABLE_ROWS.map(
              (
                {
                  img,
                  name,
                  amount,
                  date,
                  status,
                  account,
                  accountNumber,
                  expiry,
                },
                index,
              ) => {
                const isLast = index === TABLE_ROWS.length - 1;
                const classes = isLast
                  ? "p-4"
                  : "p-4 border-b border-surface-light";

                return (
                  <tr key={name}>
                    <td className={classes}>
                      <div className="flex items-center gap-3">
                        <Avatar
                          src={img}
                          alt={name}
                          size="md"
                          className="border border-surface-light bg-surface-light object-contain p-1 dark:bg-surface-dark"
                        />
                        <Typography type="small" className="font-bold">
                          {name}
                        </Typography>
                      </div>
                    </td>
                    <td className={classes}>
                      <Typography type="small">{amount}</Typography>
                    </td>
                    <td className={classes}>
                      <Typography type="small">{date}</Typography>
                    </td>
                    <td className={classes}>
                      <div className="w-max">
                        <Chip
                          size="sm"
                          variant="ghost"
                          color={
                            status === "paid"
                              ? "success"
                              : status === "pending"
                                ? "warning"
                                : "error"
                          }
                        >
                          <Chip.Label>{status}</Chip.Label>
                        </Chip>
                      </div>
                    </td>
                    <td className={classes}>
                      <div className="flex items-center gap-3">
                        <div className="h-9 w-12 rounded-md border border-surface-light p-1">
                          <Avatar
                            src={
                              account === "visa"
                                ? "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/visa.png"
                                : "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/mastercard.png"
                            }
                            size="sm"
                            alt={account}
                            shape="square"
                            className="h-full w-full object-contain p-1"
                          />
                        </div>
                        <div className="flex flex-col">
                          <Typography type="small" className="capitalize">
                            {account.split("-").join(" ")} {accountNumber}
                          </Typography>
                          <Typography type="small" className="opacity-70">
                            {expiry}
                          </Typography>
                        </div>
                      </div>
                    </td>
                    <td className={classes}>
                      <Tooltip>
                        <Tooltip.Trigger
                          as={IconButton}
                          color="secondary"
                          variant="ghost"
                        >
                          <EditPencil className="h-4 w-4" />
                        </Tooltip.Trigger>
                        <Tooltip.Content>
                          Edit User
                          <Tooltip.Arrow />
                        </Tooltip.Content>
                      </Tooltip>
                    </td>
                  </tr>
                );
              },
            )}
          </tbody>
        </table>
      </div>
      <div className="flex items-center justify-between border-t border-surface-light py-4">
        <Button variant="outline" size="sm" color="secondary">
          Previous
        </Button>
        <div className="flex items-center gap-2">
          <IconButton size="sm" color="secondary">
            1
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            2
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            3
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            ...
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            8
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            9
          </IconButton>
          <IconButton variant="ghost" size="sm" color="secondary">
            10
          </IconButton>
        </div>
        <Button variant="outline" size="sm" color="secondary">
          Next
        </Button>
      </div>
    </div>
  );
}

Members Table

Use this example to create a table for memebrs of your team or organization. This table is perfect to display members and organize members data in your dashboard or admin panel.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Members list

See information about all members

MemberFunctionStatusEmployed
John Michael
John Michael[email protected]
ManagerOrganization
Online
23/04/18
Alexa Liras
Alexa Liras[email protected]
ProgramatorDeveloper
Offline
23/04/18
Laurent Perrier
Laurent Perrier[email protected]
ExecutiveProjects
Offline
19/09/17
Michael Levi
Michael Levi[email protected]
ProgramatorDeveloper
Online
24/12/08
Richard Gran
Richard Gran[email protected]
ManagerExecutive
Offline
04/10/21
Page 1 of 10
import { EditPencil, UserPlus, Search } from "iconoir-react";
import {
  Input,
  Typography,
  Button,
  Chip,
  Tabs,
  Avatar,
  IconButton,
  Tooltip,
} from "@material-tailwind/react";

const TABS = [
  {
    label: "All",
    value: "all",
  },
  {
    label: "Monitored",
    value: "monitored",
  },
  {
    label: "Unmonitored",
    value: "unmonitored",
  },
];

const TABLE_HEAD = ["Member", "Function", "Status", "Employed", ""];

const TABLE_ROWS = [
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg",
    name: "John Michael",
    job: "Manager",
    org: "Organization",
    online: true,
    date: "23/04/18",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg",
    name: "Alexa Liras",
    job: "Programator",
    org: "Developer",
    online: false,
    date: "23/04/18",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg",
    name: "Laurent Perrier",
    job: "Executive",
    org: "Projects",
    online: false,
    date: "19/09/17",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg",
    name: "Michael Levi",
    job: "Programator",
    org: "Developer",
    online: true,
    date: "24/12/08",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-5.jpg",
    name: "Richard Gran",
    job: "Manager",
    org: "Executive",
    online: false,
    date: "04/10/21",
  },
];

export function MembersTable() {
  return (
    <div className="w-full">
      <div className="mb-8 flex items-center justify-between gap-8">
        <div>
          <Typography type="h6">Members list</Typography>
          <Typography className="mt-1">
            See information about all members
          </Typography>
        </div>
        <div className="flex shrink-0 flex-col gap-2 sm:flex-row">
          <Button color="secondary" size="sm">
            View all
          </Button>
          <Button className="flex items-center gap-3" size="sm">
            <UserPlus strokeWidth={2} className="h-4 w-4" /> Add member
          </Button>
        </div>
      </div>
      <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
        <Tabs defaultValue="all">
          <Tabs.List className="w-full md:w-max">
            {TABS.map(({ label, value }) => (
              <Tabs.Trigger key={value} className="w-full" value={value}>
                {label}
              </Tabs.Trigger>
            ))}

            <Tabs.TriggerIndicator />
          </Tabs.List>
        </Tabs>
        <div className="w-full md:w-72">
          <Input>
            <Input.Field placeholder="Search" />
            <Input.Icon placement="end">
              <Search className="h-5 w-5" />
            </Input.Icon>
          </Input>
        </div>
      </div>

      <div className="mt-4 w-full overflow-hidden rounded-lg border border-surface">
        <table className="w-full">
          <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
            <tr>
              {TABLE_HEAD.map((head) => (
                <th key={head} className="px-2.5 py-2 text-start font-medium">
                  {head}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="group text-sm text-black dark:text-white">
            {TABLE_ROWS.map(
              ({ img, name, email, job, org, online, date }, index) => {
                return (
                  <tr
                    key={name}
                    className="border-b border-surface last:border-0"
                  >
                    <td className="p-3">
                      <div className="flex items-center gap-3">
                        <Avatar src={img} alt={name} size="sm" />
                        <div className="flex flex-col">
                          <Typography type="small">{name}</Typography>
                          <Typography type="small" className="opacity-70">
                            {email}
                          </Typography>
                        </div>
                      </div>
                    </td>
                    <td className="p-3">
                      <div className="flex flex-col">
                        <Typography type="small">{job}</Typography>
                        <Typography type="small" className=" opacity-70">
                          {org}
                        </Typography>
                      </div>
                    </td>
                    <td className="p-3">
                      <div className="w-max">
                        <Chip
                          size="sm"
                          color={online ? "success" : "secondary"}
                        >
                          <Chip.Label>
                            {online ? "Online" : "Offline"}
                          </Chip.Label>
                        </Chip>
                      </div>
                    </td>
                    <td className="p-3">
                      <Typography type="small">{date}</Typography>
                    </td>
                    <td className="p-3">
                      <Tooltip>
                        <Tooltip.Trigger
                          as={IconButton}
                          variant="ghost"
                          color="secondary"
                        >
                          <EditPencil className="h-4 w-4 text-black dark:text-white" />
                        </Tooltip.Trigger>
                        <Tooltip.Content>
                          Edit User
                          <Tooltip.Arrow />
                        </Tooltip.Content>
                      </Tooltip>
                    </td>
                  </tr>
                );
              },
            )}
          </tbody>
        </table>
      </div>
      <div className="flex items-center justify-between border-t border-surface-light py-4">
        <Typography type="small">Page 1 of 10</Typography>
        <div className="flex gap-2">
          <Button variant="outline" color="secondary" size="sm">
            Previous
          </Button>
          <Button variant="outline" color="secondary" size="sm">
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}
import { EditPencil, UserPlus, Search } from "iconoir-react";
import {
  Input,
  Typography,
  Button,
  Chip,
  Tabs,
  Avatar,
  IconButton,
  Tooltip,
} from "@material-tailwind/react";

const TABS = [
  {
    label: "All",
    value: "all",
  },
  {
    label: "Monitored",
    value: "monitored",
  },
  {
    label: "Unmonitored",
    value: "unmonitored",
  },
];

const TABLE_HEAD = ["Member", "Function", "Status", "Employed", ""];

const TABLE_ROWS = [
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg",
    name: "John Michael",
    job: "Manager",
    org: "Organization",
    online: true,
    date: "23/04/18",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg",
    name: "Alexa Liras",
    job: "Programator",
    org: "Developer",
    online: false,
    date: "23/04/18",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg",
    name: "Laurent Perrier",
    job: "Executive",
    org: "Projects",
    online: false,
    date: "19/09/17",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg",
    name: "Michael Levi",
    job: "Programator",
    org: "Developer",
    online: true,
    date: "24/12/08",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-5.jpg",
    name: "Richard Gran",
    job: "Manager",
    org: "Executive",
    online: false,
    date: "04/10/21",
  },
];

export function MembersTable() {
  return (
    <div className="w-full">
      <div className="mb-8 flex items-center justify-between gap-8">
        <div>
          <Typography type="h6">Members list</Typography>
          <Typography className="mt-1">
            See information about all members
          </Typography>
        </div>
        <div className="flex shrink-0 flex-col gap-2 sm:flex-row">
          <Button color="secondary" size="sm">
            View all
          </Button>
          <Button className="flex items-center gap-3" size="sm">
            <UserPlus strokeWidth={2} className="h-4 w-4" /> Add member
          </Button>
        </div>
      </div>
      <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
        <Tabs defaultValue="all">
          <Tabs.List className="w-full md:w-max">
            {TABS.map(({ label, value }) => (
              <Tabs.Trigger key={value} className="w-full" value={value}>
                {label}
              </Tabs.Trigger>
            ))}

            <Tabs.TriggerIndicator />
          </Tabs.List>
        </Tabs>
        <div className="w-full md:w-72">
          <Input>
            <Input.Field placeholder="Search" />
            <Input.Icon placement="end">
              <Search className="h-5 w-5" />
            </Input.Icon>
          </Input>
        </div>
      </div>

      <div className="mt-4 w-full overflow-hidden rounded-lg border border-surface">
        <table className="w-full">
          <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
            <tr>
              {TABLE_HEAD.map((head) => (
                <th key={head} className="px-2.5 py-2 text-start font-medium">
                  {head}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="group text-sm text-black dark:text-white">
            {TABLE_ROWS.map(
              ({ img, name, email, job, org, online, date }, index) => {
                return (
                  <tr
                    key={name}
                    className="border-b border-surface last:border-0"
                  >
                    <td className="p-3">
                      <div className="flex items-center gap-3">
                        <Avatar src={img} alt={name} size="sm" />
                        <div className="flex flex-col">
                          <Typography type="small">{name}</Typography>
                          <Typography type="small" className="opacity-70">
                            {email}
                          </Typography>
                        </div>
                      </div>
                    </td>
                    <td className="p-3">
                      <div className="flex flex-col">
                        <Typography type="small">{job}</Typography>
                        <Typography type="small" className=" opacity-70">
                          {org}
                        </Typography>
                      </div>
                    </td>
                    <td className="p-3">
                      <div className="w-max">
                        <Chip
                          size="sm"
                          color={online ? "success" : "secondary"}
                        >
                          <Chip.Label>
                            {online ? "Online" : "Offline"}
                          </Chip.Label>
                        </Chip>
                      </div>
                    </td>
                    <td className="p-3">
                      <Typography type="small">{date}</Typography>
                    </td>
                    <td className="p-3">
                      <Tooltip>
                        <Tooltip.Trigger
                          as={IconButton}
                          variant="ghost"
                          color="secondary"
                        >
                          <EditPencil className="h-4 w-4 text-black dark:text-white" />
                        </Tooltip.Trigger>
                        <Tooltip.Content>
                          Edit User
                          <Tooltip.Arrow />
                        </Tooltip.Content>
                      </Tooltip>
                    </td>
                  </tr>
                );
              },
            )}
          </tbody>
        </table>
      </div>
      <div className="flex items-center justify-between border-t border-surface-light py-4">
        <Typography type="small">Page 1 of 10</Typography>
        <div className="flex gap-2">
          <Button variant="outline" color="secondary" size="sm">
            Previous
          </Button>
          <Button variant="outline" color="secondary" size="sm">
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}

Sortable Table

Use this example to create a sortable table. This table is perfect to display sets of data in your website and allow users to sort the data by clicking on the table columns header.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Members list

See information about all members

Member Function Status Employed
John Michael
John Michael[email protected]
ManagerOrganization
Online
23/04/18
Alexa Liras
Alexa Liras[email protected]
ProgramatorDeveloper
Offline
23/04/18
Laurent Perrier
Laurent Perrier[email protected]
ExecutiveProjects
Offline
19/09/17
Michael Levi
Michael Levi[email protected]
ProgramatorDeveloper
Online
24/12/08
Richard Gran
Richard Gran[email protected]
ManagerExecutive
Offline
04/10/21
Page 1 of 10
import {
  EditPencil,
  UserPlus,
  Search,
  ArrowSeparateVertical,
} from "iconoir-react";
import {
  Input,
  Typography,
  Button,
  Chip,
  Tabs,
  Avatar,
  IconButton,
  Tooltip,
} from "@material-tailwind/react";

const TABS = [
  {
    label: "All",
    value: "all",
  },
  {
    label: "Monitored",
    value: "monitored",
  },
  {
    label: "Unmonitored",
    value: "unmonitored",
  },
];

const TABLE_HEAD = ["Member", "Function", "Status", "Employed", ""];

const TABLE_ROWS = [
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg",
    name: "John Michael",
    job: "Manager",
    org: "Organization",
    online: true,
    date: "23/04/18",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg",
    name: "Alexa Liras",
    job: "Programator",
    org: "Developer",
    online: false,
    date: "23/04/18",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg",
    name: "Laurent Perrier",
    job: "Executive",
    org: "Projects",
    online: false,
    date: "19/09/17",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg",
    name: "Michael Levi",
    job: "Programator",
    org: "Developer",
    online: true,
    date: "24/12/08",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-5.jpg",
    name: "Richard Gran",
    job: "Manager",
    org: "Executive",
    online: false,
    date: "04/10/21",
  },
];

export function SortableTable() {
  return (
    <div className="w-full">
      <div className="mb-8 flex items-center justify-between gap-8">
        <div>
          <Typography type="h6">Members list</Typography>
          <Typography className="mt-1">
            See information about all members
          </Typography>
        </div>
        <div className="flex shrink-0 flex-col gap-2 sm:flex-row">
          <Button color="secondary" size="sm">
            View all
          </Button>
          <Button className="flex items-center gap-3" size="sm">
            <UserPlus strokeWidth={2} className="h-4 w-4" /> Add member
          </Button>
        </div>
      </div>
      <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
        <Tabs defaultValue="all">
          <Tabs.List className="w-full md:w-max">
            {TABS.map(({ label, value }) => (
              <Tabs.Trigger key={value} className="w-full" value={value}>
                {label}
              </Tabs.Trigger>
            ))}

            <Tabs.TriggerIndicator />
          </Tabs.List>
        </Tabs>
        <div className="w-full md:w-72">
          <Input>
            <Input.Field placeholder="Search" />
            <Input.Icon placement="end">
              <Search className="h-5 w-5" />
            </Input.Icon>
          </Input>
        </div>
      </div>

      <div className="mt-4 w-full overflow-hidden rounded-lg border border-surface">
        <table className="w-full">
          <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
            <tr>
              {TABLE_HEAD.map((head, index) => (
                <th
                  key={head}
                  className="cursor-pointer px-2.5 py-2 text-start font-medium"
                >
                  <Typography
                    type="small"
                    className="flex items-center justify-between gap-2 opacity-70"
                  >
                    {head}{" "}
                    {index !== TABLE_HEAD.length - 1 && (
                      <ArrowSeparateVertical
                        strokeWidth={2}
                        className="h-4 w-4"
                      />
                    )}
                  </Typography>
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="group text-sm text-black dark:text-white">
            {TABLE_ROWS.map(
              ({ img, name, email, job, org, online, date }, index) => {
                return (
                  <tr
                    key={name}
                    className="border-b border-surface last:border-0"
                  >
                    <td className="p-3">
                      <div className="flex items-center gap-3">
                        <Avatar src={img} alt={name} size="sm" />
                        <div className="flex flex-col">
                          <Typography type="small">{name}</Typography>
                          <Typography type="small" className="opacity-70">
                            {email}
                          </Typography>
                        </div>
                      </div>
                    </td>
                    <td className="p-3">
                      <div className="flex flex-col">
                        <Typography type="small">{job}</Typography>
                        <Typography type="small" className=" opacity-70">
                          {org}
                        </Typography>
                      </div>
                    </td>
                    <td className="p-3">
                      <div className="w-max">
                        <Chip
                          size="sm"
                          color={online ? "success" : "secondary"}
                        >
                          <Chip.Label>
                            {online ? "Online" : "Offline"}
                          </Chip.Label>
                        </Chip>
                      </div>
                    </td>
                    <td className="p-3">
                      <Typography type="small">{date}</Typography>
                    </td>
                    <td className="p-3">
                      <Tooltip>
                        <Tooltip.Trigger
                          as={IconButton}
                          variant="ghost"
                          color="secondary"
                        >
                          <EditPencil className="h-4 w-4 text-black dark:text-white" />
                        </Tooltip.Trigger>
                        <Tooltip.Content>
                          Edit User
                          <Tooltip.Arrow />
                        </Tooltip.Content>
                      </Tooltip>
                    </td>
                  </tr>
                );
              },
            )}
          </tbody>
        </table>
      </div>
      <div className="flex items-center justify-between border-t border-surface-light py-4">
        <Typography type="small">Page 1 of 10</Typography>
        <div className="flex gap-2">
          <Button variant="outline" color="secondary" size="sm">
            Previous
          </Button>
          <Button variant="outline" color="secondary" size="sm">
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}
import {
  EditPencil,
  UserPlus,
  Search,
  ArrowSeparateVertical,
} from "iconoir-react";
import {
  Input,
  Typography,
  Button,
  Chip,
  Tabs,
  Avatar,
  IconButton,
  Tooltip,
} from "@material-tailwind/react";

const TABS = [
  {
    label: "All",
    value: "all",
  },
  {
    label: "Monitored",
    value: "monitored",
  },
  {
    label: "Unmonitored",
    value: "unmonitored",
  },
];

const TABLE_HEAD = ["Member", "Function", "Status", "Employed", ""];

const TABLE_ROWS = [
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg",
    name: "John Michael",
    job: "Manager",
    org: "Organization",
    online: true,
    date: "23/04/18",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg",
    name: "Alexa Liras",
    job: "Programator",
    org: "Developer",
    online: false,
    date: "23/04/18",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg",
    name: "Laurent Perrier",
    job: "Executive",
    org: "Projects",
    online: false,
    date: "19/09/17",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg",
    name: "Michael Levi",
    job: "Programator",
    org: "Developer",
    online: true,
    date: "24/12/08",
  },
  {
    img: "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-5.jpg",
    name: "Richard Gran",
    job: "Manager",
    org: "Executive",
    online: false,
    date: "04/10/21",
  },
];

export function SortableTable() {
  return (
    <div className="w-full">
      <div className="mb-8 flex items-center justify-between gap-8">
        <div>
          <Typography type="h6">Members list</Typography>
          <Typography className="mt-1">
            See information about all members
          </Typography>
        </div>
        <div className="flex shrink-0 flex-col gap-2 sm:flex-row">
          <Button color="secondary" size="sm">
            View all
          </Button>
          <Button className="flex items-center gap-3" size="sm">
            <UserPlus strokeWidth={2} className="h-4 w-4" /> Add member
          </Button>
        </div>
      </div>
      <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
        <Tabs defaultValue="all">
          <Tabs.List className="w-full md:w-max">
            {TABS.map(({ label, value }) => (
              <Tabs.Trigger key={value} className="w-full" value={value}>
                {label}
              </Tabs.Trigger>
            ))}

            <Tabs.TriggerIndicator />
          </Tabs.List>
        </Tabs>
        <div className="w-full md:w-72">
          <Input>
            <Input.Field placeholder="Search" />
            <Input.Icon placement="end">
              <Search className="h-5 w-5" />
            </Input.Icon>
          </Input>
        </div>
      </div>

      <div className="mt-4 w-full overflow-hidden rounded-lg border border-surface">
        <table className="w-full">
          <thead className="border-b border-surface bg-surface-light text-sm font-medium text-foreground dark:bg-surface-dark">
            <tr>
              {TABLE_HEAD.map((head, index) => (
                <th
                  key={head}
                  className="cursor-pointer px-2.5 py-2 text-start font-medium"
                >
                  <Typography
                    type="small"
                    className="flex items-center justify-between gap-2 opacity-70"
                  >
                    {head}{" "}
                    {index !== TABLE_HEAD.length - 1 && (
                      <ArrowSeparateVertical
                        strokeWidth={2}
                        className="h-4 w-4"
                      />
                    )}
                  </Typography>
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="group text-sm text-black dark:text-white">
            {TABLE_ROWS.map(
              ({ img, name, email, job, org, online, date }, index) => {
                return (
                  <tr
                    key={name}
                    className="border-b border-surface last:border-0"
                  >
                    <td className="p-3">
                      <div className="flex items-center gap-3">
                        <Avatar src={img} alt={name} size="sm" />
                        <div className="flex flex-col">
                          <Typography type="small">{name}</Typography>
                          <Typography type="small" className="opacity-70">
                            {email}
                          </Typography>
                        </div>
                      </div>
                    </td>
                    <td className="p-3">
                      <div className="flex flex-col">
                        <Typography type="small">{job}</Typography>
                        <Typography type="small" className=" opacity-70">
                          {org}
                        </Typography>
                      </div>
                    </td>
                    <td className="p-3">
                      <div className="w-max">
                        <Chip
                          size="sm"
                          color={online ? "success" : "secondary"}
                        >
                          <Chip.Label>
                            {online ? "Online" : "Offline"}
                          </Chip.Label>
                        </Chip>
                      </div>
                    </td>
                    <td className="p-3">
                      <Typography type="small">{date}</Typography>
                    </td>
                    <td className="p-3">
                      <Tooltip>
                        <Tooltip.Trigger
                          as={IconButton}
                          variant="ghost"
                          color="secondary"
                        >
                          <EditPencil className="h-4 w-4 text-black dark:text-white" />
                        </Tooltip.Trigger>
                        <Tooltip.Content>
                          Edit User
                          <Tooltip.Arrow />
                        </Tooltip.Content>
                      </Tooltip>
                    </td>
                  </tr>
                );
              },
            )}
          </tbody>
        </table>
      </div>
      <div className="flex items-center justify-between border-t border-surface-light py-4">
        <Typography type="small">Page 1 of 10</Typography>
        <div className="flex gap-2">
          <Button variant="outline" color="secondary" size="sm">
            Previous
          </Button>
          <Button variant="outline" color="secondary" size="sm">
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}