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]