戰(zhàn)指南)
React 表格底層原語 rc-component/table 實(shí)戰(zhàn)指南【免費(fèi)下載鏈接】table Low-level table primitives for React, maintained in the Ant Design ecosystem.項(xiàng)目地址: https://gitcode.com/gh_mirrors/tab/table寫數(shù)據(jù)管理頁面時(shí)Ant Design 的 Table 一旦對(duì)不上你的設(shè)計(jì)你往往會(huì)選擇放棄定制。rc-component/table 是 Ant Design Table 底層用的表格原語組件固定列、可展開行、合計(jì)行、虛擬滾動(dòng)都是它的一等公民樣式層完全留給你自己。它不綁定任何 UI 風(fēng)格你要做的是把它當(dāng)成表格引擎來用。它能把哪些事從你手里接過去固定列和固定表頭配fixed加scroll就行滾動(dòng)同步、陰影邊線都由內(nèi)部處理不用寫 CSS 定位可展開行一個(gè)expandable對(duì)象管住展開圖標(biāo)、展開內(nèi)容、哪行可展開三件事合計(jì)行 Summary表尾的合計(jì)、小計(jì)行不用你自己拼tfoot虛擬滾動(dòng)VirtualTable只渲染視口內(nèi)的行幾千行數(shù)據(jù)滾動(dòng)不卡全程類型推斷TableUser之后列的dataIndex寫錯(cuò)字段名編譯器直接報(bào)錯(cuò)源碼在 src/ 下按 Header、Body、Footer、VirtualTable 分模塊想改行為時(shí)知道該去翻哪塊。高頻場景從最小表格到虛擬滾動(dòng)基礎(chǔ)表格怎么起步定義一個(gè)接口列和數(shù)據(jù)都掛在上面這是全部配置import Table from rc-component/table; import type { ColumnsType } from rc-component/table; interface User { key: string; name: string; age: number; } const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name, key: name }, { title: 年齡, dataIndex: age, key: age, width: 80 }, ]; const data: User[] [{ key: 1, name: Jack, age: 28 }]; export default () TableUser columns{columns} data{data} /;rowKey默認(rèn)讀數(shù)據(jù)的key字段所以示例里每條記錄都帶了key。固定列加橫向滾動(dòng)遇到表格比容器寬、希望首列或操作列始終可見的情況給這些列設(shè)fixed再給表格設(shè)scroll.x。const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name, key: name, width: 120, fixed: left }, { title: 地址, dataIndex: address, key: address }, { title: 操作, key: action, width: 100, fixed: right }, ]; // 設(shè)了 scroll.x 才有橫向滾動(dòng)條固定列才能釘住 TableUser columns{columns} data{data} scroll{{ x: 1200 }} /;注意固定列必須顯式寫width這一點(diǎn)下面坑里再展開?？烧归_行怎么配每行點(diǎn)開看詳情這種需求全部收斂在expandable里TableUser columns{columns} data{data} expandable{{ // 展開后渲染的整行內(nèi)容 expandedRowRender: record div詳情{record.detail}/div, // 沒有詳情的行不出現(xiàn)展開圖標(biāo) rowExpandable: record !!record.detail, }} /舊的expandRowRender、defaultExpandedRowKeys這類散裝 props 已經(jīng)廢棄統(tǒng)一收進(jìn)expandable對(duì)象src/Table.tsx 頂部注釋里列了完整的遷移清單。合計(jì)行和表尾報(bào)表類頁面常用的共 N 條、合計(jì)金額用Summary組件直接掛在 Table 里import { Summary } from rc-component/table; TableUser columns{columns} data{data} Summary Summary.Row Summary.Cell colSpan{2}共 {data.length} 條/Summary.Cell Summary.Cell平均 {avgAge} 歲/Summary.Cell /Summary.Row /Summary /Table大數(shù)據(jù)量切虛擬滾動(dòng)數(shù)據(jù)超過幾千行、滾動(dòng)開始掉幀時(shí)把Table換成VirtualTable加一個(gè)heightimport { VirtualTable } from rc-component/table; // 只渲染視口內(nèi)的行3000 行和 30 行體感一致 VirtualTableUser columns{columns} data{data} height{400} scroll{{ x: 1200 }} fixed /fixed表示開啟固定列支持。虛擬模式下的細(xì)節(jié)實(shí)現(xiàn)可以看 src/VirtualTable/。一個(gè)貫穿示例拼出用戶管理表格假設(shè)你要做的是一個(gè)用戶管理列表首列姓名固定、操作列固定、每行可展開看詳情、底部有合計(jì)行。做法就是把上面四段配置疊在同一個(gè) Table 上列定義里給姓名、操作列加width和fixed表格加scroll{{ x: 1200 }}讓橫向滾動(dòng)生效加expandable配expandedRowRender用Summary子節(jié)點(diǎn)加合計(jì)行一個(gè)組件四個(gè)配置項(xiàng)不用寫任何定位或滾動(dòng)相關(guān)的 CSS。項(xiàng)目里 docs/examples/ 有 40 多個(gè)可運(yùn)行的示例文件fixedColumns.tsx、expandedRowRender.tsx、stickyHeaderAndSummary.tsx分別對(duì)應(yīng)上面幾段改參數(shù)就能看到效果。踩過的坑和解法固定列沒設(shè)width列寬錯(cuò)亂固定列不參與自動(dòng)布局不寫width時(shí)會(huì)塌縮或和其他列錯(cuò)位。觸發(fā)條件用了fixed但列沒設(shè)寬度。解法所有固定列顯式給width。rowKey缺失導(dǎo)致展開狀態(tài)錯(cuò)行rowKey默認(rèn)取記錄的key字段如果你的數(shù)據(jù)沒有這個(gè)字段展開、hover 狀態(tài)會(huì)掛錯(cuò)行。解法顯式傳rowKeyid或rowKey{r r.id}。嵌套字段寫成字符串路徑取不到值dataIndex: address.city是無效的它不做路徑解析。解法用數(shù)組形式dataIndex: [address, city]支持任意深度。只設(shè)scroll.x表頭會(huì)跟著內(nèi)容滾走固定表頭需要scroll.y參與布局只設(shè)x時(shí)縱向滾動(dòng)表頭和表體會(huì)脫節(jié)。解法需要吸頂表頭就同時(shí)設(shè)y示例見 docs/examples/stickyHeader.tsx。下一步本地跑起來繼續(xù)看想動(dòng)源碼或跑完整示例把倉庫拉下來即可git clone https://gitcode.com/gh_mirrors/tab/table裝好依賴后跑npm startdumi 站點(diǎn)會(huì)列出全部 demo。兩個(gè)值得直接翻的地方docs/examples/固定列、虛擬滾動(dòng)、RTL、拖拽排序等場景的完整實(shí)現(xiàn)src/hooks/useColumns、useExpand、useSticky這些內(nèi)部鉤子理解組件行為機(jī)制的最短路徑需要更細(xì)的 API 說明從 src/interface.ts 的ColumnType定義入手每個(gè)字段的語義都有注釋。【免費(fèi)下載鏈接】table Low-level table primitives for React, maintained in the Ant Design ecosystem.項(xiàng)目地址: https://gitcode.com/gh_mirrors/tab/table創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 React 表格底層原語 @rc-component/table 實(shí)戰(zhàn)指南
React 表格底層原語 rc-component/table 實(shí)戰(zhàn)指南【免費(fèi)下載鏈接】table Low-level table primitives for React, maintained in the Ant Design ecosystem.項(xiàng)目地址: https://gitcode.com/gh_mirrors/tab/table寫數(shù)據(jù)管理頁面時(shí)Ant Design 的 Table 一旦對(duì)不上你的設(shè)計(jì)你往往會(huì)選擇放棄定制。rc-component/table 是 Ant Design Table 底層用的表格原語組件固定列、可展開行、合計(jì)行、虛擬滾動(dòng)都是它的一等公民樣式層完全留給你自己。它不綁定任何 UI 風(fēng)格你要做的是把它當(dāng)成表格引擎來用。它能把哪些事從你手里接過去固定列和固定表頭配fixed加scroll就行滾動(dòng)同步、陰影邊線都由內(nèi)部處理不用寫 CSS 定位可展開行一個(gè)expandable對(duì)象管住展開圖標(biāo)、展開內(nèi)容、哪行可展開三件事合計(jì)行 Summary表尾的合計(jì)、小計(jì)行不用你自己拼tfoot虛擬滾動(dòng)VirtualTable只渲染視口內(nèi)的行幾千行數(shù)據(jù)滾動(dòng)不卡全程類型推斷TableUser之后列的dataIndex寫錯(cuò)字段名編譯器直接報(bào)錯(cuò)源碼在 src/ 下按 Header、Body、Footer、VirtualTable 分模塊想改行為時(shí)知道該去翻哪塊。高頻場景從最小表格到虛擬滾動(dòng)基礎(chǔ)表格怎么起步定義一個(gè)接口列和數(shù)據(jù)都掛在上面這是全部配置import Table from rc-component/table; import type { ColumnsType } from rc-component/table; interface User { key: string; name: string; age: number; } const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name, key: name }, { title: 年齡, dataIndex: age, key: age, width: 80 }, ]; const data: User[] [{ key: 1, name: Jack, age: 28 }]; export default () TableUser columns{columns} data{data} /;rowKey默認(rèn)讀數(shù)據(jù)的key字段所以示例里每條記錄都帶了key。固定列加橫向滾動(dòng)遇到表格比容器寬、希望首列或操作列始終可見的情況給這些列設(shè)fixed再給表格設(shè)scroll.x。const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name, key: name, width: 120, fixed: left }, { title: 地址, dataIndex: address, key: address }, { title: 操作, key: action, width: 100, fixed: right }, ]; // 設(shè)了 scroll.x 才有橫向滾動(dòng)條固定列才能釘住 TableUser columns{columns} data{data} scroll{{ x: 1200 }} /;注意固定列必須顯式寫width這一點(diǎn)下面坑里再展開?？烧归_行怎么配每行點(diǎn)開看詳情這種需求全部收斂在expandable里TableUser columns{columns} data{data} expandable{{ // 展開后渲染的整行內(nèi)容 expandedRowRender: record div詳情{record.detail}/div, // 沒有詳情的行不出現(xiàn)展開圖標(biāo) rowExpandable: record !!record.detail, }} /舊的expandRowRender、defaultExpandedRowKeys這類散裝 props 已經(jīng)廢棄統(tǒng)一收進(jìn)expandable對(duì)象src/Table.tsx 頂部注釋里列了完整的遷移清單。合計(jì)行和表尾報(bào)表類頁面常用的共 N 條、合計(jì)金額用Summary組件直接掛在 Table 里import { Summary } from rc-component/table; TableUser columns{columns} data{data} Summary Summary.Row Summary.Cell colSpan{2}共 {data.length} 條/Summary.Cell Summary.Cell平均 {avgAge} 歲/Summary.Cell /Summary.Row /Summary /Table大數(shù)據(jù)量切虛擬滾動(dòng)數(shù)據(jù)超過幾千行、滾動(dòng)開始掉幀時(shí)把Table換成VirtualTable加一個(gè)heightimport { VirtualTable } from rc-component/table; // 只渲染視口內(nèi)的行3000 行和 30 行體感一致 VirtualTableUser columns{columns} data{data} height{400} scroll{{ x: 1200 }} fixed /fixed表示開啟固定列支持。虛擬模式下的細(xì)節(jié)實(shí)現(xiàn)可以看 src/VirtualTable/。一個(gè)貫穿示例拼出用戶管理表格假設(shè)你要做的是一個(gè)用戶管理列表首列姓名固定、操作列固定、每行可展開看詳情、底部有合計(jì)行。做法就是把上面四段配置疊在同一個(gè) Table 上列定義里給姓名、操作列加width和fixed表格加scroll{{ x: 1200 }}讓橫向滾動(dòng)生效加expandable配expandedRowRender用Summary子節(jié)點(diǎn)加合計(jì)行一個(gè)組件四個(gè)配置項(xiàng)不用寫任何定位或滾動(dòng)相關(guān)的 CSS。項(xiàng)目里 docs/examples/ 有 40 多個(gè)可運(yùn)行的示例文件fixedColumns.tsx、expandedRowRender.tsx、stickyHeaderAndSummary.tsx分別對(duì)應(yīng)上面幾段改參數(shù)就能看到效果。踩過的坑和解法固定列沒設(shè)width列寬錯(cuò)亂固定列不參與自動(dòng)布局不寫width時(shí)會(huì)塌縮或和其他列錯(cuò)位。觸發(fā)條件用了fixed但列沒設(shè)寬度。解法所有固定列顯式給width。rowKey缺失導(dǎo)致展開狀態(tài)錯(cuò)行rowKey默認(rèn)取記錄的key字段如果你的數(shù)據(jù)沒有這個(gè)字段展開、hover 狀態(tài)會(huì)掛錯(cuò)行。解法顯式傳rowKeyid或rowKey{r r.id}。嵌套字段寫成字符串路徑取不到值dataIndex: address.city是無效的它不做路徑解析。解法用數(shù)組形式dataIndex: [address, city]支持任意深度。只設(shè)scroll.x表頭會(huì)跟著內(nèi)容滾走固定表頭需要scroll.y參與布局只設(shè)x時(shí)縱向滾動(dòng)表頭和表體會(huì)脫節(jié)。解法需要吸頂表頭就同時(shí)設(shè)y示例見 docs/examples/stickyHeader.tsx。下一步本地跑起來繼續(xù)看想動(dòng)源碼或跑完整示例把倉庫拉下來即可git clone https://gitcode.com/gh_mirrors/tab/table裝好依賴后跑npm startdumi 站點(diǎn)會(huì)列出全部 demo。兩個(gè)值得直接翻的地方docs/examples/固定列、虛擬滾動(dòng)、RTL、拖拽排序等場景的完整實(shí)現(xiàn)src/hooks/useColumns、useExpand、useSticky這些內(nèi)部鉤子理解組件行為機(jī)制的最短路徑需要更細(xì)的 API 說明從 src/interface.ts 的ColumnType定義入手每個(gè)字段的語義都有注釋。【免費(fèi)下載鏈接】table Low-level table primitives for React, maintained in the Ant Design ecosystem.項(xiàng)目地址: https://gitcode.com/gh_mirrors/tab/table創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考