Needless UI

કમ્પોનન્ટ્સ

Data grid

ગમે તેટલી હરોળને સૉર્ટ, ફિલ્ટર, એડિટ અને સ્ક્રોલ કરો, અને પસંદ કરો.

ઇમ્પોર્ટ

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

NuiGrid

નેટિવ ટેબલ પર બનેલું ડેટા ગ્રિડ.

સિલેક્ટર
nui-grid
નામપ્રકારડિફૉલ્ટવર્ણન
rowsદ્વિમાર્ગીreadonly T[]ડેટા. એડિટ હરોળને બદલી નાખે છે, તેથી [(rows)] વડે બાઇન્ડ કરો.
columnsઇનપુટNuiGridColumn<T>[]કૉલમ, NuiGridColumn ઑબ્જેક્ટ તરીકે.
rowIdઇનપુટ(row: T) => unknownrow.id ?? rowહરોળની કી, પસંદગી અને ટ્રૅકિંગ માટે.
labelઇનપુટstringગ્રિડનું ઍક્સેસિબલ નામ.
selectionઇનપુટ'none' | 'single' | 'multiple''none'હરોળ પસંદ કરી શકાય કે નહીં, અને કેટલી.
selectedદ્વિમાર્ગીunknown[][]પસંદ કરેલી હરોળની કી.
sortદ્વિમાર્ગીNuiGridSort[][]સૉર્ટ, { column, direction } ઑબ્જેક્ટ તરીકે; પહેલો સૌથી પહેલાં લાગુ થાય છે.
filtersદ્વિમાર્ગીRecord<string, NuiGridFilter>{}દરેક કૉલમ id માટે એક ફિલ્ટર: એક ઑપરેટર અને એક મૂલ્ય.
searchદ્વિમાર્ગીstring''એવા શબ્દો, જે બધા હરોળમાં હોવા જ જોઈએ.
pageSizeદ્વિમાર્ગીnumber0દરેક પેજ પર હરોળ, અથવા એક જ સ્ક્રોલ થતી યાદી માટે 0.
pageદ્વિમાર્ગીnumber0બતાવેલું પેજ, 0 થી શરૂ.
pageSizesઇનપુટnumber[][10, 25, 50, 100]પેજરના વિકલ્પો.
virtualઇનપુટboolean | 'auto''auto'ફક્ત દેખાતી હરોળ રેન્ડર કરે છે: હંમેશાં, ક્યારેય નહીં, અથવા પેજ વગર 100 હરોળ પછી auto.
heightઇનપુટstringગ્રિડને સીમિત કરતી CSS લંબાઈ; સ્ક્રોલ અંદર થાય છે.
columnStateદ્વિમાર્ગીNuiGridColumnState[][]દરેક કૉલમની પહોળાઈ, ક્રમ, પિન અને દૃશ્યતા, સેવ કરવા અને પાછી લાવવા માટે.
modeઇનપુટ'client' | 'server''client'server હરોળ જેવી આવે તેવી જ બતાવે છે, અને સૉર્ટિંગ, ફિલ્ટરિંગ અને પેજિંગ તમારા પર છોડે છે.
totalઇનપુટnumberસર્વર પરની હરોળની સંખ્યા.
loadingઇનપુટbooleanfalseપ્રોગ્રેસ બાર બતાવે છે, અને હરોળ ન હોય ત્યારે પ્લેસહોલ્ડર હરોળ.
localeઇનપુટstringLOCALE_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આઉટપુટTEnter કે ડબલ-ક્લિકથી ખોલેલી હરોળ એમિટ કરે છે.
cellEditઆઉટપુટNuiGridEdit<T>લાગુ થયેલું દરેક એડિટ એમિટ કરે છે.
queryChangeઆઉટપુટNuiGridQueryસૉર્ટ, ફિલ્ટર, શોધ અને પેજ બદલાય ત્યારે તેમને એમિટ કરે છે.
exportCsvમેથડ(options?) => stringદેખાતી કૉલમની ફિલ્ટર અને સૉર્ટ કરેલી હરોળ, CSV તરીકે.
focusCellમેથડ(row: number, col: number) => voidકોઈ સેલ પર ફોકસ કરે છે; હરોળ -1 એ હેડર છે.
clearFiltersમેથડ() => voidબધા ફિલ્ટર અને શોધ સાફ કરે છે.

તમે સેટ ન કરેલાં કસ્ટમાઇઝેશન ઇનપુટ્સ સૌથી નજીકના data-nui-* એટ્રિબ્યુટમાંથી મૂલ્ય લે છે. કસ્ટમાઇઝેશન માર્ગદર્શિકા જુઓ.

NuiGridColumn

એક કૉલમ. ફક્ત id અને header જરૂરી છે.

નામપ્રકારડિફૉલ્ટવર્ણન
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પ્રોપર્ટીbooleantrueદરેકને 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ઇનપુટstringકૉલમનું id.

NuiGridHeader

કૉલમનું હેડર દોરે છે.

સિલેક્ટર
ng-template[nuiGridHeader]
નામપ્રકારડિફૉલ્ટવર્ણન
nuiGridHeaderઇનપુટstringકૉલમનું id.

NuiGridEmpty

કોઈ હરોળ ન હોય ત્યારે જે દેખાય તે. કૉન્ટેક્સ્ટ જણાવે છે કે ફિલ્ટરે તેમને છુપાવી છે કે નહીં.

સિલેક્ટર
ng-template[nuiGridEmpty]