Skip to content

Commit 48a615f

Browse files
zombieJzombieJ
committed
feat: Add transformColumns for antd usage
1 parent 4928362 commit 48a615f

4 files changed

Lines changed: 146 additions & 40 deletions

File tree

‎src/Table.tsx‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,15 @@ export interface TableProps<RecordType extends DefaultRecordType>
101101
onRow?: GetComponentProps<RecordType>;
102102
onHeaderRow?: GetComponentProps<ColumnType<RecordType>[]>;
103103
emptyText?: React.ReactNode | (() => React.ReactNode);
104+
105+
// Internal
106+
/**
107+
* @private Internal usage, may remove by refactor. Should always use `columns` instead.
108+
*
109+
* !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
110+
*/
111+
// Used for antd table transform column with additional column
112+
transformColumns: (columns: ColumnsType<RecordType>) => ColumnsType<RecordType>;
104113
}
105114

106115
function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordType>) {
@@ -127,6 +136,9 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
127136
emptyText,
128137
onRow,
129138
onHeaderRow,
139+
140+
// Internal
141+
transformColumns,
130142
} = props;
131143

132144
const mergedData = data || EMPTY_DATA;
@@ -250,16 +262,19 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
250262
// ====================== Column ======================
251263
const [componentWidth, setComponentWidth] = React.useState(0);
252264

253-
const [columns, flattenColumns] = useColumns({
254-
...props,
255-
...expandableConfig,
256-
expandable: !!expandedRowRender,
257-
expandedKeys: mergedExpandedKeys,
258-
getRowKey,
259-
onTriggerExpand,
260-
expandIcon: mergedExpandIcon,
261-
expandIconColumnIndex,
262-
});
265+
const [columns, flattenColumns] = useColumns(
266+
{
267+
...props,
268+
...expandableConfig,
269+
expandable: !!expandedRowRender,
270+
expandedKeys: mergedExpandedKeys,
271+
getRowKey,
272+
onTriggerExpand,
273+
expandIcon: mergedExpandIcon,
274+
expandIconColumnIndex,
275+
},
276+
transformColumns,
277+
);
263278

