Implement the Top NFT Collections Table

[davedumto]

Description

Develop and implement the Top NFT Collections Table as per the provided Figma design. This section should display a ranked list of NFT collections with relevant statistics and allow users to filter data based on time range and blockchain type.

Requirements

Table Structure

• Display NFT collections with the following columns:
  • Collection Name & Image
  • Floor Price (in ETH)
  • Volume (in ETH)
  • Top Offer (in ETH)
  • Floor ID
  • Sales Count
  • Holders Percentage & Total Holders
• Ensure proper column alignment and spacing for readability.
• Implement row hover effects for better UI interaction.

Filtering & Sorting

• Implement time range filters (1h, 6h, 24h, 3d, 7d) to update displayed data.
• Allow users to filter by blockchain (Ethereum, etc.).
• Ensure smooth state updates and data reloading when filters are changed.

Acceptance Criteria

• The table matches the Figma design pixel-perfectly.
• The filters function properly, updating the table based on selected time range and blockchain.
• Data is displayed in a structured and readable format.
• Hover and interaction effects enhance usability.
• Code is optimized, reusable, and follows project best practices.

Additional Notes

• Consider using React Table, TanStack Table, or a custom implementation.
• Optimize for performance and prevent unnecessary re-renders.
• Ensure accessibility compliance (proper focus states, keyboard navigation, etc.).
• Test across different screen sizes and browsers for consistency.

Tasks

• Implement the NFT collections table structure
• Add filtering functionality (time range and blockchain)
• Ensure proper column spacing and data formatting
• Implement hover and interactive effects
• Optimize performance and ensure accessibility compliance
• Test across multiple devices and browsers

[Kali-Decoder]

Can I be assigned to this?

[chiscookeke11]

Could I try solving this?
ETA: 12hrs

[Elite-tch]

Can I work on this, please?
ETA 12hrs
telegram elite-tch

[Nwanne-san]

Hello, my name is Nwanne and I'd love to work on this issue!

I have experience with React, Next.js, Tailwind CSS, Shadcn and state management to create responsive and high-performance UI components.
My plan for implementing the Top NFT Collections Table includes:

Building the table structure to match the Figma design with proper alignment, spacing, and hover effects.
Integrating filtering options for time range and blockchain selection, ensuring smooth data updates.
Testing for responsiveness across multiple devices and browsers for a consistent experience