TableChart

image not found

Contents:

General

Detailed information can be found additionally here: https://developers.google.com/chart/interactive/docs/gallery/table

Example: Filling the data

final ChartModel model = ChartModel.New()
    .addColumn(Column.New(Type.STRING, "Name"))
    .addColumn(Column.New(Type.NUMBER, "Salary"))
    .addColumn(Column.New(Type.BOOLEAN, "Full Time Employee"));

model.addRow("Mike", Cell.New(10000, "$10.000"), true);
model.addRow("Jim", Cell.New(8000, "$8.000"), false);
model.addRow("Alice", Cell.New(12500, "$12.500"), true);
model.addRow("Bob", Cell.New(7000, "$7.000"), true);

tableChart.setModel(model);

API and methods:

Properties

AllowHTML

If this option is set to true, formatted values of cells containing HTML tags are rendered as HTML. With false most of the custom formatters is not correct.

this.tableChart.setAllowHtml(true);

AlternatingRowStyle

Specifies whether to assign an alternating color style to odd and even rows.

this.tableChart.setAlternatingRowStyle(true);

FirstRowNumber

The row number for the first row in the dataTable. Used only if showRowNumber is true.

this.tableChart.setFirstRowNumber(5);

FrozenColumns

The number of columns from the left that should be frozen. These columns will stay in place when the rest of the columns are scrolled horizontally. If showRowNumber is false, frozenColumns will appear with the value 0 just like with the value null, but if showRowNumber is set to true, the column with the row number will be frozen.

this.tableChart.setFrozenColumns(2);

Page

Whether and how to enable scrolling through the data. Select one of the following string values:

  • 'enable' - the table contains buttons for scrolling forward and backward. When you click these buttons, scrolling is performed and the displayed page is changed. You may also want to set the pageSize option.

  • 'event' - the table contains buttons for scrolling back and forth, but clicking these buttons triggers a 'page' event and does not change the displayed page. This option should be used if the code implements its own page change logic. See the TableQueryWrapper example for an example of how to handle paging events manually.

  • 'disable' - [Default] Paging is not supported.

this.tableChart.setPage(ActionMode.ENABLE);

PageSize

The number of lines on each page when paging is enabled with the page option.

this.tableChart.setPageSize(5);

PagingButtons

Sets a specific option for the scroll buttons. The options are as follows:

  • 'both' - activates the 'prev' and 'next' buttons

  • 'prev' - only the 'prev' button is enabled

  • 'next' - only the 'next' button is enabled

  • 'auto' - the buttons are activated according to the current page. On the first page only next is displayed. On the last page only prev is displayed. Otherwise both are activated.

  • number - the number of buttons to display. This explicit number overwrites the number calculated from pageSize.

this.tableChart.setPagingButtons(PagingButtons.Both());

RtlTable

Adds basic support for right-to-left languages (such as Arabic or Hebrew) by reversing the column order of the table so that column zero is the rightmost column and the last column is the leftmost column. This does not affect the column index in the underlying data, only the display order. Full bidirectional (BiDi) language display is not supported by Table Visualization even with this option. This option is ignored if you enable paging (with the page option) or if the table has scroll bars because you specified height and width options smaller than the required table size.

this.tableChart.setRtlTable(true);

ScrollLeftStartPosition

Sets the horizontal scroll position in pixels if the table has horizontal scrollbars because you have set the width property. The table is scrolled that many pixels beyond the leftmost column.

this.tableChart.setScrollLeftStartPosition(2);

ShowRowNumber

If set to true, the row number will be displayed as the first column of the table.

this.tableChart.setShowRowNumber(true);

Sort

Whether and how the columns should be sorted when the user clicks on a column heading. If sorting is enabled, you should also set the sortAscending and sortColumn properties. Choose one of the following string values:

  • 'enable' - [Default] Users can click on column headers to sort by the clicked column. When the user clicks on the column header, the rows are automatically sorted and a 'sort' event is fired.

  • 'event' - when the user clicks on the column header, a 'sort' event is triggered, but the rows are not sorted automatically. This option should be used if the page implements its own sorting. See the TableQueryWrapper example for an example of how sort events can be handled manually.

  • 'disable' - clicking on a column heading has no effect.

this.tableChart.setSort(ActionMode.ENABLE);

StartPage

The first table page to be displayed. Used only when page is in enable/event mode.

this.tableChart.setStartPage(1);