mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 08:58:26 +00:00
download event for table in server side pagination (#10330)
This commit is contained in:
Kartik Gupta
GitHub
parent
af1dda8ec9
commit
5e9e9381e9
5 changed files with 60 additions and 26 deletions
|
|
@ -289,6 +289,7 @@ export const tableConfig = {
|
|||
onCellValueChanged: { displayName: 'Cell value changed' },
|
||||
onFilterChanged: { displayName: 'Filter changed' },
|
||||
onNewRowsAdded: { displayName: 'Add new rows' },
|
||||
onTableDataDownload: { displayName: 'Download data' },
|
||||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ export const Footer = React.memo(
|
|||
showAddNewRowPopup,
|
||||
downlaodPopover,
|
||||
getToggleHideAllColumnsProps,
|
||||
isDownloadTableDataEventAssociated,
|
||||
}) => {
|
||||
function hideColumnsPopover() {
|
||||
return (
|
||||
|
|
@ -223,32 +224,57 @@ export const Footer = React.memo(
|
|||
)}
|
||||
{!loadingState && showDownloadButton && (
|
||||
<div>
|
||||
<Tooltip id="tooltip-for-download" className="tooltip" />
|
||||
<OverlayTriggerComponent
|
||||
trigger="click"
|
||||
overlay={downlaodPopover()}
|
||||
rootClose={true}
|
||||
placement={'top-end'}
|
||||
>
|
||||
<ButtonSolid
|
||||
variant="ghostBlack"
|
||||
className={`tj-text-xsm `}
|
||||
customStyles={{
|
||||
minWidth: '32px',
|
||||
}}
|
||||
leftIcon="filedownload"
|
||||
fill={`var(--icons-default)`}
|
||||
iconWidth="16"
|
||||
size="md"
|
||||
data-tooltip-id="tooltip-for-download"
|
||||
data-tooltip-content="Download"
|
||||
onClick={(e) => {
|
||||
if (document.activeElement === e.currentTarget) {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
></ButtonSolid>
|
||||
</OverlayTriggerComponent>
|
||||
{
|
||||
// if server side pagination is enabled and download event is associated with the table, then directly fire download event without displaying popover
|
||||
isDownloadTableDataEventAssociated && !clientSidePagination ? (
|
||||
<>
|
||||
<Tooltip id="tooltip-for-download-serverside-pagingation" className="tooltip" />
|
||||
<ButtonSolid
|
||||
variant="ghostBlack"
|
||||
className={`tj-text-xsm `}
|
||||
customStyles={{
|
||||
minWidth: '32px',
|
||||
}}
|
||||
leftIcon="filedownload"
|
||||
fill={`var(--icons-default)`}
|
||||
iconWidth="16"
|
||||
size="md"
|
||||
data-tooltip-id="tooltip-for-download-serverside-pagingation"
|
||||
data-tooltip-content="Download"
|
||||
onClick={() => fireEvent('onTableDataDownload')}
|
||||
></ButtonSolid>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Tooltip id="tooltip-for-download" className="tooltip" />
|
||||
<OverlayTriggerComponent
|
||||
trigger="click"
|
||||
overlay={downlaodPopover()}
|
||||
rootClose={true}
|
||||
placement={'top-end'}
|
||||
>
|
||||
<ButtonSolid
|
||||
variant="ghostBlack"
|
||||
className={`tj-text-xsm `}
|
||||
customStyles={{
|
||||
minWidth: '32px',
|
||||
}}
|
||||
leftIcon="filedownload"
|
||||
fill={`var(--icons-default)`}
|
||||
iconWidth="16"
|
||||
size="md"
|
||||
data-tooltip-id="tooltip-for-download"
|
||||
data-tooltip-content="Download"
|
||||
onClick={(e) => {
|
||||
if (document.activeElement === e.currentTarget) {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
></ButtonSolid>
|
||||
</OverlayTriggerComponent>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{!loadingState && !hideColumnSelectorButton && (
|
||||
|
|
|
|||
|
|
@ -154,6 +154,7 @@ export const Table = React.memo(
|
|||
const [tableDetails, dispatch] = useReducer(reducer, initialState());
|
||||
const [hoverAdded, setHoverAdded] = useState(false);
|
||||
const [generatedColumn, setGeneratedColumn] = useState([]);
|
||||
const [isDownloadTableDataEventAssociated, setIsDownloadTableDataEventAssociated] = useState(false);
|
||||
|
||||
const mergeToTableDetails = useCallback((payload) => dispatch(reducerActions.mergeToTableDetails(payload)), []);
|
||||
const mergeToFilterDetails = (payload) => dispatch(reducerActions.mergeToFilterDetails(payload));
|
||||
|
|
@ -175,6 +176,9 @@ export const Table = React.memo(
|
|||
useEffect(() => mergeToTableDetails({ columnProperties: properties?.columns }), [properties?.columns]);
|
||||
|
||||
useEffect(() => {
|
||||
const isDownloadTableDataEventAssociated = tableEvents.some((event) => event?.name === 'onTableDataDownload');
|
||||
if (isDownloadTableDataEventAssociated) setIsDownloadTableDataEventAssociated(true);
|
||||
else setIsDownloadTableDataEventAssociated(false);
|
||||
const hoverEvent = tableEvents?.find(({ event }) => {
|
||||
return event?.eventId == 'onRowHovered';
|
||||
});
|
||||
|
|
@ -1167,6 +1171,7 @@ export const Table = React.memo(
|
|||
{loadingState ? <LoadingState /> : page.length === 0 ? <EmptyState /> : null}
|
||||
</div>
|
||||
<Footer
|
||||
isDownloadTableDataEventAssociated={isDownloadTableDataEventAssociated}
|
||||
enablePagination={enablePagination}
|
||||
tableDetails={tableDetails}
|
||||
loadingState={loadingState}
|
||||
|
|
|
|||
|
|
@ -361,6 +361,7 @@ export const createEventsSlice = (set, get) => ({
|
|||
'onSubmit',
|
||||
'onInvalid',
|
||||
'onNewRowsAdded',
|
||||
'onTableDataDownload',
|
||||
].includes(eventName)
|
||||
) {
|
||||
executeActionsForEventId(eventName, events, mode, customVariables);
|
||||
|
|
|
|||
|
|
@ -289,6 +289,7 @@ export const tableConfig = {
|
|||
onCellValueChanged: { displayName: 'Cell value changed' },
|
||||
onFilterChanged: { displayName: 'Filter changed' },
|
||||
onNewRowsAdded: { displayName: 'Add new rows' },
|
||||
onTableDataDownload: { displayName: 'Download data' },
|
||||
},
|
||||
styles: {
|
||||
textColor: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue