தரவுக் கட்டம் API

இம்போர்ட்

import-grid.ts

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

NuiGrid

நேட்டிவ் அட்டவணை மீது ஒரு தரவுக் கட்டம்.

செலக்டர்: nui-grid

NuiGrid: பண்புகள்
பெயர்	வகை	இயல்புநிலை	விளக்கம்
`rows`இருவழி	`readonly T[]`		தரவு. திருத்தம் வரிசையைப் புதியதால் மாற்றுகிறது; எனவே `[(rows)]` மூலம் பைண்ட் செய்யுங்கள்.
`columns`இன்புட்	`NuiGridColumn<T>[]`		நெடுவரிசைகள், `NuiGridColumn` ஆப்ஜெக்ட்களாக.
`rowId`இன்புட்	`(row: T) => unknown`	`row.id ?? row`	தேர்வுக்கும் கண்காணிப்புக்குமான வரிசையின் சாவி.
`label`இன்புட்	`string`		கட்டத்தின் அணுகல் பெயர்.
`selection`இன்புட்	`'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`இன்புட்	`number[]`	`[10, 25, 50, 100]`	பக்கக் கட்டுப்பாட்டில் உள்ள தேர்வுகள்.
`virtual`இன்புட்	`boolean \| 'auto'`	`'auto'`	பார்வையில் உள்ள வரிசைகளை மட்டுமே ரெண்டர் செய்கிறது: எப்போதும், ஒருபோதும் இல்லை, அல்லது `auto` என்றால் பக்கங்கள் இல்லாதபோது 100 வரிசைகளுக்கு மேல்.
`height`இன்புட்	`string`		கட்டத்தை வரம்பிடும் CSS நீளம்; அதற்குள் ஸ்க்ரோல் ஆகும்.
`columnState`இருவழி	`NuiGridColumnState[]`	`[]`	ஒவ்வொரு நெடுவரிசையின் அகலம், வரிசைமுறை, பின் நிலை, தெரிநிலை; சேமித்து மீட்டெடுக்க.
`mode`இன்புட்	`'client' \| 'server'`	`'client'`	`server` வரிசைகளை வந்தபடியே காட்டி, வரிசைப்படுத்தல், வடிகட்டுதல், பக்கமாக்கலை உங்களிடம் விடுகிறது.
`total`இன்புட்	`number`		சர்வரில் உள்ள வரிசைகளின் எண்ணிக்கை.
`loading`இன்புட்	`boolean`	`false`	முன்னேற்றப் பட்டையையும், வரிசைகள் இல்லாதபோது பிளேஸ்ஹோல்டர் வரிசைகளையும் காட்டுகிறது.
`locale`இன்புட்	`string`	`LOCALE_ID`	எண்களையும் தேதிகளையும் வடிவமைக்கிறது, தட்டச்சு செய்த எண்களைப் படிக்கிறது.
`labels`இன்புட்	`Partial<NuiGridLabels>`		கட்டம் காட்டும் அல்லது அறிவிக்கும் ஒவ்வொரு உரையும், மொழிபெயர்ப்பதற்காக.
`corners`இன்புட்	`NuiCorners`		இதன் மூலைகளின் வடிவம்: `round`, `squircle`, `bevel`, `scoop`, `notch` அல்லது `square`.
`radius`இன்புட்	`NuiRadius`		இதன் மூலைகள் எவ்வளவு பெரியவை: `none`, `small`, `medium`, `large` அல்லது `full`.
`density`இன்புட்	`NuiDensity`		இது எடுத்துக்கொள்ளும் இடம்: `compact`, `regular` அல்லது `roomy`.
`rowActivate`அவுட்புட்	`T`		Enter அல்லது இருமுறை கிளிக் மூலம் திறந்த வரிசையை வெளியிடுகிறது.
`cellEdit`அவுட்புட்	`NuiGridEdit<T>`		உறுதிசெய்த ஒவ்வொரு திருத்தத்தையும் வெளியிடுகிறது.
`queryChange`அவுட்புட்	`NuiGridQuery`		வரிசைப்படுத்தல், வடிகட்டிகள், தேடல், பக்கம் மாறும்போதெல்லாம் அவற்றை வெளியிடுகிறது.
`exportCsv`மெத்தட்	`(options?) => string`		தெரியும் நெடுவரிசைகளின் வடிகட்டிய, வரிசைப்படுத்திய வரிசைகள், CSV-ஆக.
`focusCell`மெத்தட்	`(row: number, col: number) => void`		ஒரு கலத்துக்கு ஃபோகஸ் தருகிறது; வரிசை `-1` என்பது தலைப்பு.
`clearFilters`மெத்தட்	`() => void`		எல்லா வடிகட்டிகளையும் தேடலையும் அழிக்கிறது.

நீங்கள் அமைக்காமல் விடும் தனிப்பயனாக்க இன்புட்கள், மிக அருகிலுள்ள 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

ஒரு நெடுவரிசையின் கலங்களை வரைகிறது. சூழலில் வரிசையும், அதன் மதிப்பும் உரையும் இருக்கும்.

செலக்டர்: ng-template[nuiGridCell]

NuiGridCell: பண்புகள்
பெயர்	வகை	இயல்புநிலை	விளக்கம்
`nuiGridCell`இன்புட்	`string`		நெடுவரிசையின் id.

NuiGridHeader

ஒரு நெடுவரிசையின் தலைப்பை வரைகிறது.

செலக்டர்: ng-template[nuiGridHeader]

NuiGridHeader: பண்புகள்
பெயர்	வகை	இயல்புநிலை	விளக்கம்
`nuiGridHeader`இன்புட்	`string`		நெடுவரிசையின் id.

NuiGridEmpty

வரிசைகள் இல்லாதபோது தெரிவது. வடிகட்டிகள் அவற்றை மறைத்தனவா என்பதைச் சூழல் சொல்கிறது.

செலக்டர்: ng-template[nuiGridEmpty]