Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix-Show page controls in table widget when server side pagination is enabled and table is resized (#223)

Browse Source 
Pagination control UX modified for server side pagination.
This commit is contained in:
vicky-primathon 2020-08-10 12:17:47 +05:30 committed by GitHub
parent c68114331c
commit 859bd0962c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/src/components/designSystems/appsmith/Table.tsx
View File

@ -111,6 +111,7 @@ export const Table = (props: TableProps) => {
id={`table${props.widgetId}`}
>
<TableHeader
width={props.width}
tableData={props.data}
tableColumns={props.columns}
searchTableData={props.searchTableData}

12
app/client/src/components/designSystems/appsmith/TableHeader.tsx
View File

@ -72,11 +72,15 @@ interface TableHeaderProps {
searchTableData: (searchKey: any) => void;
serverSidePaginationEnabled: boolean;
displayColumnActions: boolean;
width: number;
}
const TableHeader = (props: TableHeaderProps) => {
return (
<TableHeaderWrapper>
<TableHeaderWrapper
serverSidePaginationEnabled={props.serverSidePaginationEnabled}
width={props.width}
>
<SearchComponent
value={props.searchKey}
placeholder="Search..."
@ -121,9 +125,9 @@ const TableHeader = (props: TableHeaderProps) => {
)}
{!props.serverSidePaginationEnabled && (
<PaginationWrapper>
{/*<RowWrapper>*/}
{/* Showing {props.currentPageIndex + 1}-{props.pageCount} items*/}
{/*</RowWrapper>*/}
<RowWrapper className="show-page-items">
Showing {props.currentPageIndex + 1}-{props.pageCount} items
</RowWrapper>
<PaginationItemWrapper
disabled={props.currentPageIndex === 0}
onClick={() => {

11
app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
View File

@ -258,12 +258,19 @@ export const CellWrapper = styled.div<{ isHidden: boolean }>`
}
`;
export const TableHeaderWrapper = styled.div`
export const TableHeaderWrapper = styled.div<{
serverSidePaginationEnabled: boolean;
width: number;
}>`
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
overflow-y: scroll;
min-width: ${props =>
props.serverSidePaginationEnabled ? 450 : props.width < 700 ? 525 : 700}px;
.show-page-items {
display: ${props => (props.width < 700 ? "none" : "flex")};
}
`;
export const CommonFunctionsMenuWrapper = styled.div`