Sep 8, 2024 · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,6 +46,8 @@ import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
		import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil";
		import { TableSummary } from "./tableSummaryComp";
		import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
	import Skeleton from "antd/es/skeleton";
	import { SkeletonButtonProps } from "antd/es/skeleton/Button";

		export const EMPTY_ROW_KEY = 'empty_row';

Expand Down Expand Up		@@ -439,6 +441,27 @@ const TableTd = styled.td<{
		}
		`;

	const TableTdLoading = styled(Skeleton.Button)<SkeletonButtonProps & {
	$tableSize?: string;
	}>`
	width: 90% !important;
	display: table !important;

	.ant-skeleton-button {
	min-width: auto !important;
	display: block !important;
	${(props) => props.$tableSize === 'small' && `
	height: 20px !important;
	`}
	${(props) => props.$tableSize === 'middle' && `
	height: 24px !important;
	`}
	${(props) => props.$tableSize === 'large' && `
	height: 28px !important;
	`}
	}
	`;

		const ResizeableTitle = (props: any) => {
		const { onResize, onResizeStop, width, viewModeResizable, ...restProps } = props;
		const [widthChild, setWidthChild] = useState(0);
Expand Down Expand Up		@@ -504,6 +527,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" \|
		columnsStyle: TableColumnStyleType;
		size?: string;
		rowAutoHeight?: boolean;
	customLoading?: boolean;
		onCellClick: (columnName: string, dataIndex: string) => void;
		};

Expand All		@@ -520,6 +544,7 @@ function TableCellView(props: {
		linkStyle: TableColumnLinkStyleType;
		tableSize?: string;
		autoHeight?: boolean;
	loading?: boolean;
		}) {
		const {
		record,
Expand All		@@ -534,6 +559,7 @@ function TableCellView(props: {
		linkStyle,
		tableSize,
		autoHeight,
	loading,
		...restProps
		} = props;

Expand Down Expand Up		@@ -591,7 +617,10 @@ function TableCellView(props: {
		$tableSize={tableSize}
		$autoHeight={autoHeight}
		>
	{children}
	{loading
	? <TableTdLoading block active $tableSize={tableSize} />
	: children
	}
		</TableTd>
		);
		}
Expand Down Expand Up		@@ -629,6 +658,8 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
		width: -1,
		});
		let allColumnFixed = true;
	const { customLoading } = props;

		const columns = props.columns.map((col, index) => {
		const { width, style, linkStyle, cellColorFn, ...restCol } = col;
		const resizeWidth = (resizeData.index === index ? resizeData.width : col.width) ?? 0;
Expand Down Expand Up		@@ -662,7 +693,8 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
		autoHeight: props.rowAutoHeight,
		onClick: () => {
		props.onCellClick(col.titleText, String(col.dataIndex));
	}
	},
	loading: customLoading,
		}),
		onHeaderCell: () => ({
		width: resizeWidth,
Expand Down Expand Up		@@ -733,6 +765,7 @@ export function TableCompView(props: {
		}) {
		const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
		const editorState = useContext(EditorContext);
	const showDataLoadingIndicators = editorState?.getAppSettings().showDataLoadingIndicators;
		const { width, ref } = useResizeDetector({
		refreshMode: "debounce",
		refreshRate: 600,
Expand Down Expand Up		@@ -957,6 +990,12 @@ export function TableCompView(props: {
		}

		const hideScrollbar = !showHorizontalScrollbar && !showVerticalScrollbar;
	const showTableLoading = loading \|\|
	// fixme isLoading type
	((showDataLoadingIndicators \|\| compChildren.showDataLoadSpinner.getView()) &&
	(compChildren.data as any).isLoading()) \|\|
	compChildren.loading.getView();

		return (
		<BackgroundColorContext.Provider value={style.background} >
		<BackgroundWrapper
Expand Down Expand Up		@@ -1018,17 +1057,7 @@ export function TableCompView(props: {
		size={compChildren.size.getView()}
		rowAutoHeight={rowAutoHeight}
		tableLayout="fixed"
	loading={{
	spinning: (
	loading \|\|
	// fixme isLoading type
	(compChildren.showDataLoadSpinner.getView() &&
	(compChildren.data as any).isLoading()) \|\|
	compChildren.loading.getView()
	),
	indicator: <LoadingOutlined spin />,
	size: 'large'
	}}
	customLoading={showTableLoading}
		onCellClick={(columnName: string, dataIndex: string) => {
		comp.children.selectedCell.dispatchChangeValueAction({
		name: columnName,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1507,7 +1507,7 @@ export const de: typeof en = {
		"dynamicColumnConfig": "Säuleneinstellung",
		"dynamicColumnConfigDesc": "Dynamische Spalteneinstellungen. Akzeptiert ein Array von Spaltennamen. In der Standardeinstellung sind alle Spalten sichtbar. Beispiel: [%r@\\\"id%r@\\\", %r@\\\"name%r@\\\"]",
		"position": "Position",
	"showDataLoadSpinner": "Spinner beim Laden von Daten anzeigen",
	"showDataLoadSpinner": "Ladeanzeige anzeigen",
		"showValue": "Wert anzeigen",
		"expandable": "Ausbaufähig",
		"configExpandedView": "Expandierte Ansicht konfigurieren",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -218,6 +218,8 @@ export const en = {
		"className": "CSS Class name",
		"dataTestId": "Individual ID",
		"preventOverwriting": "Prevent overwriting styles",
	"showComponentLoadingIndicators": "Show loading indicators when component load",
	"showDataLoadingIndicators": "Show loading indicators when data load",
		"color": "Color",
		"horizontalGridCells": "Horizontal Grid Cells",
		"showHorizontalScrollbar": "Show Horizontal Scrollbar",
Expand Down Expand Up		@@ -1991,7 +1993,7 @@ export const en = {
		"dynamicColumnConfig": "Visible Columns",
		"dynamicColumnConfigDesc": "Dynamic Column Visibility. Accepts an Array of Column Names. All Columns Are Visible by Default. Example: [\"id\", \"name\"]",
		"position": "Position",
	"showDataLoadSpinner": "Show Spinner During Data Loading",
	"showDataLoadSpinner": "Show Loading Indicator",
		"showValue": "Show Value",
		"expandable": "Expandable",
		"configExpandedView": "Configure Expanded View",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2039,7 +2039,7 @@ export const pt: typeof en = {
		"dynamicColumnConfig": "Configuração de Coluna",
		"dynamicColumnConfigDesc": "Configurações de coluna dinâmica. Aceita um array de nomes de colunas. Todas as colunas são visíveis por padrão. Exemplo: [\"id\", \"name\"]",
		"position": "Posição",
	"showDataLoadSpinner": "Mostrar Spinner Durante o Carregamento de Dados",
	"showDataLoadSpinner": "Mostrar indicador de carregamento",
		"showValue": "Mostrar Valor",
		"expandable": "Expansível",
		"configExpandedView": "Configurar Visualização Expandida",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1536,7 +1536,7 @@ export const zh: typeof en = {
		dynamicColumnConfig: "列设置",
		dynamicColumnConfigDesc: "动态列设置.接受一个列名的数组,默认情况下所有列都可见.\n" + `示例:["id", "name"]`,
		position: "位置",
	showDataLoadSpinner: "数据加载时显示加载指示器",
	showDataLoadSpinner: "显示加载指示器",
		showValue: "显示值",
		expandable: "可展开",
		configExpandedView: "配置展开视图",
Expand Down