diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx index 9abeed07b0..d28f7442c1 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx +++ b/app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx @@ -5,7 +5,6 @@ import type { Row as ReactTableRowType, } from "react-table"; import type { ReactElementType } from "react-window"; -import SimpleBar from "simplebar-react"; import "simplebar-react/dist/simplebar.min.css"; import type { ReactTableColumnProps, TableSizes } from "./Constants"; import { MULTISELECT_CHECKBOX_WIDTH, TABLE_SCROLLBAR_WIDTH } from "./Constants"; @@ -37,14 +36,13 @@ type StaticTableProps = TableColumnHeaderProps & { isAddRowInProgress: boolean; headerProps?: TableColumnHeaderProps | Record; totalColumnsWidth?: number; - scrollContainerStyles: any; useVirtual: boolean; tableBodyRef?: React.MutableRefObject; }; -const StaticTable = (props: StaticTableProps, ref: React.Ref) => { +const StaticTable = (props: StaticTableProps) => { return ( - + <> ) => { borderRadius={props.borderRadius} columns={props.columns} getTableBodyProps={props.getTableBodyProps} - height={props.height} + height={props.pageSize * props.tableSizes.ROW_HEIGHT} isAddRowInProgress={props.isAddRowInProgress} multiRowSelection={!!props.multiRowSelection} pageSize={props.pageSize} @@ -91,7 +89,7 @@ const StaticTable = (props: StaticTableProps, ref: React.Ref) => { useVirtual={props.useVirtual} width={props.width - TABLE_SCROLLBAR_WIDTH / 2} /> - + ); }; diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/Table.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/Table.tsx index 5175b57698..6296b7d5fc 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/component/Table.tsx +++ b/app/client/src/widgets/wds/WDSTableWidget/component/Table.tsx @@ -28,7 +28,6 @@ import { import { Colors } from "constants/Colors"; import type { EventType } from "constants/AppsmithActionConstants/ActionConstants"; import type { EditableCell, TableVariant } from "../constants"; -import SimpleBar from "simplebar-react"; import "simplebar-react/dist/simplebar.min.css"; import { createGlobalStyle } from "styled-components"; import { Classes as PopOver2Classes } from "@blueprintjs/popover2"; @@ -335,63 +334,56 @@ export function Table(props: TableProps) { widgetId={props.widgetId} /> {isHeaderVisible && ( - - - - - + + )}
{!shouldUseVirtual && ( @@ -417,7 +409,6 @@ export function Table(props: TableProps) { prepareRow={prepareRow} primaryColumnId={props.primaryColumnId} rowSelectionState={rowSelectionState} - scrollContainerStyles={scrollContainerStyles} selectTableRow={props.selectTableRow} selectedRowIndex={props.selectedRowIndex} selectedRowIndices={props.selectedRowIndices} diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/index.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/index.tsx index e887f55f77..9ccda579a4 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/index.tsx +++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/index.tsx @@ -1,5 +1,4 @@ -import type { Ref } from "react"; -import React from "react"; +import React, { useLayoutEffect } from "react"; import type { Row as ReactTableRowType, TableBodyPropGetter, @@ -7,11 +6,9 @@ import type { } from "react-table"; import type { ListChildComponentProps, ReactElementType } from "react-window"; import { FixedSizeList, areEqual } from "react-window"; -import { WIDGET_PADDING } from "constants/WidgetConstants"; import { EmptyRows, EmptyRow, Row } from "./Row"; import type { ReactTableColumnProps, TableSizes } from "../Constants"; import type { HeaderComponentProps } from "../Table"; -import type SimpleBar from "simplebar-react"; export type BodyContextType = { accentColor: string; @@ -81,36 +78,53 @@ interface BodyPropsType { innerElementType?: ReactElementType; } -const TableVirtualBodyComponent = React.forwardRef( - (props: BodyPropsType, ref: Ref) => { - return ( -
- - {rowRenderer} - -
- ); - }, -); +const TableVirtualBodyComponent = (props: BodyPropsType) => { + const ref = React.useRef(null); + const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = + React.useState(0); + + useLayoutEffect(() => { + if (ref.current) { + const horizontalScrollbar = ref.current; + if (horizontalScrollbar) { + setHorizontalScrollbarHeight( + horizontalScrollbar.offsetHeight - horizontalScrollbar.clientHeight, + ); + } + } + }, [ref.current]); + + return ( + + {rowRenderer} + + ); +}; const TableBodyComponent = (props: BodyPropsType) => { return ( -
+
{props.rows.map((row, index) => { return ; })} @@ -121,86 +135,78 @@ const TableBodyComponent = (props: BodyPropsType) => { ); }; -export const TableBody = React.forwardRef( - ( - props: BodyPropsType & BodyContextType & { useVirtual: boolean }, - ref: Ref, - ) => { - const { - accentColor, - borderRadius, - canFreezeColumn, - columns, - disableDrag, - editMode, - enableDrag, - handleAllRowSelectClick, - handleColumnFreeze, - handleReorderColumn, - headerGroups, - isAddRowInProgress, - isResizingColumn, - isSortable, - multiRowSelection, - prepareRow, - primaryColumnId, - rows, - rowSelectionState, - selectedRowIndex, - selectedRowIndices, - selectTableRow, - sortTableColumn, - subPage, - useVirtual, - widgetId, - width, - ...restOfProps - } = props; +export const TableBody = ( + props: BodyPropsType & BodyContextType & { useVirtual: boolean }, +) => { + const { + accentColor, + borderRadius, + canFreezeColumn, + columns, + disableDrag, + editMode, + enableDrag, + handleAllRowSelectClick, + handleColumnFreeze, + handleReorderColumn, + headerGroups, + isAddRowInProgress, + isResizingColumn, + isSortable, + multiRowSelection, + prepareRow, + primaryColumnId, + rows, + rowSelectionState, + selectedRowIndex, + selectedRowIndices, + selectTableRow, + sortTableColumn, + subPage, + useVirtual, + widgetId, + width, + ...restOfProps + } = props; - return ( - - {useVirtual ? ( - - ) : ( - - )} - - ); - }, -); + return ( + + {useVirtual ? ( + + ) : ( + + )} + + ); +}; diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx index cebe79dee5..7f5a99b587 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx +++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx @@ -15,12 +15,10 @@ import { TABLE_SIZES, ImageSizes, MULTISELECT_CHECKBOX_WIDTH, - TABLE_SCROLLBAR_HEIGHT, - TABLE_SCROLLBAR_WIDTH, } from "./Constants"; import type { Color } from "constants/Colors"; import { Colors } from "constants/Colors"; -import { hideScrollbar, invisible } from "constants/DefaultTheme"; +import { invisible } from "constants/DefaultTheme"; import { lightenColor, darkenColor } from "widgets/WidgetUtils"; import { FontStyleTypes } from "constants/WidgetConstants"; import { Classes } from "@blueprintjs/core"; @@ -63,34 +61,7 @@ export const TableWrapper = styled.div<{ overflow: hidden; /* wriiten exclusively for safari */ - position: sticky; - - .simplebar-track { - opacity: 0.7; - &.simplebar-horizontal { - height: ${TABLE_SCROLLBAR_HEIGHT}px; - .simplebar-scrollbar { - height: 5px; - } - &.simplebar-hover { - height: 10px; - & .simplebar-scrollbar { - height: 8px; - } - } - } - - &.simplebar-vertical { - direction: rtl; - top: ${(props) => props.tableSizes.TABLE_HEADER_HEIGHT - 10}px; - width: ${TABLE_SCROLLBAR_WIDTH}px; - &.simplebar-hover { - width: 10px; - & .simplebar-scrollbar { - width: 11px; - } - } - } + position: sticky; } .tableWrap { height: 100%; @@ -98,8 +69,11 @@ export const TableWrapper = styled.div<{ position: relative; width: 100%; overflow: auto hidden; + scrollbar-color: initial; + container-type: inline-size; + &.virtual { - ${hideScrollbar}; + overflow: hidden; } } .table { @@ -108,8 +82,7 @@ export const TableWrapper = styled.div<{ position: relative; display: table; width: 100%; - ${hideScrollbar}; - .tbody { + tab .tbody { height: fit-content; width: fit-content; } @@ -204,10 +177,6 @@ export const TableWrapper = styled.div<{ } } - .virtual-list { - ${hideScrollbar}; - } - .column-freeze { .body { position: relative; @@ -263,10 +232,6 @@ export const TableWrapper = styled.div<{ } } - .tbody .tr:last-child .td { - border-bottom: none; - } - .draggable-header, .hidden-header { width: 100%; diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/VirtualTable.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/VirtualTable.tsx index 44d6c8ed07..5afc311fa7 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/component/VirtualTable.tsx +++ b/app/client/src/widgets/wds/WDSTableWidget/component/VirtualTable.tsx @@ -4,8 +4,6 @@ import type { TableBodyProps, Row as ReactTableRowType, } from "react-table"; -import SimpleBar from "simplebar-react"; -import "simplebar-react/dist/simplebar.min.css"; import type { ReactTableColumnProps, TableSizes } from "./Constants"; import type { TableColumnHeaderProps } from "./header/TableColumnHeader"; import VirtualTableInnerElement from "./header/VirtualTableInnerElement"; @@ -37,47 +35,42 @@ type VirtualTableProps = TableColumnHeaderProps & { useVirtual: boolean; }; -const VirtualTable = (props: VirtualTableProps, ref: React.Ref) => { +const VirtualTable = (props: VirtualTableProps) => { return ( - - {({ scrollableNodeRef }) => ( - - )} - + ); }; diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts index 7a23321933..c836f03a95 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts @@ -35,4 +35,5 @@ export const defaultsConfig = { delimiter: ",", version: 2, inlineEditingSaveOption: InlineEditingSaveOptions.ROW_LEVEL, + pageSize: 8, } as unknown as WidgetDefaultProps; diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts index e37a2d8f5e..96e3ed67ba 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts @@ -146,6 +146,17 @@ export const contentConfig = [ { sectionName: "Pagination", children: [ + { + propertyName: "pageSize", + helpText: "Number of rows to be displayed at a time", + label: "Page size", + controlType: "NUMERIC_INPUT", + isJSConvertible: true, + defaultValue: 10, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.NUMBER }, + }, { propertyName: "isVisiblePagination", helpText: "Toggle visibility of the pagination", diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/styleConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/styleConfig.ts index 0fcb0147fd..38bfab12f8 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/styleConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/styleConfig.ts @@ -2,35 +2,6 @@ import { ValidationTypes } from "constants/WidgetValidation"; import { updateColumnStyles } from "../../widget/propertyUtils"; export const styleConfig = [ - { - sectionName: "General", - children: [ - { - propertyName: "compactMode", - helpText: "Selects row height", - label: "Default row height", - controlType: "ICON_TABS", - fullWidth: true, - defaultValue: "DEFAULT", - isBindProperty: true, - isTriggerProperty: false, - options: [ - { - label: "Short", - value: "SHORT", - }, - { - label: "Default", - value: "DEFAULT", - }, - { - label: "Tall", - value: "TALL", - }, - ], - }, - ], - }, { sectionName: "Text formatting", children: [ diff --git a/app/client/src/widgets/wds/WDSTableWidget/widget/derived.js b/app/client/src/widgets/wds/WDSTableWidget/widget/derived.js index f7b282c80e..8f90084a27 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/widget/derived.js +++ b/app/client/src/widgets/wds/WDSTableWidget/widget/derived.js @@ -150,46 +150,6 @@ export default { return indices.map((index) => _.omit(rows[index], keysToBeOmitted)); }, // - getPageSize: (props, moment, _) => { - const TABLE_SIZES = { - DEFAULT: { - COLUMN_HEADER_HEIGHT: 32, - TABLE_HEADER_HEIGHT: 38, - ROW_HEIGHT: 40, - ROW_FONT_SIZE: 14, - VERTICAL_PADDING: 6, - EDIT_ICON_TOP: 10, - }, - SHORT: { - COLUMN_HEADER_HEIGHT: 32, - TABLE_HEADER_HEIGHT: 38, - ROW_HEIGHT: 30, - ROW_FONT_SIZE: 12, - VERTICAL_PADDING: 0, - EDIT_ICON_TOP: 5, - }, - TALL: { - COLUMN_HEADER_HEIGHT: 32, - TABLE_HEADER_HEIGHT: 38, - ROW_HEIGHT: 60, - ROW_FONT_SIZE: 18, - VERTICAL_PADDING: 16, - EDIT_ICON_TOP: 21, - }, - }; - const compactMode = props.compactMode || "DEFAULT"; - const componentHeight = 300; - const tableSizes = TABLE_SIZES[compactMode]; - - let pageSize = - (componentHeight - - tableSizes.TABLE_HEADER_HEIGHT - - tableSizes.COLUMN_HEADER_HEIGHT) / - tableSizes.ROW_HEIGHT; - - return pageSize % 1 > 0.3 ? Math.ceil(pageSize) : Math.floor(pageSize); - }, - // getProcessedTableData: (props, moment, _) => { let data; diff --git a/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx index e3fe71f66b..d1178bd553 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx @@ -221,7 +221,6 @@ export class WDSTableWidget extends BaseWidget { selectedRow: `{{(()=>{${derivedProperties.getSelectedRow}})()}}`, triggeredRow: `{{(()=>{${derivedProperties.getTriggeredRow}})()}}`, selectedRows: `{{(()=>{${derivedProperties.getSelectedRows}})()}}`, - pageSize: `{{(()=>{${derivedProperties.getPageSize}})()}}`, triggerRowSelection: "{{!!this.onRowSelected}}", processedTableData: `{{(()=>{${derivedProperties.getProcessedTableData}})()}}`, orderedTableColumns: `{{(()=>{${derivedProperties.getOrderedTableColumns}})()}}`,