Ma'lumot · compound

Jadval

Ma'lumot jadvali: qotgan sarlavha, raqam ustuni öngda, jami — tfoot. Saralaş (th[aria-sort] + .fx-table__sort), qator tanlaş (belgi ustuni, «hammasi» qisman holat bilan), ommaviy amallar paneli, havola orqali kelingan qator (:target) belgilanadi. Xulq foxui.js'da (data-fx-table). Kengaytmalar (0.24): ziçlik (data-density), zebra va çegarali, qotgan birinçi ustun (data-pin-first), qotgan jami qatori (data-sticky-foot), kengaytiriladigan qator (.fx-table__expand + .fx-table__detail), qatordagi amallar (hover/fokusda), skelet qatorlar, ustun körinişi menyusi (data-fx-table-cols) va Shift+bosiş bilan oraliq tanlaş. Telefonda kartalar (4.134): data-stack="sm|md" — tor ekranda har qator «yorliq : qiymat» juftlari bilan kartaga aylanadi. Ustun enini özgartiriş (4.135): data-resizable — sarlavha çetidagi tutqiç (datagrid'dagi kabi): sudraş, klaviaturada fokuslanadi (← → 16 px, Shift — 64, Home — eng tor, Enter yoki ikki marta bosiş — avtomatik en). Birinçi özgarişda jadval table-layout: fixed böladi; uzun matn «…» bilan kesiladi. Hodisa fx-table-resize {col, width}.

beta0.3.0 danyangilandi 0.29.0.fx-tableFaqat CSS
Holat
AzizTölangan1 200 000
BoburKutilmoqda450 000
Oktyabr buyurtmalari
MijozŞaharHolatSummaAmallar
AzizToşkentTölangan1 200 000
BoburSamarqandKutilmoqda450 000
Jami1 650 000
Körinadigan ustunlar
Ziçlik
Bugungi buyurtmalar
MijozTelefonHolatSumma
Aziz Karimov+998 90 123 45 67Tölangan1 200 000 söm
Shahnoza Olimova+998 93 555 12 40Kutilmoqda640 000 söm
Omborxona qoldiqlari
MahsulotOmborQoldiq, donaNarx, söm
Paxta mato, 150 sm, oqToşkent, Sergeli1 24038 000
Ipak mato «Atlas», naqşliMarğilon310145 000
Trikotaj, qoraSamarqand2 08027 500

Variantlar

AtributQiymatlarStandart
data-sizesm
md		md
data-densitycompact Ixçam — qator 4 padding
default
comfortable Keng — qator 16 padding		default
data-zebratrue—
data-borderedtrue—
data-pin-firsttrue—
data-sticky-foottrue—
data-stacksm < 640 px kartalar
md < 840 px kartalar		—
data-resizable ustun enini sudrab özgartiriş—

Anatomiya

  1. scroll.fx-table-scrollixtiyoriy
  2. root.fx-tableşart
  3. sort.fx-table__sortixtiyoriy
  4. check.fx-table__checkixtiyoriy
  5. bulk.fx-table-bulkixtiyoriy
  6. bulk-count.fx-table-bulk__countixtiyoriy
  7. expand.fx-table__expandixtiyoriy
  8. detail.fx-table__detailixtiyoriy
  9. actions.fx-table__actionsixtiyoriy
  10. skeleton.fx-table__skeletonixtiyoriy
  11. options-list.fx-table-optsixtiyoriy
  12. resize.fx-table__resizeixtiyoriy

Holatlar

hoversortedselectedtargetexpandedresizing

Klaviatura va kiriş

TugmaAmal
Tab, EnterSaralaş tugmasi — ustun böyiça saralaydi (ösiş ↔ kamayiş)
SpaceQatorni tanlaydi
Shift + bosishBelgi katakçasida — oxirgi bosilgan bilan hozirgisi orasidagi qatorlarni tanlaydi
Enter, SpaceQator çevroni — tafsilot qatorini oçadi/yopadi (aria-expanded)
← → (tutqichda)Ustun eni 16 px (Shift — 64 px)
Home (tutqichda)Eng tor en
Enter (tutqichda)Avtomatik en

<caption> yoki aria-label bilan nom; sarlavha kataklari <th scope="col">, jami qatori <th scope="row">. Saralanadigan ustunda aria-sort. Tutqiç role="separator" (aria-orientation=vertical, aria-valuenow — piksel, aria-label «Ustun eni: Mahsulot»), fokuslanadi.

Naqş: WAI-ARIA APG table · rol table

Kod

AI uçun: qaçon işlatiladi
Işlating
  • Bir xil tuzilmadagi köp yozuvni soliştiriş.
Işlatmang
  • 1–3 ta yozuv → card
  • Holatni katakda faqat rang bilan bermang — belgi (badge) va söz.
  • Kurs yoki narx ustunini jamlamang — faqat pul summasi jamlanadi.
  • Butun sahifani gorizontal aylantirmang — jadval öz hududida (.fx-table-scroll) aylanadi.
  • Qotgan birinçi ustunga 3 tadan köp ustun qöşmang — kiçik ekranda özi siğmay qoladi.
  • Qator amallarini faqat hover'da qoldirib, klaviatura va sensorli qurilmani unutmang — fokusda va sensorda doim körinadi.
npx foxui add table
<div class="fx-table-bulk" hidden data-fx-table-bulk="t1"><span class="fx-table-bulk__count"><span data-count>0</span> ta tanlandi</span><button class="fx-btn" data-size="sm">Holatni özgartiriş</button></div>
<div class="fx-table-scroll">
<table class="fx-table" id="t1" data-fx-table>
  <thead><tr>
    <th class="fx-table__check"><label class="fx-check"><input type="checkbox" aria-label="Hammasini tanlaş" data-select-all><span class="fx-check__box"></span></label></th>
    <th aria-sort="none"><button class="fx-table__sort">Mijoz</button></th>
    <th data-type="nowrap">Holat</th>
    <th data-type="num" aria-sort="descending"><button class="fx-table__sort">Summa</button></th>
  </tr></thead>
  <tbody>
    <tr><td class="fx-table__check"><label class="fx-check"><input type="checkbox" aria-label="Tanlaş: Aziz"><span class="fx-check__box"></span></label></td><td>Aziz</td><td data-type="nowrap"><span class="fx-status" data-tone="success">Tölangan</span></td><td data-type="num" data-value="1200000">1 200 000</td></tr>
    <tr><td class="fx-table__check"><label class="fx-check"><input type="checkbox" aria-label="Tanlaş: Bobur"><span class="fx-check__box"></span></label></td><td>Bobur</td><td data-type="nowrap"><span class="fx-status" data-tone="warning">Kutilmoqda</span></td><td data-type="num" data-value="450000">450 000</td></tr>
  </tbody>
</table>
</div>

<!-- Kengaytmalar -->
<div class="fx-table-scroll">
<table class="fx-table" id="t2" data-fx-table data-pin-first data-sticky-foot data-zebra>
  <caption class="fx-sr-only">Oktyabr buyurtmalari</caption>
  <thead><tr>
    <th data-col="mijoz" scope="col">Mijoz</th><th data-col="shahar" scope="col">Şahar</th><th data-col="holat" scope="col" data-type="nowrap">Holat</th><th data-col="summa" scope="col" data-type="num">Summa</th><th scope="col"><span class="fx-sr-only">Amallar</span></th>
  </tr></thead>
  <tbody>
    <tr><td><button class="fx-table__expand" aria-expanded="false" aria-label="Tafsilot: Aziz"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button> Aziz</td><td>Toşkent</td><td data-type="nowrap"><span class="fx-status" data-tone="success">Tölangan</span></td><td data-type="num">1 200 000</td><td class="fx-table__actions"><button class="fx-btn" data-variant="ghost" data-size="sm">Oçiş</button></td></tr>
    <tr class="fx-table__detail" hidden><td colspan="5">Buyurtma №128 · 3 ta mahsulot · yetkaziş 18-oktyabr.</td></tr>
    <tr><td><button class="fx-table__expand" aria-expanded="false" aria-label="Tafsilot: Bobur"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button> Bobur</td><td>Samarqand</td><td data-type="nowrap"><span class="fx-status" data-tone="warning">Kutilmoqda</span></td><td data-type="num">450 000</td><td class="fx-table__actions"><button class="fx-btn" data-variant="ghost" data-size="sm">Oçiş</button></td></tr>
    <tr class="fx-table__detail" hidden><td colspan="5">Buyurtma №131 · tölov kutilmoqda.</td></tr>
    <tr class="fx-table__skeleton" aria-hidden="true"><td><span class="fx-skeleton"></span></td><td><span class="fx-skeleton"></span></td><td><span class="fx-skeleton"></span></td><td><span class="fx-skeleton"></span></td><td></td></tr>
  </tbody>
  <tfoot><tr><th scope="row">Jami</th><td></td><td></td><td data-type="num">1 650 000</td><td></td></tr></tfoot>
</table>
</div>
<button class="fx-btn" data-size="sm" type="button" popovertarget="t2-cols">Ustunlar</button>
<div class="fx-popover" id="t2-cols" popover data-fx-table-cols="t2">
  <fieldset class="fx-table-opts"><legend>Körinadigan ustunlar</legend>
    <label class="fx-check"><input type="checkbox" value="shahar" checked><span class="fx-check__box"></span>Şahar</label>
    <label class="fx-check"><input type="checkbox" value="holat" checked><span class="fx-check__box"></span>Holat</label>
    <label class="fx-check"><input type="checkbox" value="summa" checked><span class="fx-check__box"></span>Summa</label>
  </fieldset>
</div>
<fieldset class="fx-table-opts" data-fx-table-density="t2"><legend>Ziçlik</legend>
  <label class="fx-check"><input type="radio" name="t2-d" value="compact"><span class="fx-check__box"></span>Ixçam</label>
  <label class="fx-check"><input type="radio" name="t2-d" value="default" checked><span class="fx-check__box"></span>Standart</label>
  <label class="fx-check"><input type="radio" name="t2-d" value="comfortable"><span class="fx-check__box"></span>Keng</label>
</fieldset>
<!-- Telefonda kartalar (4.134) -->
<table class="fx-table" data-stack="sm" data-fx-table>
  <caption class="fx-sr-only">Bugungi buyurtmalar</caption>
  <thead><tr><th scope="col">Mijoz</th><th scope="col">Telefon</th><th scope="col" data-type="nowrap">Holat</th><th scope="col" data-type="num">Summa</th></tr></thead>
  <tbody>
    <tr><td>Aziz Karimov</td><td>+998 90 123 45 67</td><td data-type="nowrap"><span class="fx-status" data-tone="success">Tölangan</span></td><td data-type="num">1 200 000 söm</td></tr>
    <tr><td>Shahnoza Olimova</td><td>+998 93 555 12 40</td><td data-type="nowrap"><span class="fx-status" data-tone="warning">Kutilmoqda</span></td><td data-type="num">640 000 söm</td></tr>
  </tbody>
</table>
<!-- Ustun enini oʻzgartirish (4.135) -->
<div class="fx-table-scroll">
<table class="fx-table" id="t-rs" data-fx-table data-resizable>
  <caption class="fx-sr-only">Omborxona qoldiqlari</caption>
  <thead><tr><th scope="col">Mahsulot</th><th scope="col">Ombor</th><th scope="col" data-type="num">Qoldiq, dona</th><th scope="col" data-type="num">Narx, söm</th></tr></thead>
  <tbody>
    <tr><td>Paxta mato, 150 sm, oq</td><td>Toşkent, Sergeli</td><td data-type="num">1 240</td><td data-type="num">38 000</td></tr>
    <tr><td>Ipak mato «Atlas», naqşli</td><td>Marğilon</td><td data-type="num">310</td><td data-type="num">145 000</td></tr>
    <tr><td>Trikotaj, qora</td><td>Samarqand</td><td data-type="num">2 080</td><td data-type="num">27 500</td></tr>
  </tbody>
</table>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-page --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-density --fx-motion-fast --fx-radius-badge --fx-radius-control --fx-radius-surface --fx-size-checkbox --fx-size-icon-sm --fx-size-min-target --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.
Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)