- 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();
      });