Needless UI

கம்போனென்ட்கள்

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

எத்தனை வரிசைகளையும் வரிசைப்படுத்தி, வடிகட்டி, குழுவாக்கி, திருத்தி, ஏற்றுமதி செய்யுங்கள்.

இம்போர்ட்

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

NuiGrid

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

பெயர்வகைஇயல்புநிலைவிளக்கம்
rowsபிராப்readonly T[]தரவு. ஒரு திருத்தம் அதன் வரிசையைப் புதியதால் மாற்றி, onRowsChange-ஐ அழைக்கிறது; நீங்கள் அடுத்து அனுப்பும் rows, திருத்தங்களுக்குப் பதிலாக அமையும்.
onRowsChangeகால்பேக்(rows: readonly T[]) => voidஉறுதிசெய்த ஒவ்வொரு திருத்தத்துக்குப் பிறகும் வரிசைகளுடன் அழைக்கப்படுகிறது.
columnsபிராப்NuiGridColumn<T>[]நெடுவரிசைகள், NuiGridColumn ஆப்ஜெக்ட்களாக.
rowIdபிராப்(row: T) => unknownrow.id ?? rowதேர்வுக்கும் கண்காணிப்புக்குமான வரிசையின் சாவி.
labelபிராப்stringகட்டத்தின் அணுகல் பெயர்.
selectionபிராப்'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நிலை		number0ஒரு பக்கத்துக்கான வரிசைகள், அல்லது ஸ்க்ரோல் ஆகும் ஒரே பட்டியலுக்கு 0.
page
defaultPage
onPageChangeநிலை		number0காட்டப்படும் பக்கம், 0-இலிருந்து.
pageSizesபிராப்number[][10, 25, 50, 100]பக்கக் கட்டுப்பாட்டில் உள்ள தேர்வுகள்.
virtualபிராப்boolean | 'auto''auto'பார்வையில் உள்ள வரிசைகளை மட்டுமே ரெண்டர் செய்கிறது: எப்போதும், ஒருபோதும் இல்லை, அல்லது auto என்றால் பக்கங்கள் இல்லாதபோது 100 வரிசைகளுக்கு மேல்.
heightபிராப்stringகட்டத்தை வரம்பிடும் CSS நீளம்; அதற்குள் ஸ்க்ரோல் ஆகும்.
columnState
defaultColumnState
onColumnStateChangeநிலை		NuiGridColumnState[][]ஒவ்வொரு நெடுவரிசையின் அகலம், வரிசைமுறை, பின் நிலை, தெரிநிலை; சேமித்து மீட்டெடுக்க.
modeபிராப்'client' | 'server''client'server வரிசைகளை வந்தபடியே காட்டி, வரிசைப்படுத்தல், வடிகட்டுதல், பக்கமாக்கலை உங்களிடம் விடுகிறது.
totalபிராப்numberசர்வரில் உள்ள வரிசைகளின் எண்ணிக்கை.
loadingபிராப்booleanfalseமுன்னேற்றப் பட்டையையும், வரிசைகள் இல்லாதபோது பிளேஸ்ஹோல்டர் வரிசைகளையும் காட்டுகிறது.
localeபிராப்string'en-US'எண்களையும் தேதிகளையும் வடிவமைக்கிறது, தட்டச்சு செய்த எண்களைப் படிக்கிறது.
labelsபிராப்Partial<NuiGridLabels>கட்டம் காட்டும் அல்லது அறிவிக்கும் ஒவ்வொரு உரையும், மொழிபெயர்ப்பதற்காக.
cornersபிராப்NuiCornersஇதன் மூலைகளின் வடிவம்: round, squircle, bevel, scoop, notch அல்லது square.
radiusபிராப்NuiRadiusஇதன் மூலைகள் எவ்வளவு பெரியவை: none, small, medium, large அல்லது full.
densityபிராப்NuiDensityஇது எடுத்துக்கொள்ளும் இடம்: compact, regular அல்லது roomy.
groupByபிராப்string[][]வரிசைகளைக் குழுவாக்கும் நெடுவரிசைகள், வெளிப்புறமானது முதலில்.
collapsed
defaultCollapsed
onCollapsedChangeநிலை		string[][]மூடிய குழுக்களின் சாவிகள்; குழுக்கள் திறந்தே தொடங்குகின்றன.
getChildrenபிராப்(row: T) => T[] | undefinedஒரு வரிசையின் துணை வரிசைகள்: கட்டம் மரத் தரவைக் காட்டுகிறது.
expanded
defaultExpanded
onExpandedChangeநிலை		unknown[][]மரத் தரவில் திறந்துள்ள வரிசைகளின் சாவிகள்; அவை மூடியே தொடங்குகின்றன.
details
defaultDetails
onDetailsChangeநிலை		unknown[][]விவரங்கள் திறந்துள்ள வரிசைகளின் சாவிகள்.
totals, flashபிராப்booleanfalseவடிகட்டிய எல்லா வரிசைகள் மீதான திரட்டு மதிப்புகளின் வரிசை; உரை மாறும்போது கணநேரம் மின்னும் கலங்கள், நிலையான rowId கொண்ட வரிசைகளில்.
layoutபிராப்'table' | 'list' | 'auto''table'list வரிசைகளைக் கார்டுகளாகக் காட்டுகிறது; auto குறுகிய திரைகளில் அப்படிக் காட்டுகிறது.
toolbarபிராப்boolean | 'auto''auto'வரிசைகளை வரிசைப்படுத்தி, வடிகட்டி, அனைத்தையும் தேர்ந்தெடுக்கும் பட்டை: எப்போதும், ஒருபோதும் இல்லை, அல்லது auto என்றால் கார்டுகளுடன்.
renderEmptyரெண்டர் பிராப்(filtered: boolean) => ReactNodeவரிசைகள் இல்லாதபோது தெரிவது; வடிகட்டிகள் அவற்றை மறைத்தனவா என்பது அதற்குத் தெரிவிக்கப்படும்.
renderDetailரெண்டர் பிராப்(row: T) => ReactNodeஒரு வரிசையின் விவரங்கள், திறந்ததும் அதன் கீழே காட்டப்படும். கட்டம் நிலைமாற்றிகளின் நெடுவரிசை ஒன்றைச் சேர்க்கிறது.
onRowActivateகால்பேக்(row: T) => voidEnter அல்லது இருமுறை கிளிக் மூலம் திறந்த வரிசையுடன் அழைக்கப்படுகிறது.
onCellEditகால்பேக்(edit: NuiGridEdit<T>) => voidஉறுதிசெய்த ஒவ்வொரு திருத்தத்துடனும் அழைக்கப்படுகிறது.
onQueryChangeகால்பேக்(query: NuiGridQuery) => voidவரிசைப்படுத்தல், வடிகட்டிகள், தேடல், பக்கம் மாறும்போதெல்லாமும் தொடக்கத்தில் ஒருமுறையும் அவற்றுடன் அழைக்கப்படுகிறது.
refபிராப்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ஒரு நெடுவரிசையை, ரெண்டர் ஆன அதன் கலங்களில் மிக அகலமானதற்குப் பொருத்துகிறது.

