Skip to content

Commit cc65b03

Browse files
SutuSebastianSebastian Sutu
SutuSebastian
and
Sebastian Sutu
authored
docs(table): fix page overflow (#1145)
Co-authored-by: Sebastian Sutu <[email protected]>
1 parent 338f741 commit cc65b03

File tree

4 files changed

+729
-681
lines changed

4 files changed

+729
-681
lines changed

‎examples/table/table.hover.tsx

Lines changed: 156 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -8,56 +8,58 @@ import { Table } from 'flowbite-react';
88
99
function Component() {
1010
return (
11-
<Table hoverable>
12-
<Table.Head>
13-
<Table.HeadCell>Product name</Table.HeadCell>
14-
<Table.HeadCell>Color</Table.HeadCell>
15-
<Table.HeadCell>Category</Table.HeadCell>
16-
<Table.HeadCell>Price</Table.HeadCell>
17-
<Table.HeadCell>
18-
<span className="sr-only">Edit</span>
19-
</Table.HeadCell>
20-
</Table.Head>
21-
<Table.Body className="divide-y">
22-
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
23-
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
24-
{'Apple MacBook Pro 17"'}
25-
</Table.Cell>
26-
<Table.Cell>Sliver</Table.Cell>
27-
<Table.Cell>Laptop</Table.Cell>
28-
<Table.Cell>$2999</Table.Cell>
29-
<Table.Cell>
30-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
31-
Edit
32-
</a>
33-
</Table.Cell>
34-
</Table.Row>
35-
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
36-
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
37-
Microsoft Surface Pro
38-
</Table.Cell>
39-
<Table.Cell>White</Table.Cell>
40-
<Table.Cell>Laptop PC</Table.Cell>
41-
<Table.Cell>$1999</Table.Cell>
42-
<Table.Cell>
43-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
44-
Edit
45-
</a>
46-
</Table.Cell>
47-
</Table.Row>
48-
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
49-
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</Table.Cell>
50-
<Table.Cell>Black</Table.Cell>
51-
<Table.Cell>Accessories</Table.Cell>
52-
<Table.Cell>$99</Table.Cell>
53-
<Table.Cell>
54-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
55-
Edit
56-
</a>
57-
</Table.Cell>
58-
</Table.Row>
59-
</Table.Body>
60-
</Table>
11+
<div className="overflow-x-auto">
12+
<Table hoverable>
13+
<Table.Head>
14+
<Table.HeadCell>Product name</Table.HeadCell>
15+
<Table.HeadCell>Color</Table.HeadCell>
16+
<Table.HeadCell>Category</Table.HeadCell>
17+
<Table.HeadCell>Price</Table.HeadCell>
18+
<Table.HeadCell>
19+
<span className="sr-only">Edit</span>
20+
</Table.HeadCell>
21+
</Table.Head>
22+
<Table.Body className="divide-y">
23+
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
24+
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
25+
{'Apple MacBook Pro 17"'}
26+
</Table.Cell>
27+
<Table.Cell>Sliver</Table.Cell>
28+
<Table.Cell>Laptop</Table.Cell>
29+
<Table.Cell>$2999</Table.Cell>
30+
<Table.Cell>
31+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
32+
Edit
33+
</a>
34+
</Table.Cell>
35+
</Table.Row>
36+
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
37+
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
38+
Microsoft Surface Pro
39+
</Table.Cell>
40+
<Table.Cell>White</Table.Cell>
41+
<Table.Cell>Laptop PC</Table.Cell>
42+
<Table.Cell>$1999</Table.Cell>
43+
<Table.Cell>
44+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
45+
Edit
46+
</a>
47+
</Table.Cell>
48+
</Table.Row>
49+
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
50+
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</Table.Cell>
51+
<Table.Cell>Black</Table.Cell>
52+
<Table.Cell>Accessories</Table.Cell>
53+
<Table.Cell>$99</Table.Cell>
54+
<Table.Cell>
55+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
56+
Edit
57+
</a>
58+
</Table.Cell>
59+
</Table.Row>
60+
</Table.Body>
61+
</Table>
62+
</div>
6163
);
6264
}
6365
`;
@@ -67,112 +69,116 @@ import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from
6769
6870
function Component() {
6971
return (
70-
<Table hoverable>
71-
<TableHead>
72-
<TableHeadCell>Product name</TableHeadCell>
73-
<TableHeadCell>Color</TableHeadCell>
74-
<TableHeadCell>Category</TableHeadCell>
75-
<TableHeadCell>Price</TableHeadCell>
76-
<TableHeadCell>
77-
<span className="sr-only">Edit</span>
78-
</TableHeadCell>
79-
</TableHead>
80-
<TableBody className="divide-y">
81-
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
82-
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
83-
{'Apple MacBook Pro 17"'}
84-
</TableCell>
85-
<TableCell>Sliver</TableCell>
86-
<TableCell>Laptop</TableCell>
87-
<TableCell>$2999</TableCell>
88-
<TableCell>
89-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
90-
Edit
91-
</a>
92-
</TableCell>
93-
</TableRow>
94-
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
95-
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
96-
Microsoft Surface Pro
97-
</TableCell>
98-
<TableCell>White</TableCell>
99-
<TableCell>Laptop PC</TableCell>
100-
<TableCell>$1999</TableCell>
101-
<TableCell>
102-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
103-
Edit
104-
</a>
105-
</TableCell>
106-
</TableRow>
107-
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
108-
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
109-
<TableCell>Black</TableCell>
110-
<TableCell>Accessories</TableCell>
111-
<TableCell>$99</TableCell>
112-
<TableCell>
113-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
114-
Edit
115-
</a>
116-
</TableCell>
117-
</TableRow>
118-
</TableBody>
119-
</Table>
72+
<div className="overflow-x-auto">
73+
<Table hoverable>
74+
<TableHead>
75+
<TableHeadCell>Product name</TableHeadCell>
76+
<TableHeadCell>Color</TableHeadCell>
77+
<TableHeadCell>Category</TableHeadCell>
78+
<TableHeadCell>Price</TableHeadCell>
79+
<TableHeadCell>
80+
<span className="sr-only">Edit</span>
81+
</TableHeadCell>
82+
</TableHead>
83+
<TableBody className="divide-y">
84+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
85+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
86+
{'Apple MacBook Pro 17"'}
87+
</TableCell>
88+
<TableCell>Sliver</TableCell>
89+
<TableCell>Laptop</TableCell>
90+
<TableCell>$2999</TableCell>
91+
<TableCell>
92+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
93+
Edit
94+
</a>
95+
</TableCell>
96+
</TableRow>
97+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
98+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
99+
Microsoft Surface Pro
100+
</TableCell>
101+
<TableCell>White</TableCell>
102+
<TableCell>Laptop PC</TableCell>
103+
<TableCell>$1999</TableCell>
104+
<TableCell>
105+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
106+
Edit
107+
</a>
108+
</TableCell>
109+
</TableRow>
110+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
111+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
112+
<TableCell>Black</TableCell>
113+
<TableCell>Accessories</TableCell>
114+
<TableCell>$99</TableCell>
115+
<TableCell>
116+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
117+
Edit
118+
</a>
119+
</TableCell>
120+
</TableRow>
121+
</TableBody>
122+
</Table>
123+
</div>
120124
);
121125
}
122126
`;
123127

124128
function Component() {
125129
return (
126-
<Table hoverable>
127-
<TableHead>
128-
<TableHeadCell>Product name</TableHeadCell>
129-
<TableHeadCell>Color</TableHeadCell>
130-
<TableHeadCell>Category</TableHeadCell>
131-
<TableHeadCell>Price</TableHeadCell>
132-
<TableHeadCell>
133-
<span className="sr-only">Edit</span>
134-
</TableHeadCell>
135-
</TableHead>
136-
<TableBody className="divide-y">
137-
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
138-
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
139-
{'Apple MacBook Pro 17"'}
140-
</TableCell>
141-
<TableCell>Sliver</TableCell>
142-
<TableCell>Laptop</TableCell>
143-
<TableCell>$2999</TableCell>
144-
<TableCell>
145-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
146-
Edit
147-
</a>
148-
</TableCell>
149-
</TableRow>
150-
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
151-
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
152-
Microsoft Surface Pro
153-
</TableCell>
154-
<TableCell>White</TableCell>
155-
<TableCell>Laptop PC</TableCell>
156-
<TableCell>$1999</TableCell>
157-
<TableCell>
158-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
159-
Edit
160-
</a>
161-
</TableCell>
162-
</TableRow>
163-
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
164-
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
165-
<TableCell>Black</TableCell>
166-
<TableCell>Accessories</TableCell>
167-
<TableCell>$99</TableCell>
168-
<TableCell>
169-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
170-
Edit
171-
</a>
172-
</TableCell>
173-
</TableRow>
174-
</TableBody>
175-
</Table>
130+
<div className="overflow-x-auto">
131+
<Table hoverable>
132+
<TableHead>
133+
<TableHeadCell>Product name</TableHeadCell>
134+
<TableHeadCell>Color</TableHeadCell>
135+
<TableHeadCell>Category</TableHeadCell>
136+
<TableHeadCell>Price</TableHeadCell>
137+
<TableHeadCell>
138+
<span className="sr-only">Edit</span>
139+
</TableHeadCell>
140+
</TableHead>
141+
<TableBody className="divide-y">
142+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
143+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
144+
{'Apple MacBook Pro 17"'}
145+
</TableCell>
146+
<TableCell>Sliver</TableCell>
147+
<TableCell>Laptop</TableCell>
148+
<TableCell>$2999</TableCell>
149+
<TableCell>
150+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
151+
Edit
152+
</a>
153+
</TableCell>
154+
</TableRow>
155+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
156+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
157+
Microsoft Surface Pro
158+
</TableCell>
159+
<TableCell>White</TableCell>
160+
<TableCell>Laptop PC</TableCell>
161+
<TableCell>$1999</TableCell>
162+
<TableCell>
163+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
164+
Edit
165+
</a>
166+
</TableCell>
167+
</TableRow>
168+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
169+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
170+
<TableCell>Black</TableCell>
171+
<TableCell>Accessories</TableCell>
172+
<TableCell>$99</TableCell>
173+
<TableCell>
174+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
175+
Edit
176+
</a>
177+
</TableCell>
178+
</TableRow>
179+
</TableBody>
180+
</Table>
181+
</div>
176182
);
177183
}
178184

0 commit comments

Comments
 (0)