---
title: Creating an Almost No Code Database-backed Web Interface with DreamFactory and Tabulator
description: Learn how to publish your database to the web using the no code DreamFactory platform and a powerful open source JavaScript library called Tabulator.
image: https://blog.dreamfactory.com/hubfs/Imported_Blog_Media/example.png
---
[](https://www.dreamfactory.com/)
Products & Services
[AI Data Gateway](https://www.dreamfactory.com/ai-data-gateway/overview)
[Overview Why DreamFactory exists](https://www.dreamfactory.com/ai-data-gateway/overview) [Data Gov, Comp, Security Policy enforcement at the API layer](https://www.dreamfactory.com/ai-data-gateway/ai-data-governance) [Standard API Layer One contract for every backend](https://www.dreamfactory.com/ai-data-gateway/standard-api-layer) [API Gateway Functionality Routing, auth, rate limits, observability](https://www.dreamfactory.com/ai-data-gateway/api-gateway-functionality) [Deployment & Integration Self-hosted, cloud, hybrid](https://www.dreamfactory.com/ai-data-gateway/on-premise-deployment-and-integration) [Developer Productivity Auto-generated, never hand-coded](https://www.dreamfactory.com/ai-data-gateway/ai-development-accelerated) [AI App Architectures Patterns for RAG, agents, MCP](https://www.dreamfactory.com/ai-data-gateway/enterprise-ai-architectures)
AI Data Models
[AIOpenAI](https://www.dreamfactory.com/use-cases/openai) [GGoogle Gemini](https://www.dreamfactory.com/use-cases/google-gemini) [CAnthropic Claude](https://www.dreamfactory.com/use-cases/anthropic-claude-landing) [LMeta Llama](https://www.dreamfactory.com/use-cases/meta-llama) [MMistral AI](https://www.dreamfactory.com/use-cases/mistral) [CoCohere](https://www.dreamfactory.com/use-cases/cohere)
Services and support
[Quickstart Service Packages Expert-led Quickstarts to production](https://www.dreamfactory.com/services-and-support/quickstart-services-packages)
API Management
[Generate & Manage REST APIs From any database, in seconds](https://www.dreamfactory.com/api-management/generate-rest-apis) [Features Security, scripting, self-hosted & more](https://www.dreamfactory.com/api-management/features) [API Generation The complete guide to auto-generated APIs](https://blog.dreamfactory.com/a-complete-guide-to-api-generation) [API Management Concepts, tools, and best practises](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools?_gl=1*jl0njh*_gcl_au*MjQzMjgwMTc3LjE3ODIzMjI3MzY)
Use Cases
AI Use Cases
[AI Data Access Secure, governed reads for your LLMs](https://www.dreamfactory.com/use-cases/ai-data-access) [MCP Server Drop-in Model Context Protocol](https://www.dreamfactory.com/use-cases/mcp-server) [Legacy Modernization Wrap mainframes with REST](https://www.dreamfactory.com/use-cases/legacy-modernization) [Data Governance Audit every call, enforce every policy](https://www.dreamfactory.com/use-cases/data-governance)
[Customer Case Studies](https://www.dreamfactory.com/case-studies)
[Energy Modernization](https://www.dreamfactory.com/case-studies/energy-snowflake-modernization) [Government Modernization](https://www.dreamfactory.com/case-studies/government-mainframe-oracle-modernization) [Government Business Intelligence](https://www.dreamfactory.com/case-studies/government-sql-server-bi-analyst-queries) [Manufacturing Modernization](https://www.dreamfactory.com/case-studies/steel-manufacturing-sap-erp-modernization) [Financial Services Investor Portal](https://www.dreamfactory.com/case-studies/financial-services-sql-server-investor-portal) [Non-Profit Partner Data Sharing](https://www.dreamfactory.com/case-studies/non-profit-sql-server-partner-data-sharing) [Professional Services Exec Dashboards](https://www.dreamfactory.com/case-studies/professional-services-erp-dashboards) [Education HR and External Data Sharing](https://www.dreamfactory.com/case-studies/education-student-hr-sql-server-mysql-external-data-sharing)
Industries
Industries
#### [Healthcare HIPAA-grade APIs across EHR, claims, and labs.](https://www.dreamfactory.com/use-cases/healthcare)
#### [Financial Services Portfolios, partners, and portals on one layer.](https://www.dreamfactory.com/use-cases/financial-services)
#### [Government Modernize mainframes without re-platforming.](https://www.dreamfactory.com/use-cases/government)
#### [Manufacturing SAP, MES, and shop-floor data, governed.](https://www.dreamfactory.com/use-cases/manufacturing)
#### [Spotlight How enterprises run on DreamFactory From healthcare to energy to finance — governance baked into every endpoint. Browse case studies →](https://www.dreamfactory.com/case-studies)
Connectors
SQL Database
[SQL SQL Server](https://www.dreamfactory.com/connectors/sql-server) [OR Oracle](https://www.dreamfactory.com/connectors/oracle) [PG PostgreSQL](https://www.dreamfactory.com/connectors/postgresql) [My MySQL](https://www.dreamfactory.com/connectors/mysql)
NoSQL & Docs
[Dy DynamoDB](https://www.dreamfactory.com/connectors/dynamodb) [Do DocumentDB](https://www.dreamfactory.com/connectors/azure-documentdb) [Mo MongoDB](https://www.dreamfactory.com/connectors/mongodb) [Cb CouchDB](https://www.dreamfactory.com/connectors/couch-db)
Cloud Warehouses
[S3 S3](https://www.dreamfactory.com/connectors/amazon-s3) [Ab Azureblob](https://www.dreamfactory.com/connectors/azure-blob) [FS FTP/SFTP](https://www.dreamfactory.com/connectors/ftp-sftp) [LS Local Storage](https://www.dreamfactory.com/connectors/local-storage)
C & SaaS
[Sf Salesforce](https://www.dreamfactory.com/connectors/salesforce) [API REST / SOAP](https://www.dreamfactory.com/connectors/soap-to-rest)
[See all 30+ connectors](https://www.dreamfactory.com/connectors)
[Blog](https://blog.dreamfactory.com/)
[FREE 30 Minute Demo](https://www.dreamfactory.com/demo)
[](https://www.dreamfactory.com/)
 
Back to main menu
Products & Services
Use Cases
Industries
Connectors
[Blog](https://blog.dreamfactory.com/)
[FREE 30 Minute Demo](https://www.dreamfactory.com/demo)
[AI Data Gateway](https://www.dreamfactory.com/ai-data-gateway/overview)
[Overview Why DreamFactory exists](https://www.dreamfactory.com/ai-data-gateway/overview) [Data Gov, Comp, Security Policy enforcement at the API layer](https://www.dreamfactory.com/ai-data-gateway/ai-data-governance) [Standard API Layer One contract for every backend](https://www.dreamfactory.com/ai-data-gateway/standard-api-layer) [API Gateway Functionality Routing, auth, rate limits, observability](https://www.dreamfactory.com/ai-data-gateway/api-gateway-functionality) [Deployment & Integration Self-hosted, cloud, hybrid](https://www.dreamfactory.com/ai-data-gateway/on-premise-deployment-and-integration) [Developer Productivity Auto-generated, never hand-coded](https://www.dreamfactory.com/ai-data-gateway/ai-development-accelerated) [AI App Architectures Patterns for RAG, agents, MCP](https://www.dreamfactory.com/ai-data-gateway/enterprise-ai-architectures)
AI Data Models
[AIOpenAI](https://www.dreamfactory.com/use-cases/openai) [GGoogle Gemini](https://www.dreamfactory.com/use-cases/google-gemini) [CAnthropic Claude](https://www.dreamfactory.com/use-cases/anthropic-claude-landing) [LMeta Llama](https://www.dreamfactory.com/use-cases/meta-llama) [MMistral AI](https://www.dreamfactory.com/use-cases/mistral) [CoCohere](https://www.dreamfactory.com/use-cases/cohere)
Services and support
[Quickstart Service Packages Expert-led Quickstarts to production](https://www.dreamfactory.com/services-and-support/quickstart-services-packages)
AI Data Models
[Generate & Manage REST APIs From any database, in seconds](https://www.dreamfactory.com/api-management/generate-rest-apis) [Features Security, scripting, self-hosted & more](https://www.dreamfactory.com/api-management/features) [API Generation The complete guide to auto-generated APIs](https://blog.dreamfactory.com/a-complete-guide-to-api-generation) [API Management Concepts, tools, and best practises](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools?_gl=1*jl0njh*_gcl_au*MjQzMjgwMTc3LjE3ODIzMjI3MzY)
AI Use Cases
[AI Data Access Secure, governed reads for your LLMs](https://www.dreamfactory.com/use-cases/ai-data-access) [MCP Server Drop-in Model Context Protocol](https://www.dreamfactory.com/use-cases/mcp-server) [Legacy Modernization Wrap mainframes with REST](https://www.dreamfactory.com/use-cases/legacy-modernization) [Data Governance Audit every call, enforce every policy](https://www.dreamfactory.com/use-cases/data-governance)
[Customer Case Studies](https://www.dreamfactory.com/case-studies)
[Energy Modernization](https://www.dreamfactory.com/case-studies/energy-snowflake-modernization) [Government Modernization](https://www.dreamfactory.com/case-studies/government-mainframe-oracle-modernization) [Government Business Intelligence](https://www.dreamfactory.com/case-studies/government-sql-server-bi-analyst-queries) [Manufacturing Modernization](https://www.dreamfactory.com/case-studies/steel-manufacturing-sap-erp-modernization) [Financial Services Investor Portal](https://www.dreamfactory.com/case-studies/financial-services-sql-server-investor-portal) [Non-Profit Partner Data Sharing](https://www.dreamfactory.com/case-studies/non-profit-sql-server-partner-data-sharing) [Professional Services Exec Dashboards](https://www.dreamfactory.com/case-studies/professional-services-erp-dashboards) [Education HR and External Data Sharing](https://www.dreamfactory.com/case-studies/education-student-hr-sql-server-mysql-external-data-sharing)
Industries
#### [Healthcare HIPAA-grade APIs across EHR, claims, and labs.](https://www.dreamfactory.com/use-cases/healthcare)
#### [Financial Services Portfolios, partners, and portals on one layer.](https://www.dreamfactory.com/use-cases/financial-services)
#### [Government Modernize mainframes without re-platforming.](https://www.dreamfactory.com/use-cases/government)
#### [Manufacturing SAP, MES, and shop-floor data, governed.](https://www.dreamfactory.com/use-cases/manufacturing)
SQL Database
[SQL SQL Server](https://www.dreamfactory.com/connectors/sql-server) [OR Oracle](https://www.dreamfactory.com/connectors/oracle) [PG PostgreSQL](https://www.dreamfactory.com/connectors/postgresql) [My MySQL](https://www.dreamfactory.com/connectors/mysql)
NoSQL & Docs
[Dy DynamoDB](https://www.dreamfactory.com/connectors/dynamodb) [Do DocumentDB](https://www.dreamfactory.com/connectors/azure-documentdb) [Mo MongoDB](https://www.dreamfactory.com/connectors/mongodb) [Cb CouchDB](https://www.dreamfactory.com/connectors/couch-db)
Cloud Warehouses
[S3 S3](https://www.dreamfactory.com/connectors/amazon-s3) [Ab Azureblob](https://www.dreamfactory.com/connectors/azure-blob) [FS FTP/SFTP](https://www.dreamfactory.com/connectors/ftp-sftp) [LS Local Storage](https://www.dreamfactory.com/connectors/local-storage)
C & SaaS
[Sf Salesforce](https://www.dreamfactory.com/connectors/salesforce) [API REST / SOAP](https://www.dreamfactory.com/connectors/soap-to-rest)
[See all 30+ connectors](https://www.dreamfactory.com/connectors)
[ Blog](https://blog.dreamfactory.com/)
# Creating an Almost No Code Database-backed Web Interface with DreamFactory and Tabulator
by Jason Gilmore
 May 15, 2019
Table of contents
RECOMMENDED ARTICLES
- [A Complete Guide to API Generation](https://blog.dreamfactory.com/a-complete-guide-to-api-generation)
- [10 Best API Management Tools](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools)
- [Creating a Microsoft SQL Server API in Less Than 5 minutes with DreamFactory](https://blog.dreamfactory.com/creating-a-microsoft-sql-server-api-in-less-than-5-minutes-with-dreamfactory)
- [Hasura vs. DreamFactory: A Comprehensive Comparison](https://blog.dreamfactory.com/hasura-vs-dreamfactory)
- [Build A Snowflake REST API in Less Than 5 Minutes](https://blog.dreamfactory.com/generate-a-snowflake-rest-api-in-less-than-5-minutes)
No matter the size or industry, companies everywhere grapple with solving a deceptively simple problem: displaying database data on the web in a table. This problem seems to be universal in the sense that all teams have experienced the inconvenience of passing around Excel spreadsheets, and want to instead move this data to the web. Yet these same teams often lack the programming experience required to securely retrieve the data and present it within a paginated, filterable and often searchable web interface.
Fortunately, using [DreamFactory](https://www.dreamfactory.com) and off-the-shelf software such as [Tabulator](https://tabulator.info) or [DataTables](https://datatables.net/), it's possible to create a powerful database-backed web interface such as the one presented in the following screenshot:
If you'd like to interact with a live example head over to [https://tabulator.demo.dreamfactory.com/](https://tabulator.demo.dreamfactory.com/) and get your hands dirty!
In this blog post I'll show you how easy it is to create your own database-backed web interface using DreamFactory and Tabulator with almost no code required.
## Creating the Database API
The open source edition includes support for [several popular database](https://blog.dreamfactory.com/synchronizing-database-data-using-an-api/), including [MySQL](https://blog.dreamfactory.com/create-a-mysql-rest-api-in-minutes-using-dreamfactory/) and [PostgreSQL](https://www.dreamfactory.com/hub/integrations/postgresql/), whereas the commercial edition additionally supports Microsoft SQL Server and Oracle (Check out our post [comparing MySQL vs SQL Server](https://blog.dreamfactory.com/ms-sql-server-vs-mysql/)).
**Related reading:** [How to Connect to a MySQL Database with JavaScript](https://blog.dreamfactory.com/how-to-connect-to-a-mysql-database-with-javascript/)
Once installed, you can generate a database-backed API in literally minutes, secured by (at minimum) an API and role-based access controls. If you're not familiar with this process head over to [DreamFactory Academy](https://academy.dreamfactory.com/) and watch the following video, "Creating Your First Database API with DreamFactory":
You'll also find dozens of other videos on our [Youtube channel](https://www.youtube.com/user/dreamfactorysoftware).
Once the API created, you can query the database using a standardized API URL structure such as:
```
https://example.com/api/v2/corporate/_table/employees
```
Of course, for security reasons you'll need to additionally pass along an API key. This process is described in the aforementioned video.
DreamFactory is an API generation and management platform used by thousands of organizations around the globe. You can download our open source version from [DreamFactory.com](https://www.dreamfactory.com/) or [contact us](https://www.dreamfactory.com/demo/) to start an on premise or hosted trial of our commercial version.
## Integrating the API with Tabulator
[Tabulator](https://tabulator.info/) is an open source JavaScript library used for creating interactive HTML tables. It supports data loading via a JavaScript array, JSON formatted data, or an AJAX data source. We'll use the latter approach to load data from the DreamFactory-powered database API. To begin though, you'll first need to install the library. If you're looking for the easiest solution, we recommend cloning our [dreamfactory-tabulator](https://github.com/dreamfactorysoftware/dreamfactory-tabulator) repository, located on GitHub. Alternatively a number of other installation solutions are supported (Bower, NPM, Yarn, etc); check out the [Tabulator documentation](http://tabulator.info/docs/4.9/install) for more information.
Once installed, you only need to add a few lines of boilerplate code to load the database data into the Tabulator table. The following example contains just 35 lines of JavaScript code and will recreate a basic version of the interface presented in the earlier screenshot:
```
Tabulator example