Skip to content

Commit 681e3b6

Browse files
anitta-keyvalueanitta-keyvalue
authored
feat: Expand icon, filter theme props (#11)
* feat: Add style changes for filter * feat: Add changes for custom expand button
1 parent 60898bc commit 681e3b6

File tree

8 files changed

+69
-41
lines changed

8 files changed

+69
-41
lines changed

‎src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -421,6 +421,11 @@ const App: React.FC = () => {
421421
return <div>Custom Pagination </div>;
422422
};
423423

424+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
425+
const renderCustomExpandButton = () => {
426+
return <div>➡</div>;
427+
};
428+
424429
return (
425430
<div className="app" style={{ backgroundColor: theme.colors?.background }}>
426431
<header

‎src/components/MultiLevelTable.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ interface MultiLevelTableProps {
4242
sortable?: boolean;
4343
ascendingIcon?: React.ReactNode;
4444
descendingIcon?: React.ReactNode;
45+
expandIcon?: React.ReactNode;
4546
}
4647

4748
/**
@@ -59,6 +60,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
5960
sortable = false,
6061
ascendingIcon,
6162
descendingIcon,
63+
expandIcon,
6264
}) => {
6365
const mergedTheme = mergeThemeProps(defaultThemeProps, theme);
6466
const [filterInput, setFilterInput] = useState("");
@@ -184,6 +186,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
184186
onToggle={() => hasChildren && toggleRow(child.id)}
185187
level={level}
186188
theme={mergedTheme}
189+
expandIcon={expandIcon}
187190
/>
188191
{renderNestedRows(child.id, level + 1)}
189192
</React.Fragment>
@@ -216,6 +219,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
216219
isExpanded={expandedRows.has(parentId)}
217220
onToggle={() => hasChildren && toggleRow(parentId)}
218221
theme={mergedTheme}
222+
expandIcon={expandIcon}
219223
/>
220224
{renderNestedRows(parentId)}
221225
</React.Fragment>

‎src/components/TableCell.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import '../styles/TableCell.css';
1818
* @property {() => void} onToggle - Function to toggle row expansion
1919
* @property {number} [paddingLeft=0] - Left padding for nested cells
2020
* @property {ThemeProps} theme - Theme properties
21+
* @property {React.ReactNode} [expandIcon] - Custom expand icon
2122
*/
2223
interface TableCellProps {
2324
cell: Cell<DataItem>;
@@ -26,6 +27,7 @@ interface TableCellProps {
2627
onToggle: () => void;
2728
paddingLeft?: number;
2829
theme: ThemeProps;
30+
expandIcon?: React.ReactNode;
2931
}
3032

3133
/**
@@ -40,7 +42,8 @@ export const TableCell: React.FC<TableCellProps> = ({
4042
isExpanded,
4143
onToggle,
4244
paddingLeft = 0,
43-
theme
45+
theme,
46+
expandIcon,
4447
}) => {
4548
const { key, ...cellProps } = cell.getCellProps();
4649

@@ -67,7 +70,7 @@ export const TableCell: React.FC<TableCellProps> = ({
6770
onClick={handleExpandClick}
6871
className="expand-button"
6972
>
70-
<ExpandIcon isExpanded={isExpanded} theme={theme} />
73+
{expandIcon || <ExpandIcon isExpanded={isExpanded} theme={theme} />}
7174
</button>
7275
) : <div className="expand-button" />}
7376
{cell.render('Cell')}

‎src/components/TableHeader.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,9 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
100100
onChange={(e) => column.setFilter?.(e.target.value)}
101101
placeholder={`Filter ${column.title || column.id}...`}
102102
style={{
103-
color: theme.table?.header?.textColor,
104-
borderColor: theme.table?.header?.textColor,
103+
color: theme.table?.filter?.textColor,
104+
borderColor: theme.table?.filter?.borderColor,
105+
backgroundColor: theme.table?.filter?.background,
105106
}}
106107
/>
107108
</div>

‎src/components/TableRow.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import "../styles/TableRow.css";
1919
* @property {() => void} onToggle - Function to toggle row expansion
2020
* @property {number} [level=0] - Nesting level of the row
2121
* @property {ThemeProps} theme - Theme properties
22+
* @property {React.ReactNode} [expandIcon] - Custom expand icon
2223
*/
2324
interface TableRowProps {
2425
row: Row<DataItem> | DataItem;
@@ -28,6 +29,7 @@ interface TableRowProps {
2829
onToggle: () => void;
2930
level?: number;
3031
theme: ThemeProps;
32+
expandIcon?: React.ReactNode;
3133
}
3234

3335
/**
@@ -44,6 +46,7 @@ export const TableRow: React.FC<TableRowProps> = ({
4446
onToggle,
4547
level = 0,
4648
theme,
49+
expandIcon,
4750
}) => {
4851
const getRowClassName = () => {
4952
const classes = ["table-row"];
@@ -91,16 +94,15 @@ export const TableRow: React.FC<TableRowProps> = ({
9194
>
9295
<div className="table-cell-content">
9396
{hasChildren && index === 0 ? (
94-
<button
95-
onClick={handleExpandClick}
96-
className="expand-button"
97-
>
98-
<ExpandIcon isExpanded={isExpanded} theme={theme} />
97+
<button onClick={handleExpandClick} className="expand-button">
98+
{expandIcon || (
99+
<ExpandIcon isExpanded={isExpanded} theme={theme} />
100+
)}
99101
</button>
100102
) : (
101103
<div className="expand-button" />
102104
)}
103-
{column.render
105+
{column.render
104106
? column.render(displayValue, dataItem)
105107
: String(displayValue)}
106108
</div>
@@ -131,6 +133,7 @@ export const TableRow: React.FC<TableRowProps> = ({
131133
onToggle={onToggle}
132134
paddingLeft={level > 0 ? 32 + level * 16 : 0}
133135
theme={theme}
136+
expandIcon={expandIcon}
134137
/>
135138
))}
136139
</tr>

‎src/defaultThemeProps.ts‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,30 @@ import type { ThemeProps } from './types/theme';
22

33
export const defaultThemeProps: ThemeProps = {
44
colors: {
5-
primaryColor: '#007bff',
6-
textColor: '#212529',
7-
borderColor: '#dee2e6',
85
background: '#ffffff',
6+
primaryColor: '#3498db',
7+
borderColor: '#e0e0e0',
98
},
109
table: {
1110
header: {
12-
background: '#e9ecef',
13-
textColor: '#495057',
14-
borderColor: '#dee2e6',
11+
background: '#2c3e50',
12+
textColor: '#ffffff',
1513
},
1614
row: {
1715
mainBackground: '#ffffff',
1816
nestedBackground: '#f8f9fa',
19-
expandedBackground: '#e9ecef',
20-
hoverBackground: '#f8f9fa',
17+
expandedBackground: '#f1f3f5',
2118
},
2219
cell: {
23-
textColor: '#212529',
24-
borderColor: '#dee2e6',
25-
nestedPadding: '1rem',
20+
textColor: '#333333',
21+
borderColor: '#e0e0e0',
22+
},
23+
filter: {
24+
background: 'transparent',
25+
textColor: '#ffffff',
26+
borderColor: '#ffffff',
27+
focusBorderColor: '#3498db',
28+
placeholderColor: 'rgba(255, 255, 255, 0.7)',
2629
},
2730
},
2831
pagination: {

‎src/themes.ts‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,30 @@ import type { ThemeProps } from './types/theme';
22

33
export const lightTheme: ThemeProps = {
44
colors: {
5+
background: '#ffffff',
56
primaryColor: '#007bff',
6-
textColor: '#212529',
77
borderColor: '#dee2e6',
8-
background: '#ffffff',
98
},
109
table: {
1110
header: {
1211
background: '#e9ecef',
1312
textColor: '#495057',
13+
},
14+
cell: {
15+
textColor: '#212529',
1416
borderColor: '#dee2e6',
1517
},
1618
row: {
1719
mainBackground: '#ffffff',
1820
nestedBackground: '#f8f9fa',
1921
expandedBackground: '#e9ecef',
20-
hoverBackground: '#f8f9fa',
2122
},
22-
cell: {
23-
textColor: '#212529',
24-
borderColor: '#dee2e6',
25-
nestedPadding: '1rem',
23+
filter: {
24+
background: 'transparent',
25+
textColor: '#495057',
26+
borderColor: '#495057',
27+
focusBorderColor: '#007bff',
28+
placeholderColor: 'rgba(73, 80, 87, 0.7)',
2629
},
2730
},
2831
pagination: {
@@ -47,27 +50,30 @@ export const lightTheme: ThemeProps = {
4750

4851
export const darkTheme: ThemeProps = {
4952
colors: {
53+
background: '#212529',
5054
primaryColor: '#0d6efd',
51-
textColor: '#ffffff',
5255
borderColor: '#495057',
53-
background: '#212529',
5456
},
5557
table: {
5658
header: {
5759
background: '#2b3035',
5860
textColor: '#e9ecef',
61+
},
62+
cell: {
63+
textColor: '#e9ecef',
5964
borderColor: '#495057',
6065
},
6166
row: {
6267
mainBackground: '#343a40',
6368
nestedBackground: '#2b3035',
6469
expandedBackground: '#212529',
65-
hoverBackground: '#2b3035',
6670
},
67-
cell: {
71+
filter: {
72+
background: 'transparent',
6873
textColor: '#e9ecef',
69-
borderColor: '#495057',
70-
nestedPadding: '1rem',
74+
borderColor: '#e9ecef',
75+
focusBorderColor: '#0d6efd',
76+
placeholderColor: 'rgba(233, 236, 239, 0.7)',
7177
},
7278
},
7379
pagination: {

‎src/types/theme.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,32 @@ export type Theme = {
33
light: ThemeProps;
44
};
55

6-
export type ThemeProps = {
6+
export interface ThemeProps {
77
colors?: {
8+
background?: string;
89
primaryColor?: string;
9-
textColor?: string;
1010
borderColor?: string;
11-
background?: string;
1211
};
1312
table?: {
1413
header?: {
1514
background?: string;
1615
textColor?: string;
16+
};
17+
cell?: {
18+
textColor?: string;
1719
borderColor?: string;
1820
};
1921
row?: {
2022
mainBackground?: string;
2123
nestedBackground?: string;
2224
expandedBackground?: string;
23-
hoverBackground?: string;
2425
};
25-
cell?: {
26+
filter?: {
27+
background?: string;
2628
textColor?: string;
2729
borderColor?: string;
28-
nestedPadding?: string;
30+
focusBorderColor?: string;
31+
placeholderColor?: string;
2932
};
3033
};
3134
pagination?: {
@@ -46,4 +49,4 @@ export type ThemeProps = {
4649
expandIcon?: {
4750
color?: string;
4851
};
49-
};
52+
}

0 commit comments

Comments
 (0)