API ของตารางข้อมูล

Import

import-grid.ts

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

NuiGrid

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

Selector: nui-grid

NuiGrid: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`rows`สองทาง	`readonly T[]`		ข้อมูล การแก้ไขจะแทนที่แถว จึงควรผูกด้วย `[(rows)]`
`columns`Input	`NuiGridColumn<T>[]`		คอลัมน์ต่าง ๆ ในรูปออบเจกต์ `NuiGridColumn`
`rowId`Input	`(row: T) => unknown`	`row.id ?? row`	คีย์ของแถว สำหรับการเลือกและการติดตาม
`label`Input	`string`		ชื่อที่เข้าถึงได้ของตาราง
`selection`Input	`'none' \| 'single' \| 'multiple'`	`'none'`	เลือกแถวได้หรือไม่ และได้กี่แถว
`selected`สองทาง	`unknown[]`	`[]`	คีย์ของแถวที่เลือก
`sort`สองทาง	`NuiGridSort[]`	`[]`	การเรียงลำดับในรูปออบเจกต์ `{ column, direction }` โดยรายการแรกจะเรียงก่อน
`filters`สองทาง	`Record<string, NuiGridFilter>`	`{}`	ตัวกรองต่อ id ของคอลัมน์ ประกอบด้วยตัวดำเนินการและค่า
`search`สองทาง	`string`	`''`	คำที่ต้องปรากฏครบทุกคำในแถว
`pageSize`สองทาง	`number`	`0`	จำนวนแถวต่อหน้า หรือ 0 เพื่อแสดงเป็นรายการเดียวที่เลื่อนได้
`page`สองทาง	`number`	`0`	หน้าที่แสดง เริ่มนับจาก 0
`pageSizes`Input	`number[]`	`[10, 25, 50, 100]`	ตัวเลือกในตัวแบ่งหน้า
`virtual`Input	`boolean \| 'auto'`	`'auto'`	เรนเดอร์เฉพาะแถวที่มองเห็น: ทุกครั้ง ไม่เลย หรือ `auto` เมื่อเกิน 100 แถวและไม่แบ่งหน้า
`height`Input	`string`		ความยาว CSS ที่จำกัดขนาดของตาราง โดยเนื้อหาจะเลื่อนอยู่ภายใน
`columnState`สองทาง	`NuiGridColumnState[]`	`[]`	ความกว้าง ลำดับ การตรึง และการแสดงผลของแต่ละคอลัมน์ สำหรับบันทึกและกู้คืน
`mode`Input	`'client' \| 'server'`	`'client'`	`server` แสดงแถวตามที่ได้รับ และปล่อยให้คุณจัดการการเรียงลำดับ การกรอง และการแบ่งหน้าเอง
`total`Input	`number`		จำนวนแถวบนเซิร์ฟเวอร์
`loading`Input	`boolean`	`false`	แสดงแถบความคืบหน้า และแสดงแถวตัวยึดตำแหน่งระหว่างที่ยังไม่มีแถว
`locale`Input	`string`	`LOCALE_ID`	ใช้จัดรูปแบบตัวเลขและวันที่ และอ่านตัวเลขที่พิมพ์
`labels`Input	`Partial<NuiGridLabels>`		ข้อความทุกส่วนที่ตารางแสดงหรือประกาศ สำหรับการแปล
`corners`Input	`NuiCorners`		รูปทรงของมุม: `round` `squircle` `bevel` `scoop` `notch` หรือ `square`
`radius`Input	`NuiRadius`		ขนาดของมุม: `none` `small` `medium` `large` หรือ `full`
`density`Input	`NuiDensity`		พื้นที่ที่ใช้: `compact` `regular` หรือ `roomy`
`rowActivate`Output	`T`		ส่งแถวที่ถูกเปิดด้วย Enter หรือการดับเบิลคลิกออกมา
`cellEdit`Output	`NuiGridEdit<T>`		ส่งการแก้ไขแต่ละครั้งที่ยืนยันแล้วออกมา
`queryChange`Output	`NuiGridQuery`		ส่งการเรียงลำดับ ตัวกรอง คำค้นหา และหน้าออกมาทุกครั้งที่มีการเปลี่ยนแปลง
`exportCsv`เมธอด	`(options?) => string`		แถวที่กรองและเรียงลำดับแล้ว เฉพาะคอลัมน์ที่มองเห็น ในรูปแบบ CSV
`focusCell`เมธอด	`(row: number, col: number) => void`		โฟกัสที่เซลล์ แถว `-1` คือหัวตาราง
`clearFilters`เมธอด	`() => void`		ล้างตัวกรองทั้งหมดและคำค้นหา

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

