This commit is contained in:
James Lismore 2019-03-19 16:52:37 -04:00
parent 1f8ed6f5ad
commit e2106c93e4

View File

@ -3,16 +3,16 @@ import { render } from "react-dom";
import { CSVLink, CSVDownload } from "react-csv";
const headers = [
{label: 'First Name', key: 'details.firstName'},
{label: 'Last Name', key: 'details.lastName'},
{label: 'Job', key: 'job'},
{ label: "First Name", key: "details.firstName" },
{ label: "Last Name", key: "details.lastName" },
{ label: "Job", key: "job" }
];
const headersStrings = ['foo', 'bar'];
const headersStrings = ["foo", "bar"];
const data = [
{details: {firstName: 'Ahmed', lastName: 'Tomi'}, job: 'manager'},
{details: {firstName: 'John', lastName: 'Jones'}, job: 'developer'},
{ details: { firstName: "Ahmed", lastName: "Tomi" }, job: "manager" },
{ details: { firstName: "John", lastName: "Jones" }, job: "developer" }
];
const dataString = `firstname,lastname
@ -21,57 +21,226 @@ Raed,Labes
Yezzi,Min l3b
`;
const syncOnClickReturn = (event: React.MouseEventHandler<HTMLAnchorElement>) => {
const syncOnClickReturn = (
event: React.MouseEventHandler<HTMLAnchorElement>
) => {
window.console.log(event);
return true;
};
const syncOnClickVoid = (event: React.MouseEventHandler<HTMLAnchorElement>) => window.console.log(event);
const asyncOnClickReturn = (event: React.MouseEventHandler<HTMLAnchorElement>, done: (proceed?: boolean) => void) => {
const syncOnClickVoid = (event: React.MouseEventHandler<HTMLAnchorElement>) =>
window.console.log(event);
const asyncOnClickReturn = (
event: React.MouseEventHandler<HTMLAnchorElement>,
done: (proceed?: boolean) => void
) => {
window.console.log(event);
done(true);
};
const asyncOnClickVoid = (event: React.MouseEventHandler<HTMLAnchorElement>, done: (proceed?: boolean) => void) => {
const asyncOnClickVoid = (
event: React.MouseEventHandler<HTMLAnchorElement>,
done: (proceed?: boolean) => void
) => {
window.console.log(event);
done();
};
const node = document.getElementById("main");
render(<CSVLink data={dataString}/>, node);
render(<CSVLink data={dataString} headers={headersStrings}/>, node);
render(<CSVLink data={data}/>, node);
render(<CSVLink data={data} headers={headers}/>, node);
render(<CSVLink data={data} headers={headers}/>, node);
render(<CSVLink data={data} headers={headers} separator={','}/>, node);
render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'}/>, node);
render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true}/>, node);
render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true}
enclosingCharacter={`'`}/>, node);
render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true} enclosingCharacter={`'`}
onClick={syncOnClickReturn}/>, node);
render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true} enclosingCharacter={`'`}
onClick={syncOnClickVoid}/>, node);
render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true} enclosingCharacter={`'`}
onClick={asyncOnClickReturn} asyncOnClick={true}/>, node);
render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true} enclosingCharacter={`'`}
onClick={asyncOnClickVoid} asyncOnClick={true}/>, node);
render(<CSVLink data={dataString} />, node);
render(<CSVLink data={dataString} headers={headersStrings} />, node);
render(<CSVLink data={data} />, node);
render(<CSVLink data={data} headers={headers} />, node);
render(<CSVLink data={data} headers={headers} />, node);
render(<CSVLink data={data} headers={headers} separator={","} />, node);
render(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
/>,
node
);
render(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
uFEFF={true}
/>,
node
);
render(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
uFEFF={true}
enclosingCharacter={`'`}
/>,
node
);
render(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
uFEFF={true}
enclosingCharacter={`'`}
onClick={syncOnClickReturn}
/>,
node
);
render(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
uFEFF={true}
enclosingCharacter={`'`}
onClick={syncOnClickVoid}
/>,
node
);
render(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
uFEFF={true}
enclosingCharacter={`'`}
onClick={asyncOnClickReturn}
asyncOnClick={true}
/>,
node
);
render(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
uFEFF={true}
enclosingCharacter={`'`}
onClick={asyncOnClickVoid}
asyncOnClick={true}
/>,
node
);
render(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
uFEFF={true}
enclosingCharacter={`'`}
onClick={asyncOnClickVoid}
asyncOnClick={true}
className="test"
target="_blank"
/>,
node
);
render(<CSVDownload data={dataString}/>, node);
render(<CSVDownload data={dataString} headers={headersStrings}/>, node);
render(<CSVDownload data={data}/>, node);
render(<CSVDownload data={data} headers={headers}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'}
uFEFF={true}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'}
uFEFF={true}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'} uFEFF={true}
onClick={syncOnClickReturn}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'} uFEFF={true}
onClick={syncOnClickVoid}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'} uFEFF={true}
onClick={asyncOnClickReturn} asyncOnClick={true}/>, node);
render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'} uFEFF={true}
onClick={asyncOnClickVoid} asyncOnClick={true}/>, node);
render(<CSVDownload data={dataString} />, node);
render(<CSVDownload data={dataString} headers={headersStrings} />, node);
render(<CSVDownload data={data} />, node);
render(<CSVDownload data={data} headers={headers} />, node);
render(<CSVDownload data={data} headers={headers} target={"_blank"} />, node);
render(
<CSVDownload
data={data}
headers={headers}
target={"_blank"}
separator={","}
/>,
node
);
render(
<CSVDownload
data={data}
headers={headers}
target={"_blank"}
separator={","}
filename={"bob.csv"}
/>,
node
);
render(
<CSVDownload
data={data}
headers={headers}
target={"_blank"}
separator={","}
filename={"bob.csv"}
uFEFF={true}
/>,
node
);
render(
<CSVDownload
data={data}
headers={headers}
target={"_blank"}
separator={","}
filename={"bob.csv"}
uFEFF={true}
/>,
node
);
render(
<CSVDownload
data={data}
headers={headers}
target={"_blank"}
separator={","}
filename={"bob.csv"}
uFEFF={true}
onClick={syncOnClickReturn}
/>,
node
);
render(
<CSVDownload
data={data}
headers={headers}
target={"_blank"}
separator={","}
filename={"bob.csv"}
uFEFF={true}
onClick={syncOnClickVoid}
/>,
node
);
render(
<CSVDownload
data={data}
headers={headers}
target={"_blank"}
separator={","}
filename={"bob.csv"}
uFEFF={true}
onClick={asyncOnClickReturn}
asyncOnClick={true}
/>,
node
);
render(
<CSVDownload
data={data}
headers={headers}
target={"_blank"}
separator={","}
filename={"bob.csv"}
uFEFF={true}
onClick={asyncOnClickVoid}
asyncOnClick={true}
/>,
node
);