Use our Tailwind CSS table example 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.
Examples on this page are using @heroicons/react make sure you have installed it.
npm i @heroicons/reactimport { 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 DefaultTable() {
return (
<Card className="h-full w-full overflow-scroll">
<table className="w-full min-w-max table-auto text-left">
<thead>
<tr>
{TABLE_HEAD.map((head) => (
<th
key={head}
className="border-b border-blue-gray-100 bg-blue-gray-50 p-4"
>
<Typography
variant="small"
color="blue-gray"
className="font-normal leading-none opacity-70"
>
{head}
</Typography>
</th>
))}
</tr>
</thead>
<tbody>
{TABLE_ROWS.map(({ name, job, date }, index) => {
const isLast = index === TABLE_ROWS.length - 1;
const classes = isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
return (
<tr key={name}>
<td className={classes}>
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{name}
</Typography>
</td>
<td className={classes}>
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{job}
</Typography>
</td>
<td className={classes}>
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{date}
</Typography>
</td>
<td className={classes}>
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-medium"
>
Edit
</Typography>
</td>
</tr>
);
})}
</tbody>
</table>
</Card>
);
}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 TableWithStripedRows() {
return (
<Card className="h-full w-full overflow-scroll">
<table className="w-full min-w-max table-auto text-left">
<thead>
<tr>
{TABLE_HEAD.map((head) => (
<th key={head} className="border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<Typography
variant="small"
color="blue-gray"
className="font-normal leading-none opacity-70"
>
{head}
</Typography>
</th>
))}
</tr>
</thead>
<tbody>
{TABLE_ROWS.map(({ name, job, date }, index) => (
<tr key={name} className="even:bg-blue-gray-50/50">
<td className="p-4">
<Typography variant="small" color="blue-gray" className="font-normal">
{name}
</Typography>
</td>
<td className="p-4">
<Typography variant="small" color="blue-gray" className="font-normal">
{job}
</Typography>
</td>
<td className="p-4">
<Typography variant="small" color="blue-gray" className="font-normal">
{date}
</Typography>
</td>
<td className="p-4">
<Typography as="a" href="#" variant="small" color="blue-gray" className="font-medium">
Edit
</Typography>
</td>
</tr>
))}
</tbody>
</table>
</Card>
);
}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 TableWithStripedColumns() {
return (
<Card className="h-full w-full overflow-scroll">
<table className="w-full min-w-max table-auto text-left">
<thead>
<tr>
{TABLE_HEAD.map((head) => (
<th key={head} className="border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<Typography
variant="small"
color="blue-gray"
className="font-normal leading-none opacity-70"
>
{head}
</Typography>
</th>
))}
</tr>
</thead>
<tbody>
{TABLE_ROWS.map(({ name, job, date }, index) => {
const isLast = index === TABLE_ROWS.length - 1;
const classes = isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
return (
<tr key={name}>
<td className={classes}>
<Typography variant="small" color="blue-gray" className="font-normal">
{name}
</Typography>
</td>
<td className={`${classes} bg-blue-gray-50/50`}>
<Typography variant="small" color="blue-gray" className="font-normal">
{job}
</Typography>
</td>
<td className={classes}>
<Typography variant="small" color="blue-gray" className="font-normal">
{date}
</Typography>
</td>
<td className={`${classes} bg-blue-gray-50/50`}>
<Typography as="a" href="#" variant="small" color="blue-gray" className="font-medium">
Edit
</Typography>
</td>
</tr>
);
})}
</tbody>
</table>
</Card>
);
}Recent Transactions
These are details about the last transactions
Transaction | Amount | Date | Status | Account | |
|---|---|---|---|---|---|
 Spotify | $2,500 | Wed 3:00pm | paid |  visa 1234 06/2026 | |
 Amazon | $5,000 | Wed 1:00pm | paid |  master card 1234 06/2026 | |
 | $3,400 | Mon 7:40pm | pending | master card 1234 06/2026 | |
 | $1,000 | Wed 5:00pm | paid | visa 1234 06/2026 | |
 netflix | $14,000 | Wed 3:30am | cancelled | visa 1234 06/2026 |
import { PencilIcon } from "@heroicons/react/24/solid";
import {
ArrowDownTrayIcon,
MagnifyingGlassIcon,
} from "@heroicons/react/24/outline";
import {
Card,
CardHeader,
Typography,
Button,
CardBody,
Chip,
CardFooter,
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 (
<Card className="h-full w-full">
<CardHeader floated={false} shadow={false} className="rounded-none">
<div className="mb-4 flex flex-col justify-between gap-8 md:flex-row md:items-center">
<div>
<Typography variant="h5" color="blue-gray">
Recent Transactions
</Typography>
<Typography color="gray" className="mt-1 font-normal">
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
label="Search"
icon={<MagnifyingGlassIcon className="h-5 w-5" />}
/>
</div>
<Button className="flex items-center gap-3" size="sm">
<ArrowDownTrayIcon strokeWidth={2} className="h-4 w-4" /> Download
</Button>
</div>
</div>
</CardHeader>
<CardBody className="overflow-scroll px-0">
<table className="w-full min-w-max table-auto text-left">
<thead>
<tr>
{TABLE_HEAD.map((head) => (
<th
key={head}
className="border-y border-blue-gray-100 bg-blue-gray-50/50 p-4"
>
<Typography
variant="small"
color="blue-gray"
className="font-normal leading-none opacity-70"
>
{head}
</Typography>
</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-blue-gray-50";
return (
<tr key={name}>
<td className={classes}>
<div className="flex items-center gap-3">
<Avatar
src={img}
alt={name}
size="md"
className="border border-blue-gray-50 bg-blue-gray-50/50 object-contain p-1"
/>
<Typography
variant="small"
color="blue-gray"
className="font-bold"
>
{name}
</Typography>
</div>
</td>
<td className={classes}>
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{amount}
</Typography>
</td>
<td className={classes}>
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{date}
</Typography>
</td>
<td className={classes}>
<div className="w-max">
<Chip
size="sm"
variant="ghost"
value={status}
color={
status === "paid"
? "green"
: status === "pending"
? "amber"
: "red"
}
/>
</div>
</td>
<td className={classes}>
<div className="flex items-center gap-3">
<div className="h-9 w-12 rounded-md border border-blue-gray-50 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}
variant="square"
className="h-full w-full object-contain p-1"
/>
</div>
<div className="flex flex-col">
<Typography
variant="small"
color="blue-gray"
className="font-normal capitalize"
>
{account.split("-").join(" ")} {accountNumber}
</Typography>
<Typography
variant="small"
color="blue-gray"
className="font-normal opacity-70"
>
{expiry}
</Typography>
</div>
</div>
</td>
<td className={classes}>
<Tooltip content="Edit User">
<IconButton variant="text">
<PencilIcon className="h-4 w-4" />
</IconButton>
</Tooltip>
</td>
</tr>
);
},
)}
</tbody>
</table>
</CardBody>
<CardFooter className="flex items-center justify-between border-t border-blue-gray-50 p-4">
<Button variant="outlined" size="sm">
Previous
</Button>
<div className="flex items-center gap-2">
<IconButton variant="outlined" size="sm">
1
</IconButton>
<IconButton variant="text" size="sm">
2
</IconButton>
<IconButton variant="text" size="sm">
3
</IconButton>
<IconButton variant="text" size="sm">
...
</IconButton>
<IconButton variant="text" size="sm">
8
</IconButton>
<IconButton variant="text" size="sm">
9
</IconButton>
<IconButton variant="text" size="sm">
10
</IconButton>
</div>
<Button variant="outlined" size="sm">
Next
</Button>
</CardFooter>
</Card>
);
}Members list
See information about all members
Member | Function | Status | Employed | |
|---|---|---|---|---|
 John Michael | Manager Organization | online | 23/04/18 | |
 Alexa Liras | Programator Developer | offline | 23/04/18 | |
 Laurent Perrier | Executive Projects | offline | 19/09/17 | |
 Michael Levi | Programator Developer | online | 24/12/08 | |
 Richard Gran | Manager Executive | offline | 04/10/21 |
Page 1 of 10
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { PencilIcon, UserPlusIcon } from "@heroicons/react/24/solid";
import {
Card,
CardHeader,
Input,
Typography,
Button,
CardBody,
Chip,
CardFooter,
Tabs,
TabsHeader,
Tab,
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",
email: "[email protected]",
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",
email: "[email protected]",
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",
email: "[email protected]",
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",
email: "[email protected]",
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",
email: "[email protected]",
job: "Manager",
org: "Executive",
online: false,
date: "04/10/21",
},
];
export function MembersTable() {
return (
<Card className="h-full w-full">
<CardHeader floated={false} shadow={false} className="rounded-none">
<div className="mb-8 flex items-center justify-between gap-8">
<div>
<Typography variant="h5" color="blue-gray">
Members list
</Typography>
<Typography color="gray" className="mt-1 font-normal">
See information about all members
</Typography>
</div>
<div className="flex shrink-0 flex-col gap-2 sm:flex-row">
<Button variant="outlined" size="sm">
view all
</Button>
<Button className="flex items-center gap-3" size="sm">
<UserPlusIcon 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 value="all" className="w-full md:w-max">
<TabsHeader>
{TABS.map(({ label, value }) => (
<Tab key={value} value={value}>
{label}
</Tab>
))}
</TabsHeader>
</Tabs>
<div className="w-full md:w-72">
<Input
label="Search"
icon={<MagnifyingGlassIcon className="h-5 w-5" />}
/>
</div>
</div>
</CardHeader>
<CardBody className="overflow-scroll px-0">
<table className="mt-4 w-full min-w-max table-auto text-left">
<thead>
<tr>
{TABLE_HEAD.map((head) => (
<th
key={head}
className="border-y border-blue-gray-100 bg-blue-gray-50/50 p-4"
>
<Typography
variant="small"
color="blue-gray"
className="font-normal leading-none opacity-70"
>
{head}
</Typography>
</th>
))}
</tr>
</thead>
<tbody>
{TABLE_ROWS.map(
({ img, name, email, job, org, online, date }, index) => {
const isLast = index === TABLE_ROWS.length - 1;
const classes = isLast
? "p-4"
: "p-4 border-b border-blue-gray-50";
return (
<tr key={name}>
<td className={classes}>
<div className="flex items-center gap-3">
<Avatar src={img} alt={name} size="sm" />
<div className="flex flex-col">
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{name}
</Typography>
<Typography
variant="small"
color="blue-gray"
className="font-normal opacity-70"
>
{email}
</Typography>
</div>
</div>
</td>
<td className={classes}>
<div className="flex flex-col">
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{job}
</Typography>
<Typography
variant="small"
color="blue-gray"
className="font-normal opacity-70"
>
{org}
</Typography>
</div>
</td>
<td className={classes}>
<div className="w-max">
<Chip
variant="ghost"
size="sm"
value={online ? "online" : "offline"}
color={online ? "green" : "blue-gray"}
/>
</div>
</td>
<td className={classes}>
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{date}
</Typography>
</td>
<td className={classes}>
<Tooltip content="Edit User">
<IconButton variant="text">
<PencilIcon className="h-4 w-4" />
</IconButton>
</Tooltip>
</td>
</tr>
);
},
)}
</tbody>
</table>
</CardBody>
<CardFooter className="flex items-center justify-between border-t border-blue-gray-50 p-4">
<Typography variant="small" color="blue-gray" className="font-normal">
Page 1 of 10
</Typography>
<div className="flex gap-2">
<Button variant="outlined" size="sm">
Previous
</Button>
<Button variant="outlined" size="sm">
Next
</Button>
</div>
</CardFooter>
</Card>
);
}Members list
See information about all members
Member | Function | Status | Employed |
|
|---|---|---|---|---|
John Michael | Manager Organization | online | 23/04/18 | |
Alexa Liras | Programator Developer | offline | 23/04/18 | |
Laurent Perrier | Executive Projects | offline | 19/09/17 | |
Michael Levi | Programator Developer | online | 24/12/08 | |
Richard Gran | Manager Executive | offline | 04/10/21 |
Page 1 of 10
import {
MagnifyingGlassIcon,
ChevronUpDownIcon,
} from "@heroicons/react/24/outline";
import { PencilIcon, UserPlusIcon } from "@heroicons/react/24/solid";
import {
Card,
CardHeader,
Input,
Typography,
Button,
CardBody,
Chip,
CardFooter,
Tabs,
TabsHeader,
Tab,
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",
email: "[email protected]",
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",
email: "[email protected]",
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",
email: "[email protected]",
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",
email: "[email protected]",
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",
email: "[email protected]",
job: "Manager",
org: "Executive",
online: false,
date: "04/10/21",
},
];
export function SortableTable() {
return (
<Card className="h-full w-full">
<CardHeader floated={false} shadow={false} className="rounded-none">
<div className="mb-8 flex items-center justify-between gap-8">
<div>
<Typography variant="h5" color="blue-gray">
Members list
</Typography>
<Typography color="gray" className="mt-1 font-normal">
See information about all members
</Typography>
</div>
<div className="flex shrink-0 flex-col gap-2 sm:flex-row">
<Button variant="outlined" size="sm">
view all
</Button>
<Button className="flex items-center gap-3" size="sm">
<UserPlusIcon 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 value="all" className="w-full md:w-max">
<TabsHeader>
{TABS.map(({ label, value }) => (
<Tab key={value} value={value}>
{label}
</Tab>
))}
</TabsHeader>
</Tabs>
<div className="w-full md:w-72">
<Input
label="Search"
icon={<MagnifyingGlassIcon className="h-5 w-5" />}
/>
</div>
</div>
</CardHeader>
<CardBody className="overflow-scroll px-0">
<table className="mt-4 w-full min-w-max table-auto text-left">
<thead>
<tr>
{TABLE_HEAD.map((head, index) => (
<th
key={head}
className="cursor-pointer border-y border-blue-gray-100 bg-blue-gray-50/50 p-4 transition-colors hover:bg-blue-gray-50"
>
<Typography
variant="small"
color="blue-gray"
className="flex items-center justify-between gap-2 font-normal leading-none opacity-70"
>
{head}{" "}
{index !== TABLE_HEAD.length - 1 && (
<ChevronUpDownIcon strokeWidth={2} className="h-4 w-4" />
)}
</Typography>
</th>
))}
</tr>
</thead>
<tbody>
{TABLE_ROWS.map(
({ img, name, email, job, org, online, date }, index) => {
const isLast = index === TABLE_ROWS.length - 1;
const classes = isLast
? "p-4"
: "p-4 border-b border-blue-gray-50";
return (
<tr key={name}>
<td className={classes}>
<div className="flex items-center gap-3">
<Avatar src={img} alt={name} size="sm" />
<div className="flex flex-col">
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{name}
</Typography>
<Typography
variant="small"
color="blue-gray"
className="font-normal opacity-70"
>
{email}
</Typography>
</div>
</div>
</td>
<td className={classes}>
<div className="flex flex-col">
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{job}
</Typography>
<Typography
variant="small"
color="blue-gray"
className="font-normal opacity-70"
>
{org}
</Typography>
</div>
</td>
<td className={classes}>
<div className="w-max">
<Chip
variant="ghost"
size="sm"
value={online ? "online" : "offline"}
color={online ? "green" : "blue-gray"}
/>
</div>
</td>
<td className={classes}>
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{date}
</Typography>
</td>
<td className={classes}>
<Tooltip content="Edit User">
<IconButton variant="text">
<PencilIcon className="h-4 w-4" />
</IconButton>
</Tooltip>
</td>
</tr>
);
},
)}
</tbody>
</table>
</CardBody>
<CardFooter className="flex items-center justify-between border-t border-blue-gray-50 p-4">
<Typography variant="small" color="blue-gray" className="font-normal">
Page 1 of 10
</Typography>
<div className="flex gap-2">
<Button variant="outlined" size="sm">
Previous
</Button>
<Button variant="outlined" size="sm">
Next
</Button>
</div>
</CardFooter>
</Card>
);
}