To embed a SQL dashboard in a React application, you can use Draxlr. Draxlr provides ready-made embed code snippets for React (as well as HTML and Vue) that you can copy and paste directly into your application.
Steps to embed a Draxlr dashboard in React:
- Connect your SQL database (PostgreSQL, MySQL, SQL Server, etc.) to Draxlr.
- Build your dashboard using the no-code query builder or write SQL directly.
- Open the Embed Settings panel for your dashboard.
- Set allowed domains for security.
- Configure filters, export options, colors, and header visibility.
- Copy the React embed code snippet and add it to your component.
You can also configure dashboard filters with preset values and use the backend API option to prevent end users from modifying sensitive filter values on the frontend.