TableView

This page has been automatically translated using the Google Translate API services. We are working on improving texts. Thank you for your understanding and patience.

Functions

TableViews are data views that display tabulated information arranged in rows and columns (Figure 1), (Figure 2), (Figure 3). The control enables scroll bars and allows keyboard navigation. In Hello TableView! you have an example of use.

• Use tableview_create to create a table view.
• Use tableview_new_column_text to add a column.
• Use tableview_size to set the default size.

1. Data connection

Let's think that a table can contain thousands of records and these can change at any time from different data sources (disk, network, DBMS, etc). For this reason, the TableView will not maintain any internal cache. It has been designed with the aim of making a quick visualization of the data, but without going into their management. Ultimately, it is the application that must provide this information in a fluid manner.

• Use tableview_OnData to bind the table to the data source.
• Use tableview_update to force an update of the table data.

When a table needs to draw its contents, in response to an OnDraw event, it will first ask the application for the total number of records via a ekGUI_EVENT_TBL_NROWS notification. With this it can calculate the size of the document and configure the scroll bars (Figure 4). Subsequently, it will launch successive ekGUI_EVENT_TBL_CELL events, where it will ask the application for the content of each cell (Figure 5). All these requests will be made through the callback function set in tableview_OnData (Listing 1).

TableView will only ask for the content of the visible part at any time.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

static void i_OnTableData(App *app, Event *e)
{
    uint32_t etype = event_type(e);
    unref(app);

    switch(etype) {
    case ekGUI_EVENT_TBL_NROWS:
    {
        uint32_t *n = event_result(e, uint32_t);
        *n = app_num_rows(app);
        break;
    }

    case ekGUI_EVENT_TBL_CELL:
    {
        const EvTbPos *pos = event_params(e, EvTbPos);
        EvTbCell *cell = event_result(e, EvTbCell);

        switch(pos->col) {
        case 0:
            cell->text = app_text_column0(app, pos->row);
            break;

        case 1:
            cell->text = app_text_column1(app, pos->row);
            break;

        case 2:
            cell->text = app_text_column2(app, pos->row);
            break;
        }

        break;
    }

    }
}

TableView *table = tableview_create();
tableview_OnData(table, listener(app, i_OnTableData, App));
tableview_update(table);

2. Data cache

As we have already commented, at each instant the table will only show a small portion of the data set. In order to supply this data in the fastest possible way, the application can keep a cache with those that will be displayed next. To do this, before starting to draw the view, the table will send an ekGUI_EVENT_TBL_BEGIN type event where it will indicate the range of rows and columns that need updating (Figure 6). This event will precede any ekGUI_EVENT_TBL_CELL seen in the previous section. In the same way, once all the visible cells have been updated, the ekGUI_EVENT_TBL_END event will be sent, where the application will be able to free the resources in the cache (Listing 2).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

