• Jump To … +
    butterfly_example.ts flamechart_sunburst_example.ts legend_example.ts pie_example.ts plot_area_example.ts plot_zoom_example.ts sankey_example.ts scatterplot_example.ts stack_example.ts swimlanes_example.ts sync_example.ts table_searchable_example.ts table_selectable_example.ts table_sortable_example.ts timeline_example.ts worldbank_example.ts
  • ¶

    C3 Table

    A simple data table example with that is selectable.

  • ¶

    Create the Data Table

    Create a c3.Table object and set its options.Bind to an anchor DOM element using a string selector.

    var table = new c3.Table({
    anchor: '#table_example',
  • ¶

    Specify the width to set the anchor node.Setting the height and width is optional.

        width: 250,
  • ¶

    The raw data to visualize. The data must be provided as an array.

        data: [0, 1, 2, 3, 4],
  • ¶

    Only include data elements that are greater than 0

        filter: (d) => d > 0,
  • ¶

    Enable the user to select rows in this table.

        selectable: 'multi',
  • ¶

    Create an array of column objects to describe the table columns.

        columns: [
  • ¶

    The first column header is labeled “x”. The cells.text callback describes how to generate the text content for the cells based on the data.

            {
            header: { text: "x" },
            cells: {
                text: (d) => d,
                styles: { color: 'darkblue' }
            },
            value: (d) => d,
            vis: 'bar',
            total_value: 5,
        },
  • ¶

    Create a second column that displays the data value squared for each row.

            {
            header: { html: "x<sup>2</sup>" },
            cells: { text: (d) => d * d },
            value: (d) => d * d,
        },
  • ¶

    Create a third column that displays the negative data value for each row.

            {
            header: { text: "-x" },
            cells: { text: (d) => -d },
            value: (d) => -d,
        },
    ],
  • ¶

    Setup event handler to do something with the selection. This could also have been added imperatively with table.on('select', function(selections) { ... });

        handlers: {
        'select': function (selections) {
            (<HTMLElement>document.querySelector('#current_selection')).innerText = selections;
        }
    },
});
  • ¶

    Render the table!

    table.render();
  • ¶

    Set table selectability

  • ¶

    Change the table selectability mode

    $('input[name=selectable]').on('change', function () {
    var value = $('input[name=selectable]:checked').val();
    switch (value) {
        case 'true': table.selectable = true; break;
        case 'false': table.selectable = false; break;
        default: table.selectable = value;
    }
    table.render();
});