Tables on web pages are used to show spreadsheet-style data on the page, and the "DataGrid" Gidget is our way to insert that kind of data onto your page in a powerful, intuitive and searchable way. Note that "old-school" web pages also used tables to display content as well, but if you're using SiteGIDGET to power your website then you know there's nothing "old-school" about us. We follow the modern standards-based approach and leave tables to their strengths which is tabular data.

Example Uses:

• A sports team website wants to show their roster of players and positions
• A software website wants to showcase their program's features, in comparison with one or more of their competitors

Getting Started:

Step 1:
Under the "Gidgets" group in the "Insert" panel, click on "DataGrid". A dialog will pop up with three tabs that you can click through to set all your options. These options include the caption title, colors of the table borders and headings, and also the names of the columns you want your DataGrid to start off with. Submit the form at the top of the screen to continue to the actual rows of data.

Step 2:
Add as many rows as you need. Additionally there are other tools on this screen that allow you to move rows up and down in order, or delete a row altogether. You can edit a row by clicking on any text on the row.

Step 3 (optional):
You can customize the form that is used to add or edit entry rows by clicking on the column headings. This will display all the possible properties you can set on a column, which include the ability to define a list of preset values for the column, and whether or not to enable rich text controls for that field. None of this is needed for the DataGrid to function, but using this feature will make the data entry in Step 2 more efficient and "user-friendly".

Step 4:
Click the "Finished" button at the top of the screen to insert the completed DataGrid onto your page. You can then use the regular SiteGIDGET builder interface to drag the gidget into place on your page, use the resize handles around the selected gidget to change its dimensions, and use the floating Element Palette on the right of the screen to define its overall styles. To edit the data in the DataGrid, just double-click on the gidget and the dialog in Step 2 will pop up.

This gidget is simple yet powerful, and it's also in its infancy. In the future we're also going to include the ability to use the "Form" Gidget to display search results from your DataGrids. We also plan on including previous/next controls to paginate longer DataGrids so that they can still be displayed quickly on a published page.

We also would love to hear from you! If you have any ideas as to uses that this DataGrid Gidget  could be applied to, let us know.