Ma'lumot · compound
Ma'lumot töri
Jadvaldan köra ilovaga yaqin tör (APG grid): katakma-katak klaviatura (←↑→↓, Home/End, Ctrl+Home/End, PageUp/PageDown), katakni joyida tahrirlaş (Enter/F2/harf bosiş; Enter saqlaydi, Esc bekor qiladi), ustun kengligi (tutqiçni sudraş yoki sarlavhada Alt+←/→), qotgan sarlavha va birinçi ustun(lar), qator tanlaş (belgi ustuni, Shift+Böş joy, Ctrl+A) va saralaş. Tuzilma div + role, qatorlar aria-rowindex bilan — virtualizatsiyaga tayyor: DOMda faqat körinadigan qatorlar bölsa ham aria-rowcount töliq sonni aytadi. Xulq foxui.js'da (data-fx-datagrid). Guruhlaş va jami (4.130): data-group-by — ustun böyiça yiğiladigan guruh sarlavhalari, data-agg="sum|avg|count" ustunlarida guruh va pastki «Jami» qatori. Ustunlar (4.131): data-reorder — sarlavhani sudrab ustun tartibi (klaviatura: sarlavhada Alt+Shift+←/→); ustunlar paneli [data-fx-datagrid-columns="<id>"] — köriniş belgisi, ↑ ↓ tartib va «Qotiriş» (ustun belgi ustunidan keyin qotadi). Katak oraliği va joylaş (4.132): data-range — Shift+strelka, Shift+bosiş yoki sudraş bilan törtburçak oraliq; Ctrl+C — TSV (Excel/Sheets'ga), Ctrl+V — nusxalangan jadval faol katakdan boşlab tahrirlanadigan kataklarga, bitta qiymat — butun oraliqqa; son kataklari tekşiriladi. Master–detail (4.133): qatordan keyin .fx-datagrid__detail va .fx-datagrid__expand katagi — bosiş yoki Enter/Böşliq oçadi; saralaş va guruhlaşda tafsilot öz qatori bilan yuradi.
Katakni tahrirlaş — Enter yoki harf bosing, Esc bekor qiladi. Ustun kengligi — sarlavhada Alt+←/→.
Sarlavhani sudrang yoki Alt+Shift+←/→ — ustun tartibi. Shift+strelka — kataklar oraliği, Ctrl+C / Ctrl+V — Excel bilan almaşiş. ▸ — buyurtma tafsiloti.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-pin-first | off1 birinçi ustun qotadi2 tanlaş ustuni + birinçi ma'lumot ustuni | off |
data-gridlines | rowsboth ustunlar orasida ham çiziq | rows |
data-group-by | ustun raqami (0 dan) şu ustun böyiça guruh sarlavhalari | — |
data-agg | sum sarlavha katagida — yiğindiavg örtaçacount soni | — |
data-reorder | sarlavhani sudrab tartib | — |
data-range | katak oraliği, Ctrl+C / Ctrl+V | — |
Anatomiya
- root
.fx-datagridşart - head
.fx-datagrid__headixtiyoriy - body
.fx-datagrid__bodyşart - row
.fx-datagrid__rowşart - cell
.fx-datagrid__cellşart - check
.fx-datagrid__checkixtiyoriy - resize
.fx-datagrid__resizeixtiyoriy - input
.fx-datagrid__inputixtiyoriy - foot
.fx-datagrid__footixtiyoriy - group-row
.fx-datagrid__groupixtiyoriy - group-cell
.fx-datagrid__gcellixtiyoriy - twisty
.fx-datagrid__twistyixtiyoriy - total-row
.fx-datagrid__totalixtiyoriy - columns-panel
.fx-datagrid__columnsixtiyoriy - column-list
.fx-datagrid__collistixtiyoriy - column-item
.fx-datagrid__colitemixtiyoriy - expand
.fx-datagrid__expandixtiyoriy - detail-row
.fx-datagrid__detailixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← ↑ → ↓ | Qöşni katakka ötadi |
| Home / End | Qatorning birinçi / oxirgi katagi |
| Ctrl+Home / Ctrl+End | Törning birinçi / oxirgi katagi |
| PageUp / PageDown | 10 qator tepaga / pastga |
| Enter, F2, harf | Tahrirlanadigan katakni tahrirga oçadi; sarlavhada saralaydi |
| Enter (tahrirda) | Saqlaydi |
| Esc (tahrirda) | Bekor qiladi |
| Boʻsh joy, Shift+Boʻsh joy | Qatorni tanlaydi / bekor qiladi |
| Ctrl+A | Hamma qatorni tanlaydi |
| Alt+← / Alt+→ | Sarlavhada ustun kengligini özgartiradi (Shift — katta qadam) |
| Enter / Boʻsh joy, ←, → (guruh sarlavhasida) | Guruhni yiğadi yoki oçadi (aria-expanded) |
| Alt+Shift+← / → | Sarlavhada: ustunni çapga / öngga suradi (data-reorder) |
| Shift + strelka | Katak oraliğini kengaytiradi (data-range); Esc — bekor |
| Ctrl+C / Ctrl+V | Oraliqni TSV qilib nusxalaydi / Excel'dan joylaydi |
| Enter / Boʻshliq (▸ katagida) | Tafsilot qatorini oçadi / yopadi |
role="grid" + aria-label; qatorlar role="row" (aria-rowindex), sarlavha role="columnheader" (aria-sort), katak role="gridcell". Tanlangan qator aria-selected="true" (törda aria-multiselectable). Faqat bitta katak tabindex="0" (roving). Tahrirdagi maydonga aria-label beriladi, notöğri son aria-invalid. Virtualizatsiyada aria-rowcount va aria-rowindex şart. Oraliqdagi kataklar aria-selected="true" (törda aria-multiselectable). Oçiş katagi aria-expanded va aria-label («Tafsilot: Aziz Karimov»). Ustunlar panelidagi tugmalar nomli («Çapga suriş: Şahar»), «Qotiriş» — aria-pressed.
Naqş: WAI-ARIA APG grid · rol grid
Kod
AI uçun: qaçon işlatiladi
- Köp qatorli ma'lumotni joyida tahrirlaş, saralaş va tanlaş kerak (CRM, inventar, narxlar röyxati).
- Klaviatura bilan tez işlaydigan iş jadvali.
- Faqat öqiladigan, oddiy ma'lumot jadvali →
table - Içma-iç (iyerarxik) qatorlar →
treegrid - Vazifalar röyxati — holat/ustuvorlik bilan →
row - Oddiy öqiladigan ma'lumot uçun tör işlatmang — jadval (table) yengilroq va tabiiy.
- Tahrirlanadigan katakni faqat rang bilan belgilamang — hover'da fon, tahrirda maydon va fokus halqasi bor.
- Bir törda 2 tadan köp qotgan ustun qilmang — kiçik ekranda özi siğmay qoladi.
- Katak içiga bir neçta tabga arziydigan tugma qöymang — tör bitta Tab bekati; içki amallarga Enter bilan kiriladi.
- Tahrirdan çiqib ketganda özgarişni jimgina yöqotmang — blur saqlaydi, Esc aniq bekor qiladi.
- Joylaşda tahrirlanmaydigan katakni jimgina özgartirmang — faqat data-editable kataklarga yoziladi.
- Tafsilot qatoriga ikkinçi tör qöyib klaviatura tuzoğini yasamang — içki jadval faqat öqiş uçun bölsin.
npx foxui add datagrid
<div class="fx-datagrid" role="grid" aria-label="Mijozlar" aria-multiselectable="true" aria-rowcount="7" data-fx-datagrid data-pin-first="2" data-gridlines="both" style="--fx-datagrid-height: 22rem; --_cols: 44px 200px 140px 140px 180px">
<div class="fx-datagrid__head" role="rowgroup">
<div role="row" class="fx-datagrid__row" aria-rowindex="1">
<div role="columnheader" class="fx-datagrid__cell fx-datagrid__check" data-select-all><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Hammasini tanlaş"><span class="fx-check__box"></span></label></div>
<div role="columnheader" class="fx-datagrid__cell" data-sortable aria-sort="none">Mijoz<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
<div role="columnheader" class="fx-datagrid__cell" data-sortable aria-sort="none">Şahar<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
<div role="columnheader" class="fx-datagrid__cell">Holat<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
<div role="columnheader" class="fx-datagrid__cell" data-type="num" data-sortable aria-sort="none">Summa, söm<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
</div>
</div>
<div class="fx-datagrid__body" role="rowgroup">
<div role="row" class="fx-datagrid__row" aria-rowindex="2" aria-selected="false">
<div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Aziz Karimov"><span class="fx-check__box"></span></label></div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Aziz Karimov</div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Toşkent</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="1200000">1 200 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-rowindex="3" aria-selected="false">
<div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Bobur Rahimov"><span class="fx-check__box"></span></label></div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Bobur Rahimov</div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Samarqand</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="450000">450 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-rowindex="4" aria-selected="false">
<div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Dilnoza Yusupova"><span class="fx-check__box"></span></label></div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Dilnoza Yusupova</div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Buxoro</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="2380000">2 380 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-rowindex="5" aria-selected="false">
<div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Eldor Nazarov"><span class="fx-check__box"></span></label></div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Eldor Nazarov</div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Namangan</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="error">Rad etilgan</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="90000">90 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-rowindex="6" aria-selected="false">
<div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Feruza Ismoilova"><span class="fx-check__box"></span></label></div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Feruza Ismoilova</div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Andijon</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="760000">760 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-rowindex="7" aria-selected="false">
<div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Gulnora Sattorova"><span class="fx-check__box"></span></label></div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Gulnora Sattorova</div>
<div role="gridcell" class="fx-datagrid__cell" data-editable>Toşkent</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="3150000">3 150 000</div>
</div>
</div>
</div>
<p class="fx-datagrid__foot">Katakni tahrirlaş — Enter yoki harf bosing, Esc bekor qiladi. Ustun kengligi — sarlavhada Alt+←/→.</p>
<!-- Guruhlash va jami (4.130) -->
<div class="fx-datagrid" role="grid" aria-label="Bitimlar şaharlar böyiça" data-fx-datagrid data-group-by="1" style="--_cols: 220px 140px 160px 160px">
<div class="fx-datagrid__head" role="rowgroup"><div role="row" class="fx-datagrid__row">
<div role="columnheader" class="fx-datagrid__cell" data-sortable aria-sort="none">Mijoz</div><div role="columnheader" class="fx-datagrid__cell">Şahar</div><div role="columnheader" class="fx-datagrid__cell">Holat</div><div role="columnheader" class="fx-datagrid__cell" data-type="num" data-agg="sum" data-sortable aria-sort="none">Summa, söm</div>
</div></div>
<div class="fx-datagrid__body" role="rowgroup">
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Aziz Karimov</div><div role="gridcell" class="fx-datagrid__cell">Toşkent</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="1200000">1 200 000</div></div>
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Bobur Rahimov</div><div role="gridcell" class="fx-datagrid__cell">Samarqand</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="450000">450 000</div></div>
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Dilnoza Yusupova</div><div role="gridcell" class="fx-datagrid__cell">Toşkent</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="2300000">2 300 000</div></div>
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Jasur Aliyev</div><div role="gridcell" class="fx-datagrid__cell">Samarqand</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="780000">780 000</div></div>
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Malika Saidova</div><div role="gridcell" class="fx-datagrid__cell">Toşkent</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="error">Muddati ötgan</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="310000">310 000</div></div>
</div>
</div>
<!-- Ustunlar paneli va sudrash (4.131), katak oraligʻi va Excel'dan joylash (4.132), master–detail (4.133) -->
<div class="fx-card" style="padding:var(--fx-space-3);max-inline-size:22rem;margin-block-end:var(--fx-space-3)">
<span class="fx-label" id="dg-x-cols">Ustunlar</span>
<div class="fx-datagrid__columns" data-fx-datagrid-columns="dg-x" role="group" aria-labelledby="dg-x-cols"></div>
</div>
<div class="fx-datagrid" id="dg-x" role="grid" aria-label="Ulgurji buyurtmalar" data-fx-datagrid data-reorder data-range data-gridlines="both" style="--_cols: 44px 200px 140px 180px 160px">
<div class="fx-datagrid__head" role="rowgroup"><div role="row" class="fx-datagrid__row">
<div role="columnheader" class="fx-datagrid__cell" data-expand-all><span class="fx-sr-only">Tafsilot</span></div>
<div role="columnheader" class="fx-datagrid__cell" data-col="mijoz" data-sortable aria-sort="none">Mijoz<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
<div role="columnheader" class="fx-datagrid__cell" data-col="shahar" data-sortable aria-sort="none">Şahar<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
<div role="columnheader" class="fx-datagrid__cell" data-col="telefon">Telefon<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
<div role="columnheader" class="fx-datagrid__cell" data-col="summa" data-type="num" data-sortable aria-sort="none">Summa, söm<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
</div></div>
<div class="fx-datagrid__body" role="rowgroup">
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell fx-datagrid__expand" data-expand aria-label="Tafsilot: Aziz Karimov"></div><div role="gridcell" class="fx-datagrid__cell" data-editable>Aziz Karimov</div><div role="gridcell" class="fx-datagrid__cell" data-editable>Toşkent</div><div role="gridcell" class="fx-datagrid__cell" data-editable>+998 90 123 45 67</div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="12500000">12 500 000</div></div>
<div role="row" class="fx-datagrid__row fx-datagrid__detail"><div role="gridcell" class="fx-datagrid__cell">Paxta mato — 300 m, ipak — 40 m; yetkaziş 21-oktyabr, Sergeli ombori.</div></div>
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell fx-datagrid__expand" data-expand aria-label="Tafsilot: Bobur Rahimov"></div><div role="gridcell" class="fx-datagrid__cell" data-editable>Bobur Rahimov</div><div role="gridcell" class="fx-datagrid__cell" data-editable>Samarqand</div><div role="gridcell" class="fx-datagrid__cell" data-editable>+998 93 210 11 05</div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="4800000">4 800 000</div></div>
<div role="row" class="fx-datagrid__row fx-datagrid__detail"><div role="gridcell" class="fx-datagrid__cell">Trikotaj — 120 kg; tölov 50 % oldindan, qolgani yetkazilganda.</div></div>
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell fx-datagrid__expand" data-expand aria-label="Tafsilot: Dilnoza Yusupova"></div><div role="gridcell" class="fx-datagrid__cell" data-editable>Dilnoza Yusupova</div><div role="gridcell" class="fx-datagrid__cell" data-editable>Buxoro</div><div role="gridcell" class="fx-datagrid__cell" data-editable>+998 91 555 02 30</div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="7350000">7 350 000</div></div>
<div role="row" class="fx-datagrid__row fx-datagrid__detail"><div role="gridcell" class="fx-datagrid__cell">Atlas — 85 m; mijoz namunani tasdiqladi, şartnoma №HF-0451.</div></div>
<div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell fx-datagrid__expand" data-expand aria-label="Tafsilot: Jasur Aliyev"></div><div role="gridcell" class="fx-datagrid__cell" data-editable>Jasur Aliyev</div><div role="gridcell" class="fx-datagrid__cell" data-editable>Namangan</div><div role="gridcell" class="fx-datagrid__cell" data-editable>+998 99 870 44 12</div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="2100000">2 100 000</div></div>
<div role="row" class="fx-datagrid__row fx-datagrid__detail"><div role="gridcell" class="fx-datagrid__cell">Kiçik ulgurji: 6 xil mato, har biridan 20 m.</div></div>
</div>
</div>
<p class="fx-datagrid__foot">Sarlavhani sudrang yoki Alt+Shift+←/→ — ustun tartibi. Shift+strelka — kataklar oraliği, Ctrl+C / Ctrl+V — Excel bilan almaşiş. ▸ — buyurtma tafsiloti.</p>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-datagrid-height --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-popover-width --fx-radius-nav --fx-radius-surface --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary