Needless UI

কম্পোনেন্ট

Data grid

যেকোনো সংখ্যক সারি সর্ট, ফিল্টার, গ্রুপ, এডিট ও এক্সপোর্ট করুন।

ইমপোর্ট

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'শুধু দৃশ্যমান সারিগুলো রেন্ডার করে: সবসময়, কখনো না, অথবা পেজ ছাড়া 100 সারির পরে auto।
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 থেকে।