Advanced Tables: Colors, Sketches & Motion
In Part 1, we covered the basics. Now, let’s unlock the full potential of our <CustomTable /> component with new styles, colors, and animations.
1. Sketchy Style
The sketchy style is rougher than hand-drawn. It features dashed lines, a box shadow, and a transparent header. Perfect for prototyping or casual notes.
| Draft | Notes | Ideas |
|---|---|---|
| V1 | Too clean | Add noise |
| V2 | Better | More color |
| V3 | Perfect | Ship it |
2. Minimal Style
Sometimes less is more. The minimal style removes vertical borders and keeps things clean, using the color prop for the header underline.
| Name | Role | Department |
|---|---|---|
| Alice | Engineer | Product |
| Bob | Designer | Marketing |
| Charlie | Manager | Sales |
3. Color Themes
We’ve added a color prop that works across all styles. Choose from red, blue, green, yellow, purple, and orange.
Red Bold Table
| Error | Code | Severity |
|---|---|---|
| Not Found | 404 | Low |
| Server Error | 500 | High |
| Unauthorized | 401 | Medium |
Green Colorful Table
| Item | Stock | Status |
|---|---|---|
| Apples | 50 | In Stock |
| Bananas | 20 | Low Stock |
| Oranges | 0 | Out of Stock |
4. New Animations
Bring your tables to life with slide-left, slide-right, and zoom-in.
Zoom In
| Winner | Score |
|---|---|
| Team A | 98 |
| Team B | 95 |
Slide Right
5. The Kitchen Sink
Combine everything for a truly unique table.
| Style | Color | Animation |
|---|---|---|
| Sketchy | Purple | Zoom In |
| Minimal | Blue | Slide Left |
| Bold | Red | Fade |
Usage
<CustomTable
headers={['A', 'B']}
rows={[['1', '2']]}
style="sketchy"
color="purple"
animation="zoom-in"
/>
