Skip to content

Latest commit

 

History

History
80 lines (59 loc) · 3.03 KB

README.md

File metadata and controls

80 lines (59 loc) · 3.03 KB

Supabase + TanStack Table Demo

"Buy Me A Coffee"

This project demonstrates how to fetch and filter data from Supabase on the server side and display it in a TanStack Table with shadcn/ui responsively.

Motivation

During one of my own projects, I encountered the challenge of efficiently displaying data from my Supabase PostgreSQL table in a table format. This includes implementing lazy loading, where only a subset of data based on the current page is loaded, as well as calculating the total size of the table. Additionally, I wanted to build a basic filtering system.

In this project, I share my approach using TanStack Table and shadcn. I have slightly extended the components from shadcn's data table example into @/components/ui/basic-data-table. The Supabase query, along with filtering logic, is implemented in @/components/actions.ts.

Features

  • Supabase Integration: Fetch and manage data efficiently with server-side rendering (SSR).
  • Data Visualization: Use TanStack Table for flexible and dynamic data display with filtering capabilities.
  • Modern UI: Styled with shadcn/ui and TailwindCSS for a clean and modern interface.

Prerequisites

  • Node.js installed
  • A Supabase project (Anon Key and Project URL)

Setup Instructions

  1. Clone the repository:

    git clone https://github.com/thisisfel1x/supabase-shadcn-database-example.git
cd supabase-shadcn-database-example

  2. Install dependencies:

    npm install

  3. Configure Supabase:

    • Add your Anon Key and Project URL to a .env.local file: 
      NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_PUBLIC_SUPABASE_URL=your-project-url

  4. Ensure you have set up Row-Level Security (RLS) policies in your Supabase database.

  5. Define your database schema which should look like in types/index.ts:

    export interface DatabaseSchema {
    name: string;
    company: string;
    age: number;
    date: Date;
}

    This is only a demonstrative example. The data was created with FakerJS

  6. Start the development server:

    npm run dev

Technologies Used

Support

If you enjoy this project and want to support its development, consider buying me a coffee right here. Your support not only helps me but also contributes to the further improvement of this project. Thank you! :D

License

This project is licensed under the MIT License. Feel free to use and modify it as you like.