How to use the dc.dataTable function in dc

d3.json("data/yelp_test_set_business.json", (yelp_data:IYelpData[]) => {

    /********************************************************
     *                           *
     *   Step1: Create the dc.js chart objects & ling to div *
     *                           *
     ********************************************************/
    var bubbleChart: dc.BubbleChart = dc.bubbleChart("#dc-bubble-graph");
    var pieChart: dc.PieChart = dc.pieChart("#dc-pie-graph");
    var volumeChart: dc.BarChart = dc.barChart("#dc-volume-chart");
    var lineChart: dc.LineChart = dc.lineChart("#dc-line-chart");
    var dataTable: dc.DataTableWidget = dc.dataTable("#dc-table-graph");
    var rowChart: dc.RowChart = dc.rowChart("#dc-row-graph");

    /********************************************************
     *                           *
     *   Step2:  Run data through crossfilter        *
     *                           *
     ********************************************************/
    var ndx: CrossFilter.CrossFilter = crossfilter(yelp_data);

    /********************************************************
     *                           *
     *   Step3:  Create Dimension that we'll need      *
     *                           *
     ********************************************************/

    // for volumechart

renderDC = (selectedTimespan) => {
    const { formatMessage } = this.props.intl;
    // show a spinner while it loads
    this.showLoading(true);
    // set up chart containers
    const storiesOverTimeChart = dc.barChart('#stories-over-time-chart');
    const storyCount = dc.dataCount('#story-counts');
    const languageChart = dc.pieChart('#language-chart');
    const TopicStoryTable = dc.dataTable('#story-table');
    const facebookShareChart = dc.barChart('#facebook-share-chart');
    const inlinkChart = dc.barChart('#inlink-chart');
    // load the data up
    d3.csv(this.csvFileUrl(), (data) => {
      this.showLoading(false);
      // set up some binning
      const maxFacebookShares = d3.max(data.map(d => d.facebook_share_count));
      const facebookBinSize = maxFacebookShares / FACEBOOK_BIN_COUNT;
      const maxInlinks = d3.max(data.map(d => d.media_inlink_count));
      const inlinkBinSize = d3.max([1, (maxInlinks / INLINK_BIN_COUNT)]); // don't do < 1 for bin size
      // clean up the data
      for (let i = 0; i < data.length; i += 1) {
        const d = data[i];
        d.publishDate = (d.publish_date === STORY_PUB_DATE_UNDATEABLE) ? null : storyPubDateToMoment(d.publish_date).toDate();
        d.publishMonth = (d.publish_date === STORY_PUB_DATE_UNDATEABLE) ? null : d.publishDate.getMonth(); // pre-calculate month for better performance
        d.facebook_share_count = +d.facebook_share_count;

if (firstRun) //if its the first run expect everything to not exist, and draw it all
  {
    facts = crossfilter(jobs.Results)

    var all = facts.groupAll();

    //display totals
    countchart = dc.dataCount(".total");

    // jobs per hour time chart
    timeOpenChart = dc.barChart("#dc-timeopen-chart");
    runningChart = dc.compositeChart("#dc-running-chart");

    timeClosedChart = dc.barChart("#dc-timeclosed-chart");
    dataTable = dc.dataTable("#dc-table-graph");


    completionBellChart = dc.barChart("#dc-completionbell-chart");

    var closeTimeDimension = facts.dimension(function(d) {
      return d.JobCompleted;
    });

    var timeOpenDimension = facts.dimension(function(d) {
      return d.JobReceivedFixed;
    });


    var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
    var timeDifference = (Math.round(Math.abs((start.getTime() - end.getTime()) / (oneDay))));
    var timePeriodWord;

componentDidMount(){
        console.log("here!!!");
        
        var danmu_lineChart = dc.lineChart('#danmu-line-chart');
        var danmu_barChart = dc.barChart('#danmu-volume-chart');

        var danmu_Table = dc.dataTable('.dc-data-table');
        var danmu_Count = dc.dataCount('.dc-data-count');

        var colorChart = dc.pieChart('#color-chart');
        var posChart = dc.pieChart('#pos-chart');
        var charNumChart = dc.pieChart('#char-chart');

        var danmu_up_barChart = dc.barChart('#danmu-up-chart');

        let {csv_data,video_up_time, video_len} = this.props;

        var data = [];
        var time_cut = 100;
        //图标宽度
        var row_width = $("div.bootstrap-custom").width() * 10 /12;
        console.log(row_width, 55);
        row_width = row_width> 0 ? row_width: 400;

_renderDataTable(props) {
    const tableDomNode = this._table;
    const limit = this._getConfig('limit', props.config);
    const dataTableLimit = this._getConfig('data_table_limit', props.config);
    const sortOrder = this._getConfig('sort_order', props.config);

    this.dataTable = dc.dataTable(tableDomNode, this.dcGroupName);
    this.dataTable
      .dimension(this.dimensionByCount)
      .group((d) => {
        const topValues = this.group.order(this._groupOrderFunc(sortOrder)).top(limit);
        const dInTopValues = topValues.some(value => d.term.localeCompare(value.key) === 0);
        const dataTableTitle = `${sortOrder === 'desc' ? 'Top' : 'Bottom'} ${limit} values`;
        return dInTopValues ? dataTableTitle : 'Others';
      })
      .sortBy(d => d.count)
      .order(this._getSortOrder(sortOrder))
      .size(dataTableLimit)
      .columns(this._getDataTableColumns());

    if (this.props.interactive) {
      this.dataTable.on('renderlet', (table) => {
        table.selectAll('.dc-table-group').classed('info', true);

renderDataTable = (dimension, group, onDataFiltered) => {
    const dataTableDomNode = $('#dc-sources-result')[0];
    this._dataTable = dc.dataTable(dataTableDomNode);
    this._dataTable
      .dimension(dimension)
      .group((d) => {
        const topValues = group.top(this.props.numberOfTopValues);
        const dInTopValues = topValues.some(value => d.name.localeCompare(value.key) === 0);
        return (dInTopValues ? 'Top sources' : 'Others');
      })
      .size(this.state.numberOfSources)
      .columns([
        d =&gt; `<a title="Filter this source" class="dc-filter-link">${d.name}</a>`,
        d =&gt; `${d.percentage.toFixed(2)}%`,
        d =&gt; numeral(d.message_count).format('0,0'),
        d =&gt; this._getAddToSearchButton(d.name),
      ])
      .sortBy(d =&gt; d.message_count)
      .order(d3.descending)

renderDataTable(dimension, group, onDataFiltered) {
        var dataTableDomNode = $("#dc-sources-result")[0];
        this._dataTable = dc.dataTable(dataTableDomNode);
        this._dataTable
            .dimension(dimension)
            .group((d) => {
                var topValues = group.top(this.props.numberOfTopValues);
                var dInTopValues = topValues.some((value) => d.name.localeCompare(value.key) === 0);
                return dInTopValues ? "Top sources" : "Others";
            })
            .size(this.state.numberOfSources)
            .columns([
                (d) =&gt; "<a title="Filter this source" class="dc-filter-link">" + d.name +"</a>",
                (d) =&gt; d.percentage.toFixed(2) + "%",
                (d) =&gt; numeral(d.message_count).format("0,0"),
                (d) =&gt; this._getAddToSearchButton(d.name)
            ])
            .sortBy((d) =&gt; d.message_count)
            .order(d3.descending)

_renderDataTable() {
    const tableDomNode = this.refs.table;

    this.dataTable = dc.dataTable(tableDomNode, this.dcGroupName);
    this.dataTable
      .dimension(this.dimension)
      .group((d) => {
        const topValues = this.group.top(this.NUMBER_OF_TOP_VALUES);
        const dInTopValues = topValues.some((value) => d.term.localeCompare(value.key) === 0);
        return dInTopValues ? 'Top values' : 'Others';
      })
      .size(50)
      .columns(this._getDataTableColumns())
      .sortBy((d) => d.count)
      .order(d3.descending)
      .on('renderlet', (table) => {
        table.selectAll('.dc-table-group').classed('info', true);
        table.selectAll('td.dc-table-column button').on('click', () => {
          const $term = $(d3.event.target).closest('button').data('term');
          $(document).trigger('add-search-term.graylog.search', {field: this.props.id, value: $term});

app.me.facets.forEach(function(f) {
            if (f.active && f != primary) {
                columns.push({
                    label: f.name,
                    format: f.value
                });
            }
        });

        var order = d3.descending;
        if (this.model.order == "ascending") {
            order = d3.ascending;
        }
     
        var value = this.model.primary.value; 
        var chart = dc.dataTable(this.queryByHook('datatable'));
        chart
            .size(this.model.count)
            .showGroups(false)
            .dimension(this.model._crossfilter.dimension)
            .group(function(d) {return value(d);})
            .transitionDuration(app.me.anim_speed)
            .columns(columns)
            .order(order)
        ;

        chart.render();
        this._chart = chart;
    },

$(function () {
    var dateFormat = d3.time.format('%Y-%m-%d');
    var parent = d3.select('[data-chart="transactions-overview"]');

    //todo custom reduce functions for server-side stuff
    var volumeChart = dc.barChart('#volume-chart');
    var valueChart = dc.compositeChart('#value-chart');
    var amountChart = dc.barChart(valueChart);
    var cumAmountChart = dc.lineChart(valueChart);
    var accountChart = dc.rowChart('#account-selector');
    var typeChart = dc.rowChart('#account-type-selector');
    var transactionTable = dc.dataTable('#transaction-table');
    var transactionCount = dc.dataCount(".dc-data-count");
    var params = (new URL(document.location)).searchParams;
    var dateMin = dateFormat.parse(params.get('after'));
    var dateMax = dateFormat.parse(params.get('before'));

    $("#reset-all").click(function () {
        dc.filterAll();
        dc.renderAll();
        return false;
    });
    $("#reset-volume-chart").click(function () {
        volumeChart.filterAll();
        dc.redrawAll();
        return false;
    });