Trove

An expandable table component for React.

pnpm dlx shadcn@latest add http://trove.pragyan.fyi/r/trove.json

Team Directory

This is a sample team directory using Trove. Search and filter team members. Expand rows for detailed profiles.

NameEmailRole
Alice Johnson
alice.johnson@example.comDeveloper
AJ

Alice Johnson

Developer

Full-stack developer with a passion for building scalable web apps and mentoring junior devs.

alice.johnson@example.com
New York, USA
Joined 2021-03-15

Skills & Expertise

ReactTypeScriptNode.jsGraphQL
Bob Smith
bob.smith@example.comDesigner
BS

Bob Smith

Designer

Creative UX/UI designer who loves crafting clean and intuitive user experiences.

bob.smith@example.com
London, UK
Joined 2020-06-20

Skills & Expertise

FigmaSketchAdobe XDIllustrator
Charlie Williams
charlie.williams@example.comManager
CW

Charlie Williams

Manager

Team leader focused on agile project management and delivering high-quality software on time.

charlie.williams@example.com
Toronto, Canada
Joined 2019-11-05

Skills & Expertise

AgileScrumLeadershipJira
Diana Carter
diana.carter@example.comDeveloper
DC

Diana Carter

Developer

Frontend developer specializing in modern JavaScript frameworks and responsive design.

diana.carter@example.com
Berlin, Germany
Joined 2022-01-10

Skills & Expertise

Vue.jsReactCSS3Tailwind CSS
Ethan Brown
ethan.brown@example.comDeveloper
EB

Ethan Brown

Developer

Backend engineer with expertise in distributed systems and API architecture.

ethan.brown@example.com
Sydney, Australia
Joined 2018-08-22

Skills & Expertise

GoPostgreSQLRedisAWS
Fiona Davis
fiona.davis@example.comDesigner
FD

Fiona Davis

Designer

Product designer blending creativity with research-driven decision making.

fiona.davis@example.com
Amsterdam, Netherlands
Joined 2021-09-17

Skills & Expertise

WireframingPrototypingUser ResearchDesign Systems
George Thompson
george.thompson@example.comDeveloper
GT

George Thompson

Developer

Mobile developer passionate about creating high-performance cross-platform apps.

george.thompson@example.com
San Francisco, USA
Joined 2020-12-01

Skills & Expertise

React NativeFlutterSwiftKotlin
Hannah Lee
hannah.lee@example.comManager
HL

Hannah Lee

Manager

Operations manager ensuring smooth collaboration and effective communication between teams.

hannah.lee@example.com
Singapore
Joined 2019-04-13

Skills & Expertise

Team ManagementCommunicationBudgetingOperations
Isaac Miller
isaac.miller@example.comDeveloper
IM

Isaac Miller

Developer

DevOps engineer bridging the gap between development and operations.

isaac.miller@example.com
Austin, USA
Joined 2021-11-08

Skills & Expertise

DockerKubernetesCI/CDTerraform
Jasmine Patel
jasmine.patel@example.comDesigner
JP

Jasmine Patel

Designer

Visual designer with a knack for creating compelling brand identities.

jasmine.patel@example.com
Mumbai, India
Joined 2018-02-25

Skills & Expertise

BrandingTypographyColor TheoryIllustrator

Simple to Use

Get started with just a few lines of code

<Trove
  table={table}
  getRowId={(row) => row.id}
  renderExpanded={(row) => (
    <TroveContent>
      <p>Expanded content for {row.original.name}</p>
    </TroveContent>
  )}
  clickableRows
>
  <TroveHeader>
    <TroveTitle>My Data Table</TroveTitle>
    <TroveActions>
      <TroveExpandAllButton />
      <TroveCollapseAllButton />
    </TroveActions>
  </TroveHeader>
</Trove>