Learn the basics of adding data tables to your page.
To add a table onto your page, first select the page you'd like the table to appear on. If you haven't yet created a page, you must first create one in order to begin adding tables.
Once you have a page you'd like to add a table to, click on the + icon to add a new component onto the page. See image below.
Next, select the Table component. See image below.
Then choose which table you'd like to add onto the page.
To see the list of default data tables, such as Users, Roles, and Logs, click the Show Default link to add one of these default tables to your page. See image below.
You now have 2 options for adding the table:
- Quick Add -with just one click this will add the table with most columns on the page and give you the option of adding an inline form as well as details pages
- Customize - this will allow you to do everything as in Quick Add but you'll have to choose each option manually.
First, let's add the table using the Customize option. Skip ahead to view the process of adding the table with Quick Add.
Next, under Fields, select all the columns you'd like to appear on your page.
Click Save and then click on Preview on the top right menu to view your table on your page. Below is a preview of how your new table will appear on your page.
Now, let's repeat the process of adding a table using Quick Add so we can compare the two options. See image below.
Once you click Quick add, you'll be prompted on the following page to add 2 options:
- Include inline form to add Projects? Selecting Yes will add a form which can be opened directly within the table to add additional records into this form. The form will appear as a pop up page.
- Include link to Projects Details page? Selecting Yes will add a column to your table called Details which will allow you to click on it and be routed to another page where you can view the full record details and then add related tables on the same page.
Let's select Yes for both and click Quick Add, and as you can see, two new pages were added to the table. See image below.
If you preview your app now you'll see your form has an Add New button which when pressed will open a pop up page where you can add additional records:
Let's click on Add New and add a new record.
Once you click save, the record will be shown in the table.
As you can see, there's our Details column that we added earlier with Quick Add. If you click on Details, you'll be routed to the details page for this record. See images below.
If you wish to remove the pop up page from this table, open the form, click on Options and under Allow New Record in Popup Page change it to No.