Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

Export react dynamic table as csv

Youssef Bouchara February 8, 2022 edited
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:image.png
my Columns are {shareFilterHead } and rows are {ShareFilterRows}
import React, {Component} from "react";
import DynamicTable from '@atlaskit/dynamic-table';
import styled from 'styled-components';
import { CSVLink, CSVDownload } from "react-csv";
export const createHead = (withWidth) => {
return {
  cells: [
    {
  
      key: 'filterID',
      content: 'Filter ID',
      isSortable: true,
      width: withWidth ? 25 : undefined,
  fontSize: 30,
    },
    {
      key: 'author',
      content: 'Author',
      shouldTruncate: true,
      isSortable: true,
      width: withWidth ? 25 : undefined,
  fontSize: 30,
    },
    {
      key: 'filtername',
      content: 'Filter Name',
      shouldTruncate: true,
      isSortable: true,
      width: withWidth ? 25 : undefined,
  fontSize: 30,
    },
    {
      key: 'jql',
      content: 'JQL',
      shouldTruncate: true,
  isSortable: true,
  width: withWidth ? 25 : undefined,
  fontSize: 30,
    },
  ],
   };
 };

export const shareFilterHead = createHead(true);

export default class ShareFilter extends Component {

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

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

render() {
const { error, isLoaded, shareFilterRows } = this.state;
if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <div>Loading Shared Filters...</div>;
} else {
  return ( 
  <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>

  
  );
  }
}
}

my dynamic table looks like this in the browser:image.png

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

1 answer

0 votes
Gonchik Tsymzhitov
Community Champion
July 29, 2022

Hi! 

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

Suggest an answer

Log in or Sign up to answer
TAGS
atlassian, mindful member, mindful member badge, atlassian community, community kudos, community giveaway, atlassian swag, community values, empathy and kindness, badge challenge, atlassian learning, community engagement, swag giveaway

Earn a Badge, Win a Prize 🎁

Earning the Mindful Member badge proves you know how to lead with kindness, plus it enters you into a giveaway for exclusive Atlassian swag. Take the quiz, grab the badge, and comment on our announcement article to spread the good vibes!

Start here
AUG Leaders

Atlassian Community Events