<Figure caption=' Complex table filters I built for Heron'>
  <video
    muted
    autoPlay
    loop
    className='w-full h-auto aspect-[320/107] border border-sage-3 rounded-lg bg-white'
  >
    <source src='/heron-filters.mp4' type='video/mp4' />
    Your browser does not support the video tag.
  </video>
</Figure>

Heron was a project where I got to sweat the design details and had the time to do so. This was a data-heavy application so I spent much of my focus regarding the UI/UX on interactive charts and tables.

Above, you're looking at one of the ways that I dug into displaying complex data in this case what could be hundreds of employees. This is built on-top of the filters API from `react-table`. Unseen from this video, I also built out customization for column visibility and the ability to save custom filter combinations as views.

<Figure caption='A screenshot of an interactive pie chart, built for Heron'>
  <Image
    src="https://us-east-1-shared-usea1-02.graphassets.com/AGa9dLftvRaiWblNZuxI6z/gGcS9j7QmmoFZlF5ZzIQ"
    alt='A screenshot of an interactive pie chart, built for Heron'
    fill
    aspectRatio="40/27"
    placeholder="blur"
    blurDataURL="data:image/webp;base64,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"
  />
</Figure>

Heron MVP