static void i_OnTableData(App *app, Event *e)
{
    uint32_t etype = event_type(e);
    unref(app);

    switch(etype) {
    case ekGUI_EVENT_TBL_NROWS:
    {
        uint32_t *n = event_result(e, uint32_t);
        *n = app_num_rows(app);
        break;
    }

    case ekGUI_EVENT_TBL_BEGIN:
    {
        const EvTbRect *rect = event_params(e, EvTbRect);
        app->cache = app_fill_cache(app, rect->strow, rect->edrow, rect->stcol, rect->edcol);
        break;
    }

    case ekGUI_EVENT_TBL_CELL:
    {
        const EvTbPos *pos = event_params(e, EvTbPos);
        EvTbCell *cell = event_result(e, EvTbCell);
        cell->text = app_get_cache(app->cache, pos->row, pos->col);
        break;
    }

    case ekGUI_EVENT_TBL_END:
        app_delete_cache(app->cache);
        break;
}

TableView *table = tableview_create();
tableview_OnData(table, listener(app, i_OnTableData, App));
tableview_update(table);

3. Multiple selection

When we navigate through a TableView we can activate the multiple selection, which will allow us to mark more than one row of the table (Figure 7).

• Use tableview_multisel to turn multiselect on or off.
• Use tableview_selected to get the selected rows.
• Use tableview_select to select a set of rows.
• Use tableview_deselect to deselect.
• Use tableview_deselect_all to uncheck all rows.
• Use tableview_OnSelect to receive an event when the selection changes.

Navigation through a TableView works the same as other similar controls, such as the file explorer.

• [UP]/[DOWN] to scroll vertically.
• [LEFT]/[RIGHT] to scroll horizontally.
• [PAGEUP]/[PAGEDOWN] advance or reverse a page.
• [HOME] goes to the beginning of the table.
• [END] goes to the end of the table.
• [CTRL]+click multiple selection with the mouse.
• [SHIFT]+[UP]/[DOWN] multiple selection with the keyboard.

In multiple selection, an automatic de-selection of the rows will occur whenever we click releasing [CTRL] or press any navigation key releasing [SHIFT]. If we want to navigate without losing the previous selection, we must activate the preserve flag in tableview_multisel.

4. Configure columns

• Use tableview_column_width to set the width of a column.
• Use tableview_column_limits to set limits on the width.
• Use tableview_column_resizable to allow the column to be stretched or collapsed.
• Use tableview_header_visible to show or hide the header.
• Use tableview_OnHeaderClick to notify the header click.
• Use tableview_column_freeze to set one or more columns (Figure 8).

5. Grid drawing

• Use tableview_grid to show or hide the inner lines (Figure 9), (Figure 10).

tableview_create ()

Creates a new table view.

TableView*
tableview_create(void);

Return

The TableView.

tableview_OnData ()

Sets up a handler to read data from the application.

void
tableview_OnData(TableView *view,
                 Listener *listener);

Remarks

See Data connection.

tableview_OnSelect ()

Notifies that the selection has changed.

void
tableview_OnSelect(TableView *view,
                   Listener *listener);

Remarks

See Multiple selection.

tableview_OnHeaderClick ()

Notifies each time a header is clicked.

void
tableview_OnHeaderClick(TableView *view,
                        Listener *listener);

Remarks

See Configure columns.

tableview_font ()

Sets the general font for the entire table.

void
tableview_font(TableView *view,
               const Font *font);

tableview_size ()

Sets the default size of the table control.

void
tableview_size(TableView *view,
               const S2Df size);

Remarks

Corresponds to the Natural sizing of the control. By default 256x128.

tableview_new_column_text ()

Adds a new column to the table.

uint32_t
tableview_new_column_text(TableView *view);

Return

The column identifier (index).

Remarks

See Configure columns.

tableview_column_width ()

Sets the width of a column.

void
tableview_column_width(TableView *view,
                       const uint32_t column_id,
                       const real32_t width);

Remarks

See Configure columns.

tableview_column_limits ()

Sets the size limits of a column.

void
tableview_column_limits(TableView *view,
                        const uint32_t column_id,
                        const real32_t min,
                        const real32_t max);

Remarks

See Configure columns.

tableview_column_resizable ()

Sets whether a column is resizable or not.

void
tableview_column_resizable(TableView *view,
                           const uint32_t column_id,
                           const bool_t resizable);

Remarks

See Configure columns.

tableview_column_freeze ()

Allows freeze the first columns of the table.

void
tableview_column_freeze(TableView *view,
                        const uint32_t last_column_id);

Remarks

See Configure columns.

tableview_header_title ()

Sets the text of a column header.

void
tableview_header_title(TableView *view,
                       const uint32_t column_id,
                       const char_t *text);

Remarks

See Configure columns.

tableview_header_align ()

Sets the alignment of the header text.

void
tableview_header_align(TableView *view,
                       const uint32_t column_id,
                       const align_t align);

Remarks

See Configure columns.

tableview_header_visible ()

Sets whether the table header is visible or not.

void
tableview_header_visible(TableView *view,
                         const bool_t visible);

Remarks

See Configure columns.

tableview_header_clickable ()

Sets whether the table header can be clicked as a button.

void
tableview_header_clickable(TableView *view,
                           const bool_t clickable);

Remarks

See Configure columns.

tableview_header_resizable ()

Sets whether the header allows column resizing.

void
tableview_header_resizable(TableView *view,
                           const bool_t resizable);

Remarks

See Configure columns.

tableview_multisel ()

Sets the row selection mode.

void
tableview_multisel(TableView *view,
                   const bool_t multisel,
                   const bool_t preserve);

Remarks

See Multiple selection.

tableview_grid ()

Sets the drawing of the interior lines.

void
tableview_grid(TableView *view,
               const bool_t hlines,
               const bool_t vlines);

Remarks

See Grid drawing.

tableview_update ()

Synchronizes the table with the data source.

void
tableview_update(TableView *view);

Remarks

See Data connection. We must call this function from the application whenever the data linked to the table changes, in order to update the view.

tableview_select ()

Selects rows in the table.

void
tableview_select(TableView *view,
                 const uint32_t *rows,
                 const uint32_t n);

Remarks

See Multiple selection.

tableview_deselect ()

Deselects rows in the table.

void
tableview_deselect(TableView *view,
                   const uint32_t *rows,
                   const uint32_t n);

Remarks

See Multiple selection.

tableview_deselect_all ()

Deselects all rows in the table.

void
tableview_deselect_all(TableView *view);

Remarks

See Multiple selection.

tableview_selected ()

Returns the currently selected rows.

const ArrSt(uint32_t)*
tableview_selected(const TableView *view);

Return

Array with the indices of the selected rows.

Remarks

See Multiple selection.