264279
const columnContext = {
265280
columns,

‎src/hooks/useColumns.tsx‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -81,30 +81,33 @@ function warningFixed(flattenColumns: { fixed?: FixedType }[]) {
8181
/**
8282
* Parse `columns` & `children` into `columns`.
8383
*/
84-
function useColumns<RecordType>({
85-
prefixCls,
86-
columns,
87-
children,
88-
expandable,
89-
expandedKeys,
90-
getRowKey,
91-
onTriggerExpand,
92-
expandIcon,
93-
rowExpandable,
94-
expandIconColumnIndex,
95-
}: {
96-
prefixCls?: string;
97-
columns?: ColumnsType<RecordType>;
98-
children?: React.ReactNode;
99-
expandable: boolean;
100-
expandedKeys: Set<Key>;
101-
getRowKey: GetRowKey<RecordType>;
102-
onTriggerExpand: TriggerEventHandler<RecordType>;
103-
expandIcon?: RenderExpandIcon<RecordType>;
104-
rowExpandable?: (record: RecordType) => boolean;
105-
expandIconColumnIndex?: number;
106-
}): [ColumnsType<RecordType>, ColumnType<RecordType>[]] {
107-
const mergedColumns = React.useMemo<ColumnsType<RecordType>>(
84+
function useColumns<RecordType>(
85+
{
86+
prefixCls,
87+
columns,
88+
children,
89+
expandable,
90+
expandedKeys,
91+
getRowKey,
92+
onTriggerExpand,
93+
expandIcon,
94+
rowExpandable,
95+
expandIconColumnIndex,
96+
}: {
97+
prefixCls?: string;
98+
columns?: ColumnsType<RecordType>;
99+
children?: React.ReactNode;
100+
expandable: boolean;
101+
expandedKeys: Set<Key>;
102+
getRowKey: GetRowKey<RecordType>;
103+
onTriggerExpand: TriggerEventHandler<RecordType>;
104+
expandIcon?: RenderExpandIcon<RecordType>;
105+
rowExpandable?: (record: RecordType) => boolean;
106+
expandIconColumnIndex?: number;
107+
},
108+
transformColumns: (columns: ColumnsType<RecordType>) => ColumnsType<RecordType>,
109+
): [ColumnsType<RecordType>, ColumnType<RecordType>[]] {
110+
const baseColumns = React.useMemo<ColumnsType<RecordType>>(
108111
() => columns || convertChildrenToColumns(children),
109112
[columns, children],
110113
);
@@ -113,7 +116,7 @@ function useColumns<RecordType>({
113116
const withExpandColumns = React.useMemo<ColumnsType<RecordType>>(() => {
114117
if (expandable) {
115118
const expandColIndex = expandIconColumnIndex || 0;
116-
const prevColumn = mergedColumns[expandColIndex];
119+
const prevColumn = baseColumns[expandColIndex];
117120

118121
const expandColumn = {
119122
[INTERNAL_COL_DEFINE]: {
@@ -138,22 +141,27 @@ function useColumns<RecordType>({
138141
};
139142

140143
// Insert expand column in the target position
141-
const cloneColumns = mergedColumns.slice();
144+
const cloneColumns = baseColumns.slice();
142145
cloneColumns.splice(expandColIndex, 0, expandColumn);
143146

144147
return cloneColumns;
145148
}
146-
return mergedColumns;
147-
}, [expandable, mergedColumns, getRowKey, expandedKeys, expandIcon]);
149+
return baseColumns;
150+
}, [expandable, baseColumns, getRowKey, expandedKeys, expandIcon]);
148151

149-
const flattenColumns = React.useMemo(() => flatColumns(withExpandColumns), [withExpandColumns]);
152+
const mergedColumns = React.useMemo(
153+
() => (transformColumns ? transformColumns(withExpandColumns) : withExpandColumns),
154+
[transformColumns, withExpandColumns],
155+
);
156+
157+
const flattenColumns = React.useMemo(() => flatColumns(mergedColumns), [mergedColumns]);
150158

151159
// Only check out of production since it's waste for each render
152160
if (process.env.NODE_ENV !== 'production') {
153161
warningFixed(flattenColumns);
154162
}
155163

156-
return [withExpandColumns, flattenColumns];
164+
return [mergedColumns, flattenColumns];
157165
}
158166

159167
export default useColumns;

‎tests/Table.spec.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -641,4 +641,16 @@ describe('Table.Basic', () => {
641641
).render(),
642642
).toMatchSnapshot();
643643
});
644+
645+
describe('internal api', () => {
646+
it('transformColumns', () => {
647+
const wrapper = mount(
648+
createTable({
649+
transformColumns: columns => [{ title: 'before' }, ...columns, { title: 'after' }],
650+
}),
651+
);
652+
653+
expect(wrapper.render()).toMatchSnapshot();
654+
});
655+
});
644656
});

‎tests/__snapshots__/Table.spec.js.snap‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,77 @@ exports[`Table.Basic custom components renders fixed column and header correctly
160160
</div>
161161
`;
162162

163+
exports[`Table.Basic internal api transformColumns 1`] = `
164+
<div
165+
class="rc-table"
166+
>
167+
<div
168+
class="rc-table-content"
169+
>
170+
<table
171+
style="table-layout: auto;"
172+
>
173+
<colgroup>
174+
<col />
175+
<col />
176+
<col />
177+
</colgroup>
178+
<thead>
179+
<tr>
180+
<th
181+
class="rc-table-cell"
182+
>
183+
before
184+
</th>
185+
<th
186+
class="rc-table-cell"
187+
>
188+
Name
189+
</th>
190+
<th
191+
class="rc-table-cell"
192+
>
193+
after
194+
</th>
195+
</tr>
196+
</thead>
197+
<tbody>
198+
<tr
199+
class="rc-table-row rc-table-row-level-0"
200+
>
201+
<td
202+
class="rc-table-cell"
203+
/>
204+
<td
205+
class="rc-table-cell"
206+
>
207+
Lucy
208+
</td>
209+
<td
210+
class="rc-table-cell"
211+
/>
212+
</tr>
213+
<tr
214+
class="rc-table-row rc-table-row-level-0"
215+
>
216+
<td
217+
class="rc-table-cell"
218+
/>
219+
<td
220+
class="rc-table-cell"
221+
>
222+
Jack
223+
</td>
224+
<td
225+
class="rc-table-cell"
226+
/>
227+
</tr>
228+
</tbody>
229+
</table>
230+
</div>
231+
</div>
232+
`;
233+
163234
exports[`Table.Basic renders colSpan correctly 1`] = `
164235
<div
165236
class="rc-table"

0 commit comments

Comments
 (0)