From d70e51663db6c837f9c2d6ad7574a831fc5736a3 Mon Sep 17 00:00:00 2001 From: Alexander Komarov Date: Thu, 22 Aug 2024 16:31:11 +0300 Subject: [PATCH] Add oddEvenRows to enable odd and even row styles --- package.json | 2 +- src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx | 1 + src/Demos/DemosMenu.tsx | 4 +++- src/Demos/ManyRowsDemo/ManyRowsDemo.tsx | 1 + src/lib/Components/DataRow/DataRow.tsx | 5 +++-- src/lib/Components/Rows/Rows.tsx | 11 +++++++++-- src/lib/Components/Table/Table.tsx | 1 + .../Components/VirtualizedRows/VirtualizedRows.tsx | 8 ++++++-- src/lib/Utils/DataUtils.ts | 4 ++++ src/lib/Utils/Virtualize.ts | 6 +++++- src/lib/props.ts | 2 ++ src/lib/style.scss | 4 ++++ 12 files changed, 40 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 79b6fa9a..f80ee95f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ka-table", - "version": "11.0.3", + "version": "11.1.0", "license": "MIT", "repository": "github:komarovalexander/ka-table", "homepage": "https://komarovalexander.github.io/ka-table/#/overview", diff --git a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx index 0a759a3f..eb2b5bf2 100644 --- a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx +++ b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx @@ -29,6 +29,7 @@ const CustomDataRowDemo = () => { data={dataArray} rowKeyField={'id'} sortingMode={SortingMode.Single} + oddEvenRows={true} childComponents={{ dataRow: { content: ({rowData, columns}) => { diff --git a/src/Demos/DemosMenu.tsx b/src/Demos/DemosMenu.tsx index 27c4e11c..bb86e655 100644 --- a/src/Demos/DemosMenu.tsx +++ b/src/Demos/DemosMenu.tsx @@ -17,6 +17,7 @@ const synonyms: { [value: string]: any[] } = { 'ColumnSettingsDemo': ['Hide', 'Show', 'Action Creator'], 'CustomCellDemo': ['Center', 'Width', 'openEditor', 'Format', 'Number', 'Money', 'Dollar'], 'CustomEditorDemo': ['cellEditor'], + 'CustomDataRowDemo': ['odd'], 'CustomThemeDemo': ['Color', 'Dark', 'styles'], 'EditingRowDemo': ['Image', 'Button', 'Btn'], 'EventsDemo': ['Action', 'Click'], @@ -34,7 +35,8 @@ const synonyms: { [value: string]: any[] } = { 'TabIndexDemo': ['keyboard navigation'], 'StateStoringDemo': ['store', 'localStorage'], 'RemoteDataEditingDemo': ['query'], - 'SortingExtendedDemo': ['Multiple'] + 'SortingExtendedDemo': ['Multiple'], + 'ManyRowsDemo': ['odd', 'many'] }; const DemosMenu: React.FC = ({ cases }) => { diff --git a/src/Demos/ManyRowsDemo/ManyRowsDemo.tsx b/src/Demos/ManyRowsDemo/ManyRowsDemo.tsx index bf83831e..08c5dc09 100644 --- a/src/Demos/ManyRowsDemo/ManyRowsDemo.tsx +++ b/src/Demos/ManyRowsDemo/ManyRowsDemo.tsx @@ -26,6 +26,7 @@ const ManyRowsDemo = () => { virtualScrolling= {{ enabled: true }} + oddEvenRows={true} childComponents={{ tableWrapper: { elementAttributes: () => ({ style: { maxHeight: 600 }}) diff --git a/src/lib/Components/DataRow/DataRow.tsx b/src/lib/Components/DataRow/DataRow.tsx index 4f6dedad..e842bf0b 100644 --- a/src/lib/Components/DataRow/DataRow.tsx +++ b/src/lib/Components/DataRow/DataRow.tsx @@ -17,7 +17,8 @@ const DataRow: React.FunctionComponent = (props) => { rowKeyValue, rowReordering, trRef, - childComponents + childComponents, + isOdd } = props; let dataRow = childComponents.dataRow; @@ -34,7 +35,7 @@ const DataRow: React.FunctionComponent = (props) => { } const { elementAttributes, content } = getElementCustomization({ - className: `${defaultOptions.css.row} ${isSelectedRow ? defaultOptions.css.rowSelected : ''}` + className: `${defaultOptions.css.row} ${isSelectedRow ? defaultOptions.css.rowSelected : ''}${isOdd === undefined ? '' : isOdd ? ' ka-odd' : ' ka-even'}` }, props, dataRow); return ( diff --git a/src/lib/Components/Rows/Rows.tsx b/src/lib/Components/Rows/Rows.tsx index 354c4e70..799b1a1d 100644 --- a/src/lib/Components/Rows/Rows.tsx +++ b/src/lib/Components/Rows/Rows.tsx @@ -1,4 +1,5 @@ import React, { RefObject, useEffect, useRef } from 'react'; +import { checkRowOdd, getValueByField } from '../../Utils/DataUtils'; import { getGroupMark, getGroupText, groupSummaryMark } from '../../Utils/GroupUtils'; import { treeDataMark, treeGroupMark } from '../../Utils/TreeUtils'; @@ -7,11 +8,11 @@ import GroupRow from '../GroupRow/GroupRow'; import { GroupSummaryRow } from '../GroupSummaryRow/GroupSummaryRow'; import { ITableBodyProps } from '../../props'; import { getRowEditableCells } from '../../Utils/FilterUtils'; -import { getValueByField } from '../../Utils/DataUtils'; export interface IRowsProps extends ITableBodyProps { onFirstRowRendered: (firstRowRef: RefObject) => any; treeGroupsExpanded?: any[]; + isFirstRowOdd?: boolean; } const Rows: React.FunctionComponent = (props) => { @@ -26,13 +27,15 @@ const Rows: React.FunctionComponent = (props) => { groupedColumns, groups = [], groupsExpanded = [], + isFirstRowOdd, onFirstRowRendered, treeGroupsExpanded, rowKeyField, rowReordering, selectedRows, validation, - treeExpandButtonColumnKey + treeExpandButtonColumnKey, + oddEvenRows } = props; const groupMark = getGroupMark(); @@ -77,8 +80,12 @@ const Rows: React.FunctionComponent = (props) => { const isSelectedRow = selectedRows.some((s) => s === rowKeyValue); const isDetailsRowShown = detailsRows.some((r) => r === rowKeyValue); const rowEditableCells = getRowEditableCells(rowKeyValue, editableCells); + const isOdd = oddEvenRows + ? isFirstRowOdd ? checkRowOdd(data, rowData) : !checkRowOdd(data, rowData) + : undefined; const dataRow = ( { height?: number | string; loading?: ILoadingProps; paging?: PagingOptions; + oddEvenRows?: boolean; rowKeyField: string; treeGroupKeyField?: string; treeGroupsExpanded?: any[]; diff --git a/src/lib/Components/VirtualizedRows/VirtualizedRows.tsx b/src/lib/Components/VirtualizedRows/VirtualizedRows.tsx index a745931a..cd6425d0 100644 --- a/src/lib/Components/VirtualizedRows/VirtualizedRows.tsx +++ b/src/lib/Components/VirtualizedRows/VirtualizedRows.tsx @@ -13,6 +13,7 @@ const VirtualizedRows: React.FunctionComponent = (props) => { dispatch, virtualScrolling, editableCells, + oddEvenRows, } = props; const onFirstRowRendered = (firstRowRef: RefObject) => { @@ -37,10 +38,12 @@ const VirtualizedRows: React.FunctionComponent = (props) => { let virtualizedData = data; let virtualized; + let isFirstVisibleRowOdd; if (virtualScrolling) { const isNewRowShown = !!getNewRowEditableCells(editableCells)?.length; - virtualized = getVirtualized(virtualScrolling, virtualizedData, isNewRowShown); + virtualized = getVirtualized(virtualScrolling, virtualizedData, isNewRowShown, oddEvenRows); virtualizedData = virtualized.virtualizedData; + isFirstVisibleRowOdd = virtualized.isFirstVisibleRowOdd; } return ( <> @@ -48,7 +51,8 @@ const VirtualizedRows: React.FunctionComponent = (props) => { + onFirstRowRendered={onFirstRowRendered} + isFirstRowOdd={isFirstVisibleRowOdd}/> {virtualized && virtualized.endHeight !== 0 && ()} ); diff --git a/src/lib/Utils/DataUtils.ts b/src/lib/Utils/DataUtils.ts index f6824c85..f4704283 100644 --- a/src/lib/Utils/DataUtils.ts +++ b/src/lib/Utils/DataUtils.ts @@ -89,3 +89,7 @@ export const reorderData = (data: any[], getKey: (d: any) => any, keyValue: any, const targetIndex = data.findIndex(d => getKey(d) === targetKeyValue); return reorderDataByIndex(data, getKey, keyValue, targetIndex); }; + +export const checkRowOdd = (data: any[], rowData: any) => { + return data?.indexOf(rowData) % 2 !== 0; +} diff --git a/src/lib/Utils/Virtualize.ts b/src/lib/Utils/Virtualize.ts index db6d26fc..58be6100 100644 --- a/src/lib/Utils/Virtualize.ts +++ b/src/lib/Utils/Virtualize.ts @@ -1,10 +1,11 @@ import { VirtualScrolling } from '../Models/VirtualScrolling'; +import { checkRowOdd } from './DataUtils'; export const isVirtualScrollingEnabled = (virtualScrolling?: VirtualScrolling) => { return virtualScrolling && virtualScrolling.enabled !== false; } -export const getVirtualized = (virtualScrolling: VirtualScrolling, data: any[], isNewRowShown?: boolean) => { +export const getVirtualized = (virtualScrolling: VirtualScrolling, data: any[], isNewRowShown?: boolean, oddEvenRows?: boolean) => { const virtualizedData: any[] = []; const { scrollTop = 0, bottomInvisibleCount = 5, topInvisibleCount = 0 } = virtualScrolling; let { tbodyHeight = 600 } = virtualScrolling; @@ -39,5 +40,8 @@ export const getVirtualized = (virtualScrolling: VirtualScrolling, data: any[], beginHeight, endHeight, virtualizedData, + isFirstVisibleRowOdd: oddEvenRows + ? checkRowOdd(data, virtualizedData[0]) + : undefined }; }; diff --git a/src/lib/props.ts b/src/lib/props.ts index ce3851e9..c08ce151 100644 --- a/src/lib/props.ts +++ b/src/lib/props.ts @@ -195,6 +195,7 @@ export interface ITableBodyProps { groupedColumns: Column[]; groups?: Group[]; groupsExpanded?: any[][]; + oddEvenRows?: boolean; rowKeyField: string; rowReordering: boolean; selectedRows: any[]; @@ -226,6 +227,7 @@ export interface INewRowProps { } export interface IRowProps extends IRowCommonProps { + isOdd?: boolean; format?: FormatFunc; groupColumnsCount: number; isDetailsRowShown: boolean; diff --git a/src/lib/style.scss b/src/lib/style.scss index fc7b6181..088b3d26 100644 --- a/src/lib/style.scss +++ b/src/lib/style.scss @@ -138,6 +138,10 @@ border-top: $ka-row-border-size solid $ka-border-color; } +.ka-even { + background-color: $ka-border-color; +} + .ka-row:hover { background-color: $ka-row-hover-background-color; }