Merge pull request #434 from komarovalexander/dev

Add oddEvenRows to enable odd and even row styles
komarovalexander · Aug 22, 2024 · 6dc8957 · 6dc8957
2 parents 5d01cb4 + d70e516
commit 6dc8957
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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<IDemosMenuProps> = ({ cases }) => {

diff --git 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
@@ -17,7 +17,8 @@ const DataRow: React.FunctionComponent<IRowProps> = (props) => {
         rowKeyValue,
         rowReordering,
         trRef,
-        childComponents
+        childComponents,
+        isOdd
     } = props;
     let dataRow = childComponents.dataRow;
 
@@ -34,7 +35,7 @@ const DataRow: React.FunctionComponent<IRowProps> = (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
@@ -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<HTMLElement>) => any;
     treeGroupsExpanded?: any[];
+    isFirstRowOdd?: boolean;
 }
 
 const Rows: React.FunctionComponent<IRowsProps> = (props) => {
@@ -26,13 +27,15 @@ const Rows: React.FunctionComponent<IRowsProps> = (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<IRowsProps> = (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 = (
                         <DataAndDetailsRows
+                            isOdd={isOdd}
                             childComponents={props.childComponents}
                             columns={props.columns}
                             dispatch={dispatch}

diff --git a/src/lib/Components/Table/Table.tsx b/src/lib/Components/Table/Table.tsx
@@ -46,6 +46,7 @@ export interface ITableProps<TData= any> {
     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
@@ -13,6 +13,7 @@ const VirtualizedRows: React.FunctionComponent<ITableBodyProps> = (props) => {
         dispatch,
         virtualScrolling,
         editableCells,
+        oddEvenRows,
     } = props;
 
     const onFirstRowRendered = (firstRowRef: RefObject<HTMLElement>) => {
@@ -37,18 +38,21 @@ const VirtualizedRows: React.FunctionComponent<ITableBodyProps> = (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 (
         <>
             {virtualized && virtualized.beginHeight !== 0 && <tr style={{height: virtualized.beginHeight}}><td style={{height: virtualized.beginHeight}}/></tr>}
             <Rows
                 {...props}
                 data={virtualizedData}
-                onFirstRowRendered={onFirstRowRendered}/>
+                onFirstRowRendered={onFirstRowRendered}
+                isFirstRowOdd={isFirstVisibleRowOdd}/>
             {virtualized && virtualized.endHeight !== 0 && (<tr style={{height: virtualized.endHeight}}><td style={{height: virtualized.endHeight}}/></tr>)}
         </>
     );

diff --git 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
@@ -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
@@ -195,6 +195,7 @@ export interface ITableBodyProps<TData= any> {
     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
@@ -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;
 }