base
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "../utils/classname";
|
||||
|
||||
const Table = React.forwardRef(function Table(
|
||||
{ className, ...props }: React.ComponentPropsWithoutRef<"table">,
|
||||
ref: React.ForwardedRef<React.ComponentRef<"table">>
|
||||
) {
|
||||
return (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table ref={ref} className={cn("w-full caption-bottom text-13", className)} {...props} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Table.displayName = "Table";
|
||||
|
||||
const TableHeader = React.forwardRef(function TableHeader(
|
||||
{ className, ...props }: React.ComponentPropsWithoutRef<"thead">,
|
||||
ref: React.ForwardedRef<React.ComponentRef<"thead">>
|
||||
) {
|
||||
return <thead ref={ref} className={cn("border-y border-subtle bg-layer-1 py-4", className)} {...props} />;
|
||||
});
|
||||
TableHeader.displayName = "TableHeader";
|
||||
|
||||
const TableBody = React.forwardRef(function TableBody(
|
||||
{ className, ...props }: React.ComponentPropsWithoutRef<"tbody">,
|
||||
ref: React.ForwardedRef<React.ComponentRef<"tbody">>
|
||||
) {
|
||||
return <tbody ref={ref} className={cn("", className)} {...props} />;
|
||||
});
|
||||
TableBody.displayName = "TableBody";
|
||||
|
||||
const TableFooter = React.forwardRef(function TableFooter(
|
||||
{ className, ...props }: React.ComponentPropsWithoutRef<"tfoot">,
|
||||
ref: React.ForwardedRef<React.ComponentRef<"tfoot">>
|
||||
) {
|
||||
return <tfoot ref={ref} className={cn("bg-layer-1 font-medium", className)} {...props} />;
|
||||
});
|
||||
TableFooter.displayName = "TableFooter";
|
||||
|
||||
const TableRow = React.forwardRef(function TableRow(
|
||||
{ className, ...props }: React.ComponentPropsWithoutRef<"tr">,
|
||||
ref: React.ForwardedRef<React.ComponentRef<"tr">>
|
||||
) {
|
||||
return <tr ref={ref} className={cn("transition-colors data-[state=selected]:bg-surface-1", className)} {...props} />;
|
||||
});
|
||||
TableRow.displayName = "TableRow";
|
||||
|
||||
const TableHead = React.forwardRef(function TableHead(
|
||||
{ className, ...props }: React.ComponentPropsWithoutRef<"th">,
|
||||
ref: React.ForwardedRef<React.ComponentRef<"th">>
|
||||
) {
|
||||
return (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium text-tertiary [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
TableHead.displayName = "TableHead";
|
||||
|
||||
const TableCell = React.forwardRef(function TableCell(
|
||||
{ className, ...props }: React.ComponentPropsWithoutRef<"td">,
|
||||
ref: React.ForwardedRef<React.ComponentRef<"td">>
|
||||
) {
|
||||
return (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
TableCell.displayName = "TableCell";
|
||||
|
||||
const TableCaption = React.forwardRef(function TableCaption(
|
||||
{ className, ...props }: React.ComponentPropsWithoutRef<"caption">,
|
||||
ref: React.ForwardedRef<React.ComponentRef<"caption">>
|
||||
) {
|
||||
return <caption ref={ref} className={cn("mt-4 text-13 text-tertiary", className)} {...props} />;
|
||||
});
|
||||
TableCaption.displayName = "TableCaption";
|
||||
|
||||
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
export * from "./core";
|
||||
@@ -0,0 +1,382 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./core";
|
||||
|
||||
const meta = {
|
||||
title: "Components/Table",
|
||||
component: Table,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
} satisfies Meta<typeof Table>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>John Doe</TableCell>
|
||||
<TableCell>john@example.com</TableCell>
|
||||
<TableCell>Admin</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Jane Smith</TableCell>
|
||||
<TableCell>jane@example.com</TableCell>
|
||||
<TableCell>User</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Bob Wilson</TableCell>
|
||||
<TableCell>bob@example.com</TableCell>
|
||||
<TableCell>Moderator</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithCaption: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table>
|
||||
<TableCaption>A list of recent users</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Alice Johnson</TableCell>
|
||||
<TableCell>alice@example.com</TableCell>
|
||||
<TableCell>Active</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Charlie Brown</TableCell>
|
||||
<TableCell>charlie@example.com</TableCell>
|
||||
<TableCell>Inactive</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithFooter: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Product</TableHead>
|
||||
<TableHead className="text-right">Quantity</TableHead>
|
||||
<TableHead className="text-right">Price</TableHead>
|
||||
<TableHead className="text-right">Total</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Product A</TableCell>
|
||||
<TableCell className="text-right">2</TableCell>
|
||||
<TableCell className="text-right">$10.00</TableCell>
|
||||
<TableCell className="text-right">$20.00</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Product B</TableCell>
|
||||
<TableCell className="text-right">1</TableCell>
|
||||
<TableCell className="text-right">$25.00</TableCell>
|
||||
<TableCell className="text-right">$25.00</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Product C</TableCell>
|
||||
<TableCell className="text-right">3</TableCell>
|
||||
<TableCell className="text-right">$15.00</TableCell>
|
||||
<TableCell className="text-right">$45.00</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="font-semibold">
|
||||
Total
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-semibold">$90.00</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithActions: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>John Doe</TableCell>
|
||||
<TableCell>john@example.com</TableCell>
|
||||
<TableCell>Admin</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<button className="text-blue-500 mr-2 hover:underline">Edit</button>
|
||||
<button className="text-danger-primary hover:underline">Delete</button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Jane Smith</TableCell>
|
||||
<TableCell>jane@example.com</TableCell>
|
||||
<TableCell>User</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<button className="text-blue-500 mr-2 hover:underline">Edit</button>
|
||||
<button className="text-danger-primary hover:underline">Delete</button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithBadges: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Project</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Priority</TableHead>
|
||||
<TableHead>Assignee</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Website Redesign</TableCell>
|
||||
<TableCell>
|
||||
<span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">In Progress</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="bg-red-100 rounded-full px-2 py-1 text-11 text-danger-primary">High</span>
|
||||
</TableCell>
|
||||
<TableCell>John Doe</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Mobile App</TableCell>
|
||||
<TableCell>
|
||||
<span className="bg-blue-100 text-blue-800 rounded-full px-2 py-1 text-11">Planned</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="bg-yellow-100 text-yellow-800 rounded-full px-2 py-1 text-11">Medium</span>
|
||||
</TableCell>
|
||||
<TableCell>Jane Smith</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>API Integration</TableCell>
|
||||
<TableCell>
|
||||
<span className="bg-gray-100 text-gray-800 rounded-full px-2 py-1 text-11">Completed</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">Low</span>
|
||||
</TableCell>
|
||||
<TableCell>Bob Wilson</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithCheckboxes: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>
|
||||
<input type="checkbox" className="h-4 w-4" aria-label="Select all rows" />
|
||||
</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<input type="checkbox" className="h-4 w-4" aria-label="Select row for John Doe" />
|
||||
</TableCell>
|
||||
<TableCell>John Doe</TableCell>
|
||||
<TableCell>john@example.com</TableCell>
|
||||
<TableCell>Admin</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<input type="checkbox" className="h-4 w-4" aria-label="Select row for Jane Smith" />
|
||||
</TableCell>
|
||||
<TableCell>Jane Smith</TableCell>
|
||||
<TableCell>jane@example.com</TableCell>
|
||||
<TableCell>User</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<input type="checkbox" className="h-4 w-4" aria-label="Select row for Bob Wilson" />
|
||||
</TableCell>
|
||||
<TableCell>Bob Wilson</TableCell>
|
||||
<TableCell>bob@example.com</TableCell>
|
||||
<TableCell>Moderator</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const EmptyState: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="h-24 text-center">
|
||||
No results found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const LargeDataset: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Department</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 15 }, (_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell>{1000 + i}</TableCell>
|
||||
<TableCell>User {i + 1}</TableCell>
|
||||
<TableCell>user{i + 1}@example.com</TableCell>
|
||||
<TableCell>{["Engineering", "Sales", "Marketing", "Support"][i % 4]}</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className={`rounded-full px-2 py-1 text-11 ${
|
||||
i % 2 === 0 ? "bg-green-100 text-success-primary" : "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{i % 2 === 0 ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomStyling: Story = {
|
||||
render() {
|
||||
return (
|
||||
<Table className="border-blue-200 border-2">
|
||||
<TableHeader>
|
||||
<TableRow className="bg-blue-100">
|
||||
<TableHead className="text-blue-900">Name</TableHead>
|
||||
<TableHead className="text-blue-900">Email</TableHead>
|
||||
<TableHead className="text-blue-900">Role</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow className="hover:bg-blue-50">
|
||||
<TableCell className="font-semibold">John Doe</TableCell>
|
||||
<TableCell>john@example.com</TableCell>
|
||||
<TableCell>Admin</TableCell>
|
||||
</TableRow>
|
||||
<TableRow className="hover:bg-blue-50">
|
||||
<TableCell className="font-semibold">Jane Smith</TableCell>
|
||||
<TableCell>jane@example.com</TableCell>
|
||||
<TableCell>User</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const ResponsiveTable: Story = {
|
||||
render() {
|
||||
return (
|
||||
<div className="w-full max-w-4xl">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead className="hidden sm:table-cell">Email</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Department</TableHead>
|
||||
<TableHead className="hidden lg:table-cell">Location</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>John Doe</TableCell>
|
||||
<TableCell className="hidden sm:table-cell">john@example.com</TableCell>
|
||||
<TableCell className="hidden md:table-cell">Engineering</TableCell>
|
||||
<TableCell className="hidden lg:table-cell">New York</TableCell>
|
||||
<TableCell>Active</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Jane Smith</TableCell>
|
||||
<TableCell className="hidden sm:table-cell">jane@example.com</TableCell>
|
||||
<TableCell className="hidden md:table-cell">Marketing</TableCell>
|
||||
<TableCell className="hidden lg:table-cell">San Francisco</TableCell>
|
||||
<TableCell>Active</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user