Skip to content

Commit

Permalink
Merge pull request #434 from komarovalexander/dev
Browse files Browse the repository at this point in the history
Add oddEvenRows to enable odd and even row styles
  • Loading branch information
komarovalexander authored Aug 22, 2024
2 parents 5d01cb4 + d70e516 commit 6dc8957
Show file tree
Hide file tree
Showing 12 changed files with 40 additions and 9 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const CustomDataRowDemo = () => {
data={dataArray}
rowKeyField={'id'}
sortingMode={SortingMode.Single}
oddEvenRows={true}
childComponents={{
dataRow: {
content: ({rowData, columns}) => {
Expand Down
4 changes: 3 additions & 1 deletion src/Demos/DemosMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand All @@ -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 }) => {
Expand Down
1 change: 1 addition & 0 deletions src/Demos/ManyRowsDemo/ManyRowsDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const ManyRowsDemo = () => {
virtualScrolling= {{
enabled: true
}}
oddEvenRows={true}
childComponents={{
tableWrapper: {
elementAttributes: () => ({ style: { maxHeight: 600 }})
Expand Down
5 changes: 3 additions & 2 deletions src/lib/Components/DataRow/DataRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const DataRow: React.FunctionComponent<IRowProps> = (props) => {
rowKeyValue,
rowReordering,
trRef,
childComponents
childComponents,
isOdd
} = props;
let dataRow = childComponents.dataRow;

Expand All @@ -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 (
Expand Down
11 changes: 9 additions & 2 deletions src/lib/Components/Rows/Rows.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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) => {
Expand All @@ -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();

Expand Down Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/lib/Components/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export interface ITableProps<TData= any> {
height?: number | string;
loading?: ILoadingProps;
paging?: PagingOptions;
oddEvenRows?: boolean;
rowKeyField: string;
treeGroupKeyField?: string;
treeGroupsExpanded?: any[];
Expand Down
8 changes: 6 additions & 2 deletions src/lib/Components/VirtualizedRows/VirtualizedRows.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const VirtualizedRows: React.FunctionComponent<ITableBodyProps> = (props) => {
dispatch,
virtualScrolling,
editableCells,
oddEvenRows,
} = props;

const onFirstRowRendered = (firstRowRef: RefObject<HTMLElement>) => {
Expand All @@ -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>)}
</>
);
Expand Down
4 changes: 4 additions & 0 deletions src/lib/Utils/DataUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
6 changes: 5 additions & 1 deletion src/lib/Utils/Virtualize.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -39,5 +40,8 @@ export const getVirtualized = (virtualScrolling: VirtualScrolling, data: any[],
beginHeight,
endHeight,
virtualizedData,
isFirstVisibleRowOdd: oddEvenRows
? checkRowOdd(data, virtualizedData[0])
: undefined
};
};
2 changes: 2 additions & 0 deletions src/lib/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ export interface ITableBodyProps<TData= any> {
groupedColumns: Column[];
groups?: Group[];
groupsExpanded?: any[][];
oddEvenRows?: boolean;
rowKeyField: string;
rowReordering: boolean;
selectedRows: any[];
Expand Down Expand Up @@ -226,6 +227,7 @@ export interface INewRowProps {
}

export interface IRowProps extends IRowCommonProps {
isOdd?: boolean;
format?: FormatFunc;
groupColumnsCount: number;
isDetailsRowShown: boolean;
Expand Down
4 changes: 4 additions & 0 deletions src/lib/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit 6dc8957

Please sign in to comment.