Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Download exported table #284

Merged
merged 5 commits into from
May 12, 2023
Merged

Download exported table #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e9dbb56
Download table
cristineguadelupe May 12, 2023
e5a42d4
Download via select
cristineguadelupe May 12, 2023
f88b339
Applying suggestions
cristineguadelupe May 12, 2023
cade9a8
Applying suggestions
cristineguadelupe May 12, 2023
567d90b
Applying suggestions
cristineguadelupe May 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions assets/data_table/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,19 @@ html {
background-color: var(--gray-200);
}

.button--transparent {
background: transparent;
padding: 4px 8px;
border: 1px solid var(--gray-400);
font-size: .875rem;
font-weight: 500;
color: var(--gray-500);border-radius: 8px;
}

.button--transparent:hover {
background-color: var(--gray-100);
}

.input {
appearance: none;
padding: 4px 8px;
Expand Down Expand Up @@ -207,6 +220,27 @@ select option {
color: black;
}

select.input__icon {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 12H16L12 16L8 12H11V8H13V12ZM15 4H5V20H19V8H15V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918Z' fill='rgba(97,117,138,1)'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center right 10px;
background-size: 14px;
padding-right: 28px;
border: none;
color: white;
width: 18px;
}

select.input__icon:hover {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 12H16L12 16L8 12H11V8H13V12ZM15 4H5V20H19V8H15V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918Z' fill='rgba(28,42,58,1)'%3E%3C/path%3E%3C/svg%3E");
}

select.input__icon:focus {
outline: none;
}

.tooltip {
position: relative;
display: flex;
Expand Down
42 changes: 41 additions & 1 deletion assets/data_table/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,12 @@ function App({ ctx, data }) {
});

const hasRefetch = data.features.includes("refetch");
const hasExport = data.features.includes("export");
const hasData = data.content.columns.length !== 0;
const hasSummaries = summariesItems.length > 0;
const hasSorting = data.features.includes("sorting");
const supportedFormats = hasExport ? data.export?.formats : null;
const showDownload = hasExport && supportedFormats;

const emptySelection = {
rows: CompactSelection.empty(),
Expand Down Expand Up @@ -136,7 +139,9 @@ function App({ ctx, data }) {
const fixedHeight = 440 + headerHeight;
const minRowsToFitMenu = hasSorting ? 3 : 2;
const autoHeight =
totalRows && totalRows < minRowsToFitMenu && menu ? menuHeight + headerHeight : null;
totalRows && totalRows < minRowsToFitMenu && menu
? menuHeight + headerHeight
: null;
const height = totalRows >= 10 && infiniteScroll ? fixedHeight : autoHeight;
const rowMarkerStartIndex = (content.page - 1) * content.limit + 1;
const minColumnWidth = hasSummaries ? 150 : 50;
Expand Down Expand Up @@ -419,6 +424,13 @@ function App({ ctx, data }) {
ctx.handleEvent("update_content", (content) => {
setContent(content);
});
ctx.handleEvent("download_content", ([info, arrayBuffer]) => {
const blob = new Blob([arrayBuffer], { type: info.type });
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = `${info.filename}-${+new Date()}${info.format}`;
link.click();
});
}, []);

useEffect(() => {
Expand Down Expand Up @@ -458,6 +470,12 @@ function App({ ctx, data }) {
</span>
{totalRows < data.content.total_rows}
</div>
{showDownload && (
<DownloadExported
supportedFormats={supportedFormats}
onDownload={(format) => ctx.pushEvent("download", { format })}
/>
)}
<div className="navigation__space"></div>
{hasRefetch && (
<RefetchButton onRefetch={() => ctx.pushEvent("refetch")} />
Expand Down Expand Up @@ -531,6 +549,28 @@ function App({ ctx, data }) {
);
}

function DownloadExported({ supportedFormats, onDownload }) {
const formatsList = supportedFormats.map((format) => (
<option>{format}</option>
));
return (
<div>
<form>
<select
className="input__icon"
value=""
onChange={(event) => onDownload(event.target.value)}
>
<option selected disabled value="">
Export to
</option>
{formatsList}
</select>
</form>
</div>
);
}

function RefetchButton({ onRefetch }) {
return (
<button className="icon-button" aria-label="refresh" onClick={onRefetch}>
Expand Down
Loading