Custom components as simple Access-Database

I've made some components that receive data from server and displays results in a table or form. By emitting and receiving events I can emulate quite a bit of the functionality from Access on a webpage - with the user just having to know some html - css and sql.

All components assume security is handled by the server - sessions and users must be handled as appropriate. In the examples I'll use an endpoint /runsql that just executes and returns any sql you might throw at it. Very nice for testing, but replace with more specific endpoints and security.

One component - DbInsert - will show a form that can be submitted to insert a row.

Very straight forward if the underlying table has no foreign keys. I'll come back to this component after introducing some others first.

DbForeign is intended to select a foreign key from a table. Can be used as a sub component in DbInsert and others. It shows up as a select element populated by given sql param.

DbTable is the main display component. It takes a query and a list of fields to show. The fields are used to construct headers for the table and the query fills in the rows.

DbUpdate is much like DbInsert, but updates existing posts. This component has built in navigation (that can be disabled).

DbUser simply tries to get info about current user. Can then be depended on by other components so that we fetch data for this user.

Most components listen for dbUpdate event that is emitted by DbInsert and DbUpdate on save, and by DbTable on row select. DbForeign emits this event on selection change.

DbUpdate and DbTable can depend on other components - on dbUpdate they will rerun the sql with the depended component used in a tagged on where clause. This only happens if the original sql does not include a where clause.

Putting these components together I can emulate a Form - sub-form and other structures from Access. 

In this form I have a DbUser that is depended on by a DbTable.

On select of a row in the table the DbInsert below is activated (depends on the table).

The DbTable below the insert also depends on selected row and responds to update events from the DbInsert, thus showing current rows.

Finally a simple DbTable with a aggregate sql shows the total cost for this order.

Note the checkmarks and x button in the tables. Selected rows can be deleted. This also triggers a dbUpdate event - connected components requery and repaint.