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