feat: responsive table

[vbudovski]

🤔 This is a ...

• New feature
• Bug fix
• Site / document update
• Component style update
• TypeScript definition update
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

Has been requested/attempted several times.
#11817

💡 Background and solution

Large Ant tables do not display well on smaller screens. Allow selective display of columns based on media query check in React.

📝 Changelog

Columns are only filtered out in the presence of a responsive attribute.

Language	Changelog
🇺🇸 English	Table support responsive columns.
🇨🇳 Chinese	Table 支持响应式展现列。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

---

View rendered CHANGELOG.en-US.md
View rendered CHANGELOG.zh-CN.md
View rendered components/empty/index.en-US.md
View rendered components/form/index.en-US.md
View rendered components/form/index.zh-CN.md
View rendered components/select/index.en-US.md

[ant-design-bot]

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6483500:

Sandbox	Source
antd reproduction template	Configuration

[yoyo837]

Commits should be clean!

[zombieJ]

Grid already realize the responsive detect. Should not re-import another lib: https://github.com/ant-design/ant-design/blob/cff24d5dcb03207bf587d454e56bd2d477c0b555/components/grid/row.tsx

[codecov]

Codecov Report

Merging #23298 into feature will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff            @@
##           feature   #23298   +/-   ##
========================================
  Coverage    98.35%   98.35%           
========================================
  Files          365      365           
  Lines         7290     7290           
  Branches      2000     1952   -48     
========================================
  Hits          7170     7170           
  Misses         120      120           

Impacted Files	Coverage Δ
components/table/hooks/useFilter/index.tsx	100.00% <ø> (ø)
components/table/hooks/useSorter.tsx	96.07% <ø> (-0.06%)	⬇️
components/table/Table.tsx	99.22% <100.00%> (+0.02%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 87da7bf...6483500. Read the comment docs.

[vbudovski]

@zombieJ Fixed. It's a lot cleaner now.

[zombieJ]

Thanks for your effort. I'm OK with the code, could you help to update table document about this props?

@afc163 @yoyo837, pls help double confirm for the prop name of responsive

[vbudovski]

I realised that useBreakpoint works a bit differently to the other library. We can probably simplify the interface to take a single instance of Breakpoint rather than an array. What do you think @zombieJ ?

[yoyo837]

@vbudovski You can send a new PR about that to help improve.

[afc163]

@vbudovski Could you fill API documentation about responsive?

https://ant.design/components/table/#Column
https://ant.design/components/table-cn/#Column

[muzea]

ant-design/components/table/Table.tsx

Lines 121 to 128 in c9fada3

	const mergedColumns = React.useMemo(() => {
	const matched = new Set(Object.keys(screens).filter((m: Breakpoint) => screens[m]));
	return (columns || convertChildrenToColumns(children)).filter(
	(c: ColumnType<RecordType>) =>
	!c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
	);
	}, [children, columns, screens]);

Is it inappropriate for children to be dependent? In my case, it will cause a lot of extra render.

[afc163]

@muzea send PR to optimize it.

[zombieJ]

Is it inappropriate for children to be dependent? In my case, it will cause a lot of extra render.

children is only used when define Columns by jsx. It's empty when use columns.