நிலை, React-இன் சொந்த இன்புட்களைப் போலவே வேலை செய்கிறது: ஒரு மதிப்பை அனுப்பி, அதன் on…Change கால்பேக்கிலிருந்து அதைப் புதுப்பியுங்கள்; அல்லது ஒரு default… மதிப்பை அனுப்பி, அதைக் கம்போனென்ட்டே வைத்துக்கொள்ளட்டும்.

நீங்கள் அமைக்காமல் விடும் தனிப்பயனாக்கப் பிராப்கள், மிக அருகிலுள்ள data-nui-* ஆட்ரிபியூட்டைப் பின்பற்றும். தனிப்பயனாக்க வழிகாட்டியைப் பாருங்கள்.

NuiGridColumn

ஒரு நெடுவரிசை. Angular நெடுவரிசையின் ஒவ்வொரு பண்பையும் (id, header மட்டுமே கட்டாயம்), அதை வரையும் இந்த இரண்டையும் இது ஏற்கிறது.

பெயர்வகைஇயல்புநிலைவிளக்கம்
renderCellரெண்டர் பிராப்({ row, value, text, column }) => ReactNodeவரிசை, அதன் மதிப்பு, உரை ஆகியவற்றைக் கொண்டு நெடுவரிசையின் கலங்களை நீங்களே வரையலாம்.
renderHeaderரெண்டர் பிராப்(column) => ReactNodeநெடுவரிசையின் தலைப்பை நீங்களே வரையலாம்; அதற்குப் பெயரிடுவது அப்போதும் header-தான்.