In our code i get table details get from json.but buttons are not showing.we use this code in spfx with sharepoint.my code is below.
...
SPComponentLoader.loadScript('https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js');

SPComponentLoader.loadScript('https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js');
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js');
SPComponentLoader.loadScript('https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js');
SPComponentLoader.loadScript('https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js');

require('../../External/js/dataTables.buttons.min.js');
require('../../External/js/buttons.flash.min.js');
require('../../External/js/buttons.html5.min.js');
SPComponentLoader.loadCss('https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css');
SPComponentLoader.loadCss('https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css');
SPComponentLoader.loadCss('https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css')
var ques;
var allchoices = [], AnsArry = [], finalarray = [], filteredArray = []
var strPollsID, allpolls, strPollsName, QuestionId;
var siteURL;
var strLocalStorage;
export interface IVoteadminViewWebPartProps {
description: string;
}
export default class VoteadminViewWebPart extends BaseClientSideWebPart<IVoteadminViewWebPartProps> {
userflag: boolean = false;
public render(): void {
siteURL = this.context.pageContext.web.absoluteUrl;
strPollsID = GetQueryStringParams("CID");
strPollsName = GetQueryStringParams("CName");

this.domElement.innerHTML =
  "<div class='breadcrumb'>" +
  "<ol id='appendbread'>" +
  "</ol>" +
  "</div>" +
  "<div class='title-section'>" +
  "<div class='button-field save-button'>" +
  "<a href='" + siteURL + "/Pages/Home.aspx' class='delete-icon close-icon pointer' class='closebutton'  title='Close' id='closeid'><i class='commonicon-close closebutton'></i>Close</a>" +
  "</div>" +
  "</div>" +
  '<div class="col-md-6"><div class="form-section">' +
  '<div id="Anonymouspoll"><div>' +

  '</div>' +
  '</div>' +
  '<div class="col-md-6"><div id="FilesPanel">' +
  '</div>' +
  '</div>';

this.getUserDetails();

}
async getUserDetails() {
var objResults;
var appendbreadCrumb, appendtitle;
var _thisss = this;
if (strPollsID && strPollsName == "Polls") {
strLocalStorage = "Polls View"
appendbreadCrumb = "<li><a href='" + siteURL + "/Pages/Home.aspx' title='Home'>Home</a></li><li><a class='pointer' id='breadTilte' title='" + strLocalStorage + "'>" + strLocalStorage + "</a></li>"

  appendtitle = "<h2 id='PollsTitle'>" + strLocalStorage + "</h2>";
}
else {
  strLocalStorage = "Polls View"
  appendbreadCrumb = "<li><a href='" + siteURL + "/Pages/Home.aspx' title='Home'>Home</a></li><li><a href='" + siteURL + "/Pages/PollsAdminView.aspx' class='pointer' id='breadTilte' title='Polls Admin View'>Polls Admin View</a></li><li><a class='pointer' id='breadTilte' title='" + strLocalStorage + "'>" + strLocalStorage + "</a></li>"

  appendtitle = "<h2 id='PollsTitle'>" + strLocalStorage + "</h2>";
}
$("#appendbread").append(appendbreadCrumb);
$(".save-button").after(appendtitle);

checkUserinGroup("Polls", _thisss.context.pageContext.user.email, function (result) {
  console.log(result);
  if (result == 1)
    _thisss.userflag = true;
});

objResults = await pnp.sp.web.lists.getByTitle("PollsResults").items.select("Names", "Author/Title", "ID", "IsVisibles", "Question", "QuestionID", "Modified", "Display", "Options").filter("QuestionID eq '" + strPollsID + "'").expand("Author").get().then((items: any[]) => {
  allpolls = items;
  if (allpolls[0].IsVisibles) {
    this.BindGraphAndTable();
    $("#Anonymouspoll").text("This is an Anonymous Poll");
    $("#FilesPanel").hide();
  }
  else {
    $("#Anonymouspoll").remove();
    this.BindGraphAndTable();
  }
});

}
BindGraphAndTable() {
var appendelement;
var appenduser: any;
var _that = this;
QuestionId = allpolls[0].QuestionID;
ques = allpolls[0].Question;
var reg1 = new RegExp('

$', "");
ques = ques.replace(reg1, "").replace(reg2, "");
appendelement = '<canvas id="' + QuestionId + '" class="chartdiv"></canvas>';
$(".form-section").append(appendelement);
appenduser = appenduser ? "undefined" : "";

if (allpolls.length > 0) {
  _that.GenerateTableFromJson(allpolls, function (data) {
    $('#FilesPanel').append(data);

    var oTable = ($('#FilesTable')).DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', 'csv', 'excel', 'pdf'
      ]
    });

    $(document).on('keyup change', '#SearchUser', function () {
      if (oTable.column(0).search() !== this.value) {
        oTable
          .column(0)
          .search(this.value)
          .draw();
      }
    });

    $(document).on('keyup change', '#SearchOption', function () {
      if (oTable.column(1).search() !== this.value) {
        oTable
          .column(1)
          .search(this.value)
          .draw();
      }
    });

  })

}
else {
  $('#FilesGrid').append("<span>No Item to Display</span>");
}
if (_that.userflag == true) {
  $("#FilesPanel").show();
}
else {
  $("#FilesPanel").hide();
}
_that.processData(allpolls, 0);

}
GenerateTableFromJson(objArray, callback) {
var tableContent =
'

' + '' + "" + "" + "" + "" + "" + "" + ''; tableContent += ''; for (var i = 0; i < objArray.length; i++) { tableContent += ''; tableContent += ''; tableContent += ''; tableContent += ''; } tableContent += '

User	Selected Option
' + objArray[i].Author.Title + '	' + objArray[i].Options + '

';

callback(tableContent);

}
processData(allpolls, index) {
QuestionId = allpolls[index].QuestionID;
var obj = readItems("Polls", ["ID", "Question", "Modified", "Display", "Options"], 100, "Modified", "ID", QuestionId);
obj.then((items: any[]) => {
AnsArry = items[0].Options.split(";");
filteredArray = AnsArry.filter(function (el) {
return el != "";
});
this.AnsCount(filteredArray, allpolls, index);
});
}

public AnsCount(AnsArry, allpolls, index) {
var objcount;
objcount = readItems("PollsResults", ["QuestionID", "Question", "Modified", "Display", "Options"], 100, "Modified", "QuestionID", QuestionId);
objcount.then((items: any[]) => {
var chartData = [];
QuestionId = items[0].QuestionID;
ques = items[0].Question;
for (let index = 0; index < AnsArry.length; index++) {
var choice = AnsArry[index];
var count = 0;
for (let j = 0; j < items.length; j++) {
if (items[j].Options == choice) {
count = count + 1;
}
}
chartData.push(count);
}
console.log(chartData);
// this.createChart(chartData);
});
}

createChart(chartData) {

var ctx: any = document.getElementById(QuestionId);

var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: filteredArray,
    datasets: [{
      label: '# of Votes',
      data: chartData,
      backgroundColor: [
        'rgba(255, 99, 132, 0.9)',
        'rgba(54, 162, 235, 0.9)',
        'rgba(255, 206, 86, 0.9)',
        'rgba(75, 192, 192, 0.9)',
        'rgba(153, 102, 255, 0.9)',
        'rgba(255, 159, 64, 0.9)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    title: {
      display: true,
      text: ques,
      position: 'top'
    },
    legend: {
      onClick: function (e) {
        e.stopPropagation();
      }
    },
  }
});

}
protected get dataVersion(): Version {
return Version.parse('1.0');
}

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
...