Skip to content

Commit

Permalink
docs(table): fix page overflow (#1145)
Browse files Browse the repository at this point in the history 
Co-authored-by: Sebastian Sutu <[email protected]>
  • Loading branch information
@SutuSebastian
SutuSebastian and Sebastian Sutu authored Nov 23, 2023
1 parent 338f741 commit cc65b03
Show file tree
Hide file tree
Showing 4 changed files with 729 additions and 681 deletions.
306 changes: 156 additions & 150 deletions examples/table/table.hover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,56 +8,58 @@ import { Table } from 'flowbite-react';
function Component() {
return (
<Table hoverable>
<Table.Head>
<Table.HeadCell>Product name</Table.HeadCell>
<Table.HeadCell>Color</Table.HeadCell>
<Table.HeadCell>Category</Table.HeadCell>
<Table.HeadCell>Price</Table.HeadCell>
<Table.HeadCell>
<span className="sr-only">Edit</span>
</Table.HeadCell>
</Table.Head>
<Table.Body className="divide-y">
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
{'Apple MacBook Pro 17"'}
</Table.Cell>
<Table.Cell>Sliver</Table.Cell>
<Table.Cell>Laptop</Table.Cell>
<Table.Cell>$2999</Table.Cell>
<Table.Cell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</Table.Cell>
</Table.Row>
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
Microsoft Surface Pro
</Table.Cell>
<Table.Cell>White</Table.Cell>
<Table.Cell>Laptop PC</Table.Cell>
<Table.Cell>$1999</Table.Cell>
<Table.Cell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</Table.Cell>
</Table.Row>
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</Table.Cell>
<Table.Cell>Black</Table.Cell>
<Table.Cell>Accessories</Table.Cell>
<Table.Cell>$99</Table.Cell>
<Table.Cell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<div className="overflow-x-auto">
<Table hoverable>
<Table.Head>
<Table.HeadCell>Product name</Table.HeadCell>
<Table.HeadCell>Color</Table.HeadCell>
<Table.HeadCell>Category</Table.HeadCell>
<Table.HeadCell>Price</Table.HeadCell>
<Table.HeadCell>
<span className="sr-only">Edit</span>
</Table.HeadCell>
</Table.Head>
<Table.Body className="divide-y">
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
{'Apple MacBook Pro 17"'}
</Table.Cell>
<Table.Cell>Sliver</Table.Cell>
<Table.Cell>Laptop</Table.Cell>
<Table.Cell>$2999</Table.Cell>
<Table.Cell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</Table.Cell>
</Table.Row>
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
Microsoft Surface Pro
</Table.Cell>
<Table.Cell>White</Table.Cell>
<Table.Cell>Laptop PC</Table.Cell>
<Table.Cell>$1999</Table.Cell>
<Table.Cell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</Table.Cell>
</Table.Row>
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</Table.Cell>
<Table.Cell>Black</Table.Cell>
<Table.Cell>Accessories</Table.Cell>
<Table.Cell>$99</Table.Cell>
<Table.Cell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</div>
);
}
`;
Expand All @@ -67,112 +69,116 @@ import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from
function Component() {
return (
<Table hoverable>
<TableHead>
<TableHeadCell>Product name</TableHeadCell>
<TableHeadCell>Color</TableHeadCell>
<TableHeadCell>Category</TableHeadCell>
<TableHeadCell>Price</TableHeadCell>
<TableHeadCell>
<span className="sr-only">Edit</span>
</TableHeadCell>
</TableHead>
<TableBody className="divide-y">
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
{'Apple MacBook Pro 17"'}
</TableCell>
<TableCell>Sliver</TableCell>
<TableCell>Laptop</TableCell>
<TableCell>$2999</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
Microsoft Surface Pro
</TableCell>
<TableCell>White</TableCell>
<TableCell>Laptop PC</TableCell>
<TableCell>$1999</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
<TableCell>Black</TableCell>
<TableCell>Accessories</TableCell>
<TableCell>$99</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
</TableBody>
</Table>
<div className="overflow-x-auto">
<Table hoverable>
<TableHead>
<TableHeadCell>Product name</TableHeadCell>
<TableHeadCell>Color</TableHeadCell>
<TableHeadCell>Category</TableHeadCell>
<TableHeadCell>Price</TableHeadCell>
<TableHeadCell>
<span className="sr-only">Edit</span>
</TableHeadCell>
</TableHead>
<TableBody className="divide-y">
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
{'Apple MacBook Pro 17"'}
</TableCell>
<TableCell>Sliver</TableCell>
<TableCell>Laptop</TableCell>
<TableCell>$2999</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
Microsoft Surface Pro
</TableCell>
<TableCell>White</TableCell>
<TableCell>Laptop PC</TableCell>
<TableCell>$1999</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
<TableCell>Black</TableCell>
<TableCell>Accessories</TableCell>
<TableCell>$99</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
);
}
`;

function Component() {
return (
<Table hoverable>
<TableHead>
<TableHeadCell>Product name</TableHeadCell>
<TableHeadCell>Color</TableHeadCell>
<TableHeadCell>Category</TableHeadCell>
<TableHeadCell>Price</TableHeadCell>
<TableHeadCell>
<span className="sr-only">Edit</span>
</TableHeadCell>
</TableHead>
<TableBody className="divide-y">
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
{'Apple MacBook Pro 17"'}
</TableCell>
<TableCell>Sliver</TableCell>
<TableCell>Laptop</TableCell>
<TableCell>$2999</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
Microsoft Surface Pro
</TableCell>
<TableCell>White</TableCell>
<TableCell>Laptop PC</TableCell>
<TableCell>$1999</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
<TableCell>Black</TableCell>
<TableCell>Accessories</TableCell>
<TableCell>$99</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
</TableBody>
</Table>
<div className="overflow-x-auto">
<Table hoverable>
<TableHead>
<TableHeadCell>Product name</TableHeadCell>
<TableHeadCell>Color</TableHeadCell>
<TableHeadCell>Category</TableHeadCell>
<TableHeadCell>Price</TableHeadCell>
<TableHeadCell>
<span className="sr-only">Edit</span>
</TableHeadCell>
</TableHead>
<TableBody className="divide-y">
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
{'Apple MacBook Pro 17"'}
</TableCell>
<TableCell>Sliver</TableCell>
<TableCell>Laptop</TableCell>
<TableCell>$2999</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
Microsoft Surface Pro
</TableCell>
<TableCell>White</TableCell>
<TableCell>Laptop PC</TableCell>
<TableCell>$1999</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
<TableCell>Black</TableCell>
<TableCell>Accessories</TableCell>
<TableCell>$99</TableCell>
<TableCell>
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
Edit
</a>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
);
}

Expand Down
Loading

0 comments on commit cc65b03

Please sign in to comment.