34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { CSVLink } from 'react-csv';
|
|
import { Download, Loader2 } from 'lucide-react';
|
|
|
|
export const CSVExport = ({ data, filename, headers, label, style, btnLoading, onClick, className = '' }) => (
|
|
<CSVLink data={data} filename={filename} headers={headers} style={{ textDecoration: 'none' }}>
|
|
<button
|
|
type="button"
|
|
disabled={btnLoading}
|
|
onClick={(e) => onClick?.(e)}
|
|
className={`h-9 px-3.5 bg-black hover:bg-neutral-800 active:scale-[0.98] text-white text-xs font-semibold rounded-md shadow-xs flex items-center gap-1.5 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
|
|
style={style}
|
|
title="CSV Export"
|
|
>
|
|
{btnLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Download className="w-3.5 h-3.5" />}
|
|
<span>{label || 'CSV'}</span>
|
|
</button>
|
|
</CSVLink>
|
|
);
|
|
|
|
CSVExport.propTypes = {
|
|
data: PropTypes.array,
|
|
headers: PropTypes.any,
|
|
filename: PropTypes.string,
|
|
label: PropTypes.any,
|
|
style: PropTypes.object,
|
|
btnLoading: PropTypes.any,
|
|
onClick: PropTypes.func,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
export default CSVExport;
|