Note: If images aren't known, the initials come from the alt image. Alternatively, you can just call them without images and define the letters inside the avatar component. You can also put icons inside the avatars by this method.
Note: This is the same thing as ShadCN's separator component. Inlcudes horizontal and vertical orientations
Note: Icons are in the library '@mui/icons-material'. The svgicon component lets you use non-mui components inside mui components.
Material UI
Font Awesome with SVG Component
Note: This is actually not a tanstack table. It is very nice looking. Sorting requires programmed logic (is not included in the library) and also requires you to define your header cells. There is also a sticky header prop that makes the header stick while you scroll through the table data. There is also an iption for built-in table pagination and virtualization.
| Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) |
|---|---|---|---|---|
| Frozen yoghurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 |
| Eclair | 262 | 16 | 24 | 6 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |
| Gingerbread | 356 | 16 | 49 | 3.9 |
