I have this component https://ui.shadcn.com/docs/components/data-table
but I need it to be a data table with two columns of cards, each card should have an image & right under it a title & some other metadata. these cards will be of items, like shoes, watches, trading card, & clothes. it should have filtering & sorting implemented. The main data table should also have a number of the total items in the top above the search bar as well as the total value of the items in the table. above this there should also be a title for the data table along with 2 small icons to the right of it - one to share the collection, & another for settings of the collection
I'll create a custom data table with cards arranged in a grid layout using shadcn/ui components and TanStack Table 1. This implementation will include all the features you requested: filtering, sorting, item count, total value display, and action icons.
Let's build this step by step:
How It Works
This implementation creates a card-based data table with all the features you requested 12:
- Grid Layout: The cards are arranged in a responsive grid layout (1 column on mobile, 2 columns on medium screens, 3-4 columns on larger screens).
Card Design: Each card includes:
- An image at the top
- Item name as the title
- Category badge
- Price
- Condition and date added as metadata
Collection Header:
- Title "My Collection"
- Share and Settings icons on the right
Statistics and Filtering:
- Shows total number of items in the collection
- Displays total value of all items (or filtered items)
- Search input to filter by name
- Filter dropdown to enable category and condition filtering
Sorting and Pagination:
- The data can be sorted by various fields
- Pagination controls at the bottom
The implementation uses TanStack Table for the data management (filtering, sorting, pagination) but renders the data as cards instead of a traditional table layout.
Customization Options
You can easily customize this implementation:
- Add more filters: Add more dropdown options for additional filtering criteria
- Change the card layout: Modify the ItemCard component to show different metadata
- Add card actions: Add buttons or dropdown menus to each card for actions like edit, delete, etc.
- Adjust the grid layout: Change the number of columns at different breakpoints
Let me know if you'd like any specific modifications to this implementation!
ok this is perfect, but I want to take this same component, and make it a react native component using tamagui and moti. I want to use this component from tamagui https://tamagui.dev/ui/card and I want you to use any other component available from tamagui that will help you implement this with the filtering and everything else in the first component we created. also use moti for styling to make it look clean & modern just like the first component we created
React Native Collection Data Table with Tamagui and Moti
I'll convert our web component to a React Native version using Tamagui for UI components and Moti for animations. This implementation will maintain all the functionality of the web version while adapting it for mobile.
Key Features of the React Native Implementation
I've converted our web-based collection data table to a React Native version using Tamagui and Moti, maintaining all the functionality while optimizing for mobile:
Tamagui Components Used
- Card: Used for item cards with proper elevation and borders
- Button: For actions, filters, and pagination
- Input: For the search functionality
- XStack/YStack: For layout (horizontal and vertical stacks)
- Sheet: For the filter modal that slides up from the bottom
- Text/H2/Paragraph: For typography
- Badge: For category labels
Moti Animations
- MotiView: For animated card entries with staggered animations
- MotiPressable: For interactive press animations on cards
- AnimatePresence: For smooth transitions when items are filtered or sorted
Mobile-Optimized Features
- Bottom Sheet for Filters: Instead of dropdown menus, filters are in a bottom sheet that slides up
- Horizontal Scrolling Filter Options: Category and condition filters scroll horizontally
- Two-Column Grid: Optimized for mobile screen width
- Press Feedback: Cards have subtle scale animations when pressed
- Staggered Animations: Cards animate in sequence for a polished feel
Maintained Functionality
- Search: Filter items by name
- Category/Condition Filters: Filter by specific categories or conditions
- Sorting: Sort by name, price, or date added
- Pagination: Navigate through pages of items
- Statistics: Display total items and total value
- Header Actions: Share and settings buttons
This implementation provides a native mobile experience while maintaining all the functionality of the web version. The use of Moti for animations gives it a modern, polished feel with smooth transitions and interactive elements.
The component is also fully responsive and will adapt to different screen sizes, with the grid automatically adjusting based on the device width.