API สำหรับ React ของตารางข้อมูล

Import

import-grid.tsx

import { NuiGrid, type NuiGridColumn, type NuiGridHandle } from '@needless-ui/react/grid';

NuiGrid

ตารางข้อมูลที่สร้างบน table แบบเนทีฟ

NuiGrid: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`rows`Prop	`readonly T[]`		ข้อมูล การแก้ไขจะแทนที่แถวนั้นและเรียก `onRowsChange` ส่วน `rows` ชุดถัดไปที่คุณส่งเข้ามาจะแทนที่การแก้ไขเหล่านั้น
`onRowsChange`Callback	`(rows: readonly T[]) => void`		ถูกเรียกพร้อมแถวทั้งหมดหลังการแก้ไขแต่ละครั้งที่ยืนยันแล้ว
`columns`Prop	`NuiGridColumn<T>[]`		คอลัมน์ต่าง ๆ ในรูปออบเจกต์ `NuiGridColumn`
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	คีย์ของแถว สำหรับการเลือกและการติดตาม
`label`Prop	`string`		ชื่อที่เข้าถึงได้ของตาราง
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	เลือกแถวได้หรือไม่ และได้กี่แถว
`selected` `defaultSelected` `onSelectedChange`สถานะ	`unknown[]`	`[]`	คีย์ของแถวที่เลือก
`sort` `defaultSort` `onSortChange`สถานะ	`NuiGridSort[]`	`[]`	การเรียงลำดับในรูปออบเจกต์ `{ column, direction }` โดยรายการแรกจะเรียงก่อน
`filters` `defaultFilters` `onFiltersChange`สถานะ	`Record<string, NuiGridFilter>`	`{}`	ตัวกรองต่อ id ของคอลัมน์ ประกอบด้วยตัวดำเนินการและค่า
`search` `defaultSearch` `onSearchChange`สถานะ	`string`	`''`	คำที่ต้องปรากฏครบทุกคำในแถว
`pageSize` `defaultPageSize` `onPageSizeChange`สถานะ	`number`	`0`	จำนวนแถวต่อหน้า หรือ 0 เพื่อแสดงเป็นรายการเดียวที่เลื่อนได้
`page` `defaultPage` `onPageChange`สถานะ	`number`	`0`	หน้าที่แสดง เริ่มนับจาก 0
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	ตัวเลือกในตัวแบ่งหน้า
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	เรนเดอร์เฉพาะแถวที่มองเห็น: ทุกครั้ง ไม่เลย หรือ `auto` เมื่อเกิน 100 แถวและไม่แบ่งหน้า
`height`Prop	`string`		ความยาว CSS ที่จำกัดขนาดของตาราง โดยเนื้อหาจะเลื่อนอยู่ภายใน
`columnState` `defaultColumnState` `onColumnStateChange`สถานะ	`NuiGridColumnState[]`	`[]`	ความกว้าง ลำดับ การตรึง และการแสดงผลของแต่ละคอลัมน์ สำหรับบันทึกและกู้คืน
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` แสดงแถวตามที่ได้รับ และปล่อยให้คุณจัดการการเรียงลำดับ การกรอง และการแบ่งหน้าเอง
`total`Prop	`number`		จำนวนแถวบนเซิร์ฟเวอร์
`loading`Prop	`boolean`	`false`	แสดงแถบความคืบหน้า และแสดงแถวตัวยึดตำแหน่งระหว่างที่ยังไม่มีแถว
`locale`Prop	`string`	`'en-US'`	ใช้จัดรูปแบบตัวเลขและวันที่ และอ่านตัวเลขที่พิมพ์
`labels`Prop	`Partial<NuiGridLabels>`		ข้อความทุกส่วนที่ตารางแสดงหรือประกาศ สำหรับการแปล
`corners`Prop	`NuiCorners`		รูปทรงของมุม: `round` `squircle` `bevel` `scoop` `notch` หรือ `square`
`radius`Prop	`NuiRadius`		ขนาดของมุม: `none` `small` `medium` `large` หรือ `full`
`density`Prop	`NuiDensity`		พื้นที่ที่ใช้: `compact` `regular` หรือ `roomy`
`groupBy`Prop	`string[]`	`[]`	คอลัมน์ที่ใช้จัดกลุ่มแถว เริ่มจากชั้นนอกสุด
`collapsed` `defaultCollapsed` `onCollapsedChange`สถานะ	`string[]`	`[]`	คีย์ของกลุ่มที่ยุบอยู่ โดยกลุ่มจะเริ่มต้นแบบขยาย
`getChildren`Prop	`(row: T) => T[] \| undefined`		แถวลูกของแถว ตารางจะแสดงเป็นข้อมูลแบบต้นไม้
`expanded` `defaultExpanded` `onExpandedChange`สถานะ	`unknown[]`	`[]`	คีย์ของแถวที่ขยายอยู่ในข้อมูลแบบต้นไม้ โดยแถวจะเริ่มต้นแบบยุบ
`details` `defaultDetails` `onDetailsChange`สถานะ	`unknown[]`	`[]`	คีย์ของแถวที่เปิดรายละเอียดอยู่
`totals, flash`Prop	`boolean`	`false`	แถวค่าสรุปจากทุกแถวที่ผ่านการกรอง และเซลล์ที่กะพริบเมื่อข้อความเปลี่ยน ซึ่งใช้ได้ในแถวที่มี `rowId` คงที่
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` แสดงแถวเป็นการ์ด และ `auto` แสดงเช่นนั้นเฉพาะบนหน้าจอแคบ
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	แถบที่ใช้เรียงลำดับ กรอง และเลือกทุกแถว: ทุกครั้ง ไม่เลย หรือ `auto` เมื่อแสดงเป็นการ์ด
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		สิ่งที่แสดงเมื่อไม่มีแถว โดยจะได้รับแจ้งว่าตัวกรองซ่อนแถวไว้หรือไม่
`renderDetail`Render prop	`(row: T) => ReactNode`		รายละเอียดของแถว ซึ่งแสดงอยู่ใต้แถวเมื่อเปิด ตารางจะเพิ่มคอลัมน์ของปุ่มสลับให้
`onRowActivate`Callback	`(row: T) => void`		ถูกเรียกพร้อมแถวที่ถูกเปิดด้วย Enter หรือการดับเบิลคลิก
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		ถูกเรียกพร้อมการแก้ไขแต่ละครั้งที่ยืนยันแล้ว
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		ถูกเรียกพร้อมการเรียงลำดับ ตัวกรอง คำค้นหา และหน้า ทุกครั้งที่มีการเปลี่ยนแปลง และอีกครั้งตอนเริ่มต้น
`ref`Prop	`Ref<NuiGridHandle>`		สิ่งที่เข้าถึงได้ผ่าน `ref` ของตาราง ได้แก่การส่งออก การสั่งพิมพ์ และโฟกัส
`exportXlsx, print`เมธอด	`(options?) => Blob, () => void`		แถวที่กรองและเรียงลำดับแล้วในรูปสเปรดชีต และการสั่งพิมพ์ทุกแถว
`exportCsv`เมธอด	`(options?) => string`		แถวที่กรองและเรียงลำดับแล้ว เฉพาะคอลัมน์ที่มองเห็น ในรูปแบบ CSV
`expandAll`เมธอด	`(open?: boolean) => void`		ขยายทุกกลุ่มและทุกแถวที่มีแถวลูก หรือยุบทั้งหมด
`focusCell`เมธอด	`(row: number, col: number) => void`		โฟกัสที่เซลล์ แถว `-1` คือหัวตาราง
`clearFilters`เมธอด	`() => void`		ล้างตัวกรองทั้งหมดและคำค้นหา
`fit`เมธอด	`(id: string) => void`		ปรับความกว้างคอลัมน์ให้พอดีกับเซลล์ที่กว้างที่สุดในบรรดาเซลล์ที่เรนเดอร์แล้ว

สถานะทำงานเหมือน input ของ React เอง คือส่งค่าเข้าไปแล้วอัปเดตจาก callback on…Change ของค่านั้น หรือส่งค่า default… แล้วปล่อยให้คอมโพเนนต์เก็บค่าไว้เอง

Prop สำหรับการปรับแต่งที่ไม่ได้กำหนดค่าไว้ จะใช้ค่าตาม attribute data-nui-* ที่อยู่ใกล้ที่สุด ดูคู่มือการปรับแต่ง

NuiGridColumn

คอลัมน์หนึ่งคอลัมน์ รับพร็อพเพอร์ตีทุกตัวของคอลัมน์ Angular (ต้องระบุเพียง id และ header) และสองตัวนี้ที่ใช้วาดคอลัมน์

NuiGridColumn: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		วาดเซลล์ของคอลัมน์เอง จากแถว ค่า และข้อความของเซลล์
`renderHeader`Render prop	`(column) => ReactNode`		วาดหัวคอลัมน์เอง โดย `header` ยังคงเป็นชื่อของคอลัมน์