/grid

A react component to display your Postgresql table data. Used in Supabase Dashboard app.

Primary LanguageTypeScriptMIT LicenseMIT

Supabase Grid

A react component to display your Postgresql table data.

Usage

<SupabaseGrid
  table="countries"
  clientProps={{
    supabaseUrl: '',
    supabaseKey: '',
  }}
/>

table variable can be:

  • SupaTable object
  • Table or View name
    • Readonly: support both table and view
    • Editable: only for table. Required to create Postgresql functions so that it can pull your table info.

Properties

  • table database table swagger or table name.
  • clientProps props to create Supabase client.
  • gridProps props to config grid view.
  • schema table schema. Defaults to 'public'.
  • storageRef storageRef is used to save state on localstorage.
  • editable enable table editor.
  • headerActions react node to display in grid header.
  • theme grid theme.
  • onAddColumn show create new column button if available.
  • onAddRow show add row button if available.
  • onError error handler.
  • onEditColumn show edit column menu if available.
  • onDeleteColumn show delete column menu if available.
  • onEditRow show edit row button if available.

Run example

  1. Build library: npm start
  2. Go to example folder: cd example
  3. Create .env file: cp .env.example .env
  4. Update example/.env file with your Supabase project URL and key
  5. Run example app: npm start

Contributing

  • Fork the repo on GitHub
  • Clone the project to your own machine
  • Commit changes to your own branch
  • Push your work back up to your fork
  • Submit a Pull request so that we can review your changes and merge

License

This repo is licensed under MIT.