NuiGridColumn

คอลัมน์หนึ่งคอลัมน์ ต้องระบุเพียง id และ header

NuiGridColumn: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`id`พร็อพเพอร์ตี	`string`		ค่าที่ไม่ซ้ำกัน ใช้เป็นคีย์ในการเรียงลำดับ ตัวกรอง และสถานะคอลัมน์
`header`พร็อพเพอร์ตี	`string`		ข้อความหัวคอลัมน์
`value`พร็อพเพอร์ตี	`keyof T \| ((row: T) => V)`		คีย์ของแถว หรือฟังก์ชันที่รับแถว ค่าเริ่มต้นคือ `row[id]`
`type`พร็อพเพอร์ตี	`'text' \| 'number' \| 'date' \| 'boolean' \| 'enum'`	`'text'`	กำหนดการจัดแนว การเรียงลำดับ ตัวกรอง และตัวแก้ไข
`format`พร็อพเพอร์ตี	`Intl options \| ((value, row) => string)`		ตัวเลือก `Intl` สำหรับตัวเลขและวันที่ หรือฟังก์ชันที่สร้างข้อความ
`options`พร็อพเพอร์ตี	`NuiOption<V>[]`		ตัวเลือกของคอลัมน์ `enum` ในรูปออบเจกต์ `NuiOption`
`width, minWidth, maxWidth`พร็อพเพอร์ตี	`number`		หน่วยเป็นพิกเซล
`flex`พร็อพเพอร์ตี	`number`		แบ่งพื้นที่ที่เหลือกับคอลัมน์ `flex` อื่น ๆ
`align`พร็อพเพอร์ตี	`'start' \| 'center' \| 'end'`		ค่าเริ่มต้นขึ้นกับชนิด ตัวเลขและวันที่จะชิดท้าย
`pinned, hidden`พร็อพเพอร์ตี	`'start' \| 'end', boolean`		การตรึงและการแสดงผลเริ่มต้นของคอลัมน์
`sortable, filterable, resizable, reorderable, hideable`พร็อพเพอร์ตี	`boolean`	`true`	ปิดแต่ละอย่างได้ด้วย `false`
`compare`พร็อพเพอร์ตี	`(a: V, b: V) => number`		การเรียงลำดับแบบกำหนดเอง
`editable, validate`พร็อพเพอร์ตี	`boolean \| ((row) => boolean), (value, row) => string \| null`		แก้ไขเซลล์ได้หรือไม่ และข้อความเมื่อค่าไม่ถูกต้อง
`set`พร็อพเพอร์ตี	`(row: T, value: V) => T`		สร้างแถวที่แก้ไขแล้ว ค่าเริ่มต้นคือสำเนาที่มีค่าใหม่

NuiGridCell

วาดเซลล์ของคอลัมน์ context มีแถว ค่า และข้อความของเซลล์

Selector: ng-template[nuiGridCell]

NuiGridCell: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`nuiGridCell`Input	`string`		id ของคอลัมน์

NuiGridHeader

วาดหัวคอลัมน์

Selector: ng-template[nuiGridHeader]

NuiGridHeader: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`nuiGridHeader`Input	`string`		id ของคอลัมน์

NuiGridEmpty

สิ่งที่แสดงเมื่อไม่มีแถว context จะบอกว่าตัวกรองซ่อนแถวไว้หรือไม่

Selector: ng-template[nuiGridEmpty]