Export react dynamic table as csv

Youssef Bouchara_oln0q7

Hi guys I'm trying to export my atlassian dynamic react table as a csv file but the table I'm getting in the file is not really looking as I expected... I tried using the react-csv library but I'm getting this:

my Columns are {shareFilterHead } and rows are {ShareFilterRows}

<span>import</span> <span>React</span>, {<span>Component</span>} <span>from</span> <span>"react"</span>;
<span>import</span> <span>DynamicTable</span> <span>from</span> <span>'@atlaskit/dynamic-table'</span>;
<span>import</span> styled <span>from</span> <span>'styled-components'</span>;
<span>import</span> { CSVLink, CSVDownload } <span>from</span> <span>"react-csv"</span>;
<span>export</span> <span>const</span> <span>createHead</span> = (<span>withWidth</span>) => {
<span>return</span> {
  <span>cells</span>: [
    {
  
      <span>key</span>: <span>'filterID'</span>,
      <span>content</span>: <span>'Filter ID'</span>,
      <span>isSortable</span>: <span>true</span>,
      <span>width</span>: withWidth ? <span>25</span> : <span>undefined</span>,
  <span>fontSize</span>: <span>30</span>,
    },
    {
      <span>key</span>: <span>'author'</span>,
      <span>content</span>: <span>'Author'</span>,
      <span>shouldTruncate</span>: <span>true</span>,
      <span>isSortable</span>: <span>true</span>,
      <span>width</span>: withWidth ? <span>25</span> : <span>undefined</span>,
  <span>fontSize</span>: <span>30</span>,
    },
    {
      <span>key</span>: <span>'filtername'</span>,
      <span>content</span>: <span>'Filter Name'</span>,
      <span>shouldTruncate</span>: <span>true</span>,
      <span>isSortable</span>: <span>true</span>,
      <span>width</span>: withWidth ? <span>25</span> : <span>undefined</span>,
  <span>fontSize</span>: <span>30</span>,
    },
    {
      <span>key</span>: <span>'jql'</span>,
      <span>content</span>: <span>'JQL'</span>,
      <span>shouldTruncate</span>: <span>true</span>,
  <span>isSortable</span>: <span>true</span>,
  <span>width</span>: withWidth ? <span>25</span> : <span>undefined</span>,
  <span>fontSize</span>: <span>30</span>,
    },
  ],
   };
 };

<span>export</span> <span>const</span> shareFilterHead = <span>createHead</span>(<span>true</span>);

<span>export</span> <span>default</span> <span>class</span> <span>ShareFilter</span> <span>extends</span> <span>Component</span> {

<span>constructor</span>(<span>props</span>) {
    <span>super</span>(props);
    <span>this</span>.<span>state</span> = {
      <span>error</span>: <span>null</span>,
      <span>isLoaded</span>: <span>false</span>,
      <span>shareFilterRows</span>: []
    };
  }

<span>componentDidMount</span>() {
    <span>fetch</span>(<span>AJS</span>.<span>contextPath</span>() + <span>"/rest/securityrestresource/1.0/results?check=ShareFilter"</span>)
    .<span>then</span>(<span>(res)=></span>{
        <span>if</span>(res.<span>ok</span>) {
            <span>return</span> res.<span>json</span>();
        }
    }).<span>then</span>(<span>(res)=></span>{
  <span>this</span>.<span>setState</span>({
    <span>isLoaded</span>: <span>true</span>,
    <span>shareFilterRows</span>: res.<span>map</span>(<span>(row, index) =></span> ({
      <span>key</span>: <span>`row-${index}-${row.filterID}`</span>,
      <span>cells</span>: [{
        <span>key</span>: <span>`${row.filterID}`</span>,
        <span>content</span>: row.<span>filterID</span>,
        },
        {
        <span>key</span>: <span>`${row.author}`</span>,
        <span>content</span>: row.<span>author</span>,
        },
        {
        <span>key</span>: <span>`${row.filtername}`</span>,
        <span>content</span>: row.<span>filtername</span>,
        },
        {
        <span>key</span>: <span>`${row.jql}`</span>,
        <span>content</span>: row.<span>jql</span>,
        },]}))
  })
  })
  }

<span>render</span>() {
<span>const</span> { error, isLoaded, shareFilterRows } = <span>this</span>.<span>state</span>;
<span>if</span> (error) {
  <span>return</span> <span><div>Error: {error.message}</div></span>;
} <span>else</span> <span>if</span> (!isLoaded) {
  <span>return</span> <span><div>Loading Shared Filters...</div></span>;
} <span>else</span> {
  <span>return</span> ( 
  <span><Wrapper>
    <div>
    <DynamicTable
      head={shareFilterHead}
      rows={shareFilterRows}
      rowsPerPage={10}
      defaultPage={1}
      loadingSpinnerSize="large"
      isLoading={false}
      isFixedSize
      defaultSortKey="filterID"
      defaultSortOrder="ASC"
      onSort={() => console.log('onSort')}
      onSetPage={() => console.log('onSetPage')}
      />
      <CSVDownload data={shareFilterRows} target="_blank" />;
  </div>

  </Wrapper></span>

  
  );
  }
}<br>}

my dynamic table looks like this in the browser:

Is there any way to export this dynamic table as csv? 

Gonchik Tsymzhitov

Hi! 

how about exposing rest end point, then you can send parameters and export it