Blocks

Interactive data table with filters, column settings, selection, and pinned columns. Column labels, actions, and demo badge text use Paraglide (switch Language in the header). Toolbar, pagination, density, and the filter panel still use the data table’s built-in locale bundle keyed to the same language.

Loading…
Page 1 of 1

Filter surfaces

Bar (bazza-style) and Panel (Zoho-style) are independently pluggable. The four demos below cover the documented configurations end-to-end on the same schema/data.

DataTable — Bar only (default)

The default configuration: bazza-style filter bar above the table.

ORD-2100Acme CorpDraftLow$19.991Jan 1, 2026Jan 1, 2026NoElectronicsweb—
ORD-2101Globex IncConfirmedMedium$147.364Jan 4, 2026Jan 5, 2026NoApparelphoneRush delivery
ORD-2102InitechShippedHigh$274.737Jan 7, 2026Jan 9, 2026YesHomeediGift wrap
ORD-2103Umbrella LLCDeliveredUrgent$402.1010Jan 10, 2026Jan 13, 2026YesFoodposPO required
ORD-2104Soylent CorpCancelledLow$529.4713Jan 13, 2026Jan 17, 2026NoElectronicswebNet 30
ORD-2105Wayne EnterprisesDraftMedium$656.8416Jan 16, 2026Jan 16, 2026NoApparelphoneWarehouse B
ORD-2106Stark IndustriesConfirmedHigh$784.2119Jan 19, 2026Jan 20, 2026NoHomeediContact buyer before ship
ORD-2107OscorpShippedUrgent$911.5822Jan 22, 2026Jan 24, 2026YesFoodposSignature on delivery
ORD-2108Cyberdyne SystemsDeliveredLow$1,038.9525Jan 25, 2026Jan 28, 2026YesElectronicswebFragile
ORD-2109Wonka IndustriesCancelledMedium$1,166.3228Jan 28, 2026Feb 1, 2026NoApparelphoneBackorder OK
ORD-2110HooliDraftHigh$1,293.6931Jan 31, 2026Jan 31, 2026NoHomeediSplit shipment allowed
ORD-2111Vehement CapitalConfirmedUrgent$1,421.0634Feb 3, 2026Feb 4, 2026NoFoodpos—
ORD-2112Massive DynamicShippedLow$1,548.4337Feb 6, 2026Feb 8, 2026YesElectronicswebRush delivery
ORD-2113Prestige WorldwideDeliveredMedium$1,675.8040Feb 9, 2026Feb 12, 2026YesApparelphoneGift wrap
ORD-2114Vandelay IndustriesCancelledHigh$1,803.1743Feb 12, 2026Feb 16, 2026NoHomeediPO required
ORD-2115Paper Street Soap Co.DraftUrgent$1,930.5446Feb 15, 2026Feb 15, 2026NoFoodposNet 30
ORD-2116Bluth CompanyConfirmedLow$2,057.9149Feb 18, 2026Feb 19, 2026NoElectronicswebWarehouse B
ORD-2117Pied PiperShippedMedium$2,185.2852Feb 21, 2026Feb 23, 2026YesApparelphoneContact buyer before ship
ORD-2118MomCorpDeliveredHigh$2,312.6555Feb 24, 2026Feb 27, 2026YesHomeediSignature on delivery
ORD-2119Planet ExpressCancelledUrgent$2,440.0258Feb 27, 2026Mar 3, 2026NoFoodposFragile
ORD-2120Acme CorpDraftLow$2,567.3961Mar 2, 2026Mar 2, 2026NoElectronicswebBackorder OK
ORD-2121Globex IncConfirmedMedium$2,694.7664Mar 5, 2026Mar 6, 2026NoApparelphoneSplit shipment allowed
ORD-2122InitechShippedHigh$2,822.1367Mar 8, 2026Mar 10, 2026YesHomeedi—
ORD-2123Umbrella LLCDeliveredUrgent$2,949.5070Mar 11, 2026Mar 14, 2026YesFoodposRush delivery
ORD-2124Soylent CorpCancelledLow$3,076.8773Mar 14, 2026Mar 18, 2026NoElectronicswebGift wrap

DataTable — Panel only

Zoho-style filter panel; bar disabled. Apply batches all changes.

ORD-2100Acme CorpDraftLow$19.991Jan 1, 2026Jan 1, 2026NoElectronicsweb—
ORD-2101Globex IncConfirmedMedium$147.364Jan 4, 2026Jan 5, 2026NoApparelphoneRush delivery
ORD-2102InitechShippedHigh$274.737Jan 7, 2026Jan 9, 2026YesHomeediGift wrap
ORD-2103Umbrella LLCDeliveredUrgent$402.1010Jan 10, 2026Jan 13, 2026YesFoodposPO required
ORD-2104Soylent CorpCancelledLow$529.4713Jan 13, 2026Jan 17, 2026NoElectronicswebNet 30
ORD-2105Wayne EnterprisesDraftMedium$656.8416Jan 16, 2026Jan 16, 2026NoApparelphoneWarehouse B
ORD-2106Stark IndustriesConfirmedHigh$784.2119Jan 19, 2026Jan 20, 2026NoHomeediContact buyer before ship
ORD-2107OscorpShippedUrgent$911.5822Jan 22, 2026Jan 24, 2026YesFoodposSignature on delivery
ORD-2108Cyberdyne SystemsDeliveredLow$1,038.9525Jan 25, 2026Jan 28, 2026YesElectronicswebFragile
ORD-2109Wonka IndustriesCancelledMedium$1,166.3228Jan 28, 2026Feb 1, 2026NoApparelphoneBackorder OK
ORD-2110HooliDraftHigh$1,293.6931Jan 31, 2026Jan 31, 2026NoHomeediSplit shipment allowed
ORD-2111Vehement CapitalConfirmedUrgent$1,421.0634Feb 3, 2026Feb 4, 2026NoFoodpos—
ORD-2112Massive DynamicShippedLow$1,548.4337Feb 6, 2026Feb 8, 2026YesElectronicswebRush delivery
ORD-2113Prestige WorldwideDeliveredMedium$1,675.8040Feb 9, 2026Feb 12, 2026YesApparelphoneGift wrap
ORD-2114Vandelay IndustriesCancelledHigh$1,803.1743Feb 12, 2026Feb 16, 2026NoHomeediPO required
ORD-2115Paper Street Soap Co.DraftUrgent$1,930.5446Feb 15, 2026Feb 15, 2026NoFoodposNet 30
ORD-2116Bluth CompanyConfirmedLow$2,057.9149Feb 18, 2026Feb 19, 2026NoElectronicswebWarehouse B
ORD-2117Pied PiperShippedMedium$2,185.2852Feb 21, 2026Feb 23, 2026YesApparelphoneContact buyer before ship
ORD-2118MomCorpDeliveredHigh$2,312.6555Feb 24, 2026Feb 27, 2026YesHomeediSignature on delivery
ORD-2119Planet ExpressCancelledUrgent$2,440.0258Feb 27, 2026Mar 3, 2026NoFoodposFragile
ORD-2120Acme CorpDraftLow$2,567.3961Mar 2, 2026Mar 2, 2026NoElectronicswebBackorder OK
ORD-2121Globex IncConfirmedMedium$2,694.7664Mar 5, 2026Mar 6, 2026NoApparelphoneSplit shipment allowed
ORD-2122InitechShippedHigh$2,822.1367Mar 8, 2026Mar 10, 2026YesHomeedi—
ORD-2123Umbrella LLCDeliveredUrgent$2,949.5070Mar 11, 2026Mar 14, 2026YesFoodposRush delivery
ORD-2124Soylent CorpCancelledLow$3,076.8773Mar 14, 2026Mar 18, 2026NoElectronicswebGift wrap

DataTable — Bar + Panel

Bar uses chips-only variant alongside the panel. Chip edits commit immediately; the panel still stages rows until Apply.

ORD-2100Acme CorpDraftLow$19.991Jan 1, 2026Jan 1, 2026NoElectronicsweb—
ORD-2101Globex IncConfirmedMedium$147.364Jan 4, 2026Jan 5, 2026NoApparelphoneRush delivery
ORD-2102InitechShippedHigh$274.737Jan 7, 2026Jan 9, 2026YesHomeediGift wrap
ORD-2103Umbrella LLCDeliveredUrgent$402.1010Jan 10, 2026Jan 13, 2026YesFoodposPO required
ORD-2104Soylent CorpCancelledLow$529.4713Jan 13, 2026Jan 17, 2026NoElectronicswebNet 30
ORD-2105Wayne EnterprisesDraftMedium$656.8416Jan 16, 2026Jan 16, 2026NoApparelphoneWarehouse B
ORD-2106Stark IndustriesConfirmedHigh$784.2119Jan 19, 2026Jan 20, 2026NoHomeediContact buyer before ship
ORD-2107OscorpShippedUrgent$911.5822Jan 22, 2026Jan 24, 2026YesFoodposSignature on delivery
ORD-2108Cyberdyne SystemsDeliveredLow$1,038.9525Jan 25, 2026Jan 28, 2026YesElectronicswebFragile
ORD-2109Wonka IndustriesCancelledMedium$1,166.3228Jan 28, 2026Feb 1, 2026NoApparelphoneBackorder OK
ORD-2110HooliDraftHigh$1,293.6931Jan 31, 2026Jan 31, 2026NoHomeediSplit shipment allowed
ORD-2111Vehement CapitalConfirmedUrgent$1,421.0634Feb 3, 2026Feb 4, 2026NoFoodpos—
ORD-2112Massive DynamicShippedLow$1,548.4337Feb 6, 2026Feb 8, 2026YesElectronicswebRush delivery
ORD-2113Prestige WorldwideDeliveredMedium$1,675.8040Feb 9, 2026Feb 12, 2026YesApparelphoneGift wrap
ORD-2114Vandelay IndustriesCancelledHigh$1,803.1743Feb 12, 2026Feb 16, 2026NoHomeediPO required
ORD-2115Paper Street Soap Co.DraftUrgent$1,930.5446Feb 15, 2026Feb 15, 2026NoFoodposNet 30
ORD-2116Bluth CompanyConfirmedLow$2,057.9149Feb 18, 2026Feb 19, 2026NoElectronicswebWarehouse B
ORD-2117Pied PiperShippedMedium$2,185.2852Feb 21, 2026Feb 23, 2026YesApparelphoneContact buyer before ship
ORD-2118MomCorpDeliveredHigh$2,312.6555Feb 24, 2026Feb 27, 2026YesHomeediSignature on delivery
ORD-2119Planet ExpressCancelledUrgent$2,440.0258Feb 27, 2026Mar 3, 2026NoFoodposFragile
ORD-2120Acme CorpDraftLow$2,567.3961Mar 2, 2026Mar 2, 2026NoElectronicswebBackorder OK
ORD-2121Globex IncConfirmedMedium$2,694.7664Mar 5, 2026Mar 6, 2026NoApparelphoneSplit shipment allowed
ORD-2122InitechShippedHigh$2,822.1367Mar 8, 2026Mar 10, 2026YesHomeedi—
ORD-2123Umbrella LLCDeliveredUrgent$2,949.5070Mar 11, 2026Mar 14, 2026YesFoodposRush delivery
ORD-2124Soylent CorpCancelledLow$3,076.8773Mar 14, 2026Mar 18, 2026NoElectronicswebGift wrap

DataTable — Panel + Saved Filters dropdown

The Saved Filters dropdown lives in the panel header. Seeded with two presets via initialFilterPresets; persists new saves to localStorage. Use the title's dropdown to apply, rename, or delete a preset; click Save filterin the footer to capture the staged panel draft (including rows not yet applied) as a new preset.

ORD-2100Acme CorpDraftLow$19.991Jan 1, 2026Jan 1, 2026NoElectronicsweb—
ORD-2101Globex IncConfirmedMedium$147.364Jan 4, 2026Jan 5, 2026NoApparelphoneRush delivery
ORD-2102InitechShippedHigh$274.737Jan 7, 2026Jan 9, 2026YesHomeediGift wrap
ORD-2103Umbrella LLCDeliveredUrgent$402.1010Jan 10, 2026Jan 13, 2026YesFoodposPO required
ORD-2104Soylent CorpCancelledLow$529.4713Jan 13, 2026Jan 17, 2026NoElectronicswebNet 30
ORD-2105Wayne EnterprisesDraftMedium$656.8416Jan 16, 2026Jan 16, 2026NoApparelphoneWarehouse B
ORD-2106Stark IndustriesConfirmedHigh$784.2119Jan 19, 2026Jan 20, 2026NoHomeediContact buyer before ship
ORD-2107OscorpShippedUrgent$911.5822Jan 22, 2026Jan 24, 2026YesFoodposSignature on delivery
ORD-2108Cyberdyne SystemsDeliveredLow$1,038.9525Jan 25, 2026Jan 28, 2026YesElectronicswebFragile
ORD-2109Wonka IndustriesCancelledMedium$1,166.3228Jan 28, 2026Feb 1, 2026NoApparelphoneBackorder OK
ORD-2110HooliDraftHigh$1,293.6931Jan 31, 2026Jan 31, 2026NoHomeediSplit shipment allowed
ORD-2111Vehement CapitalConfirmedUrgent$1,421.0634Feb 3, 2026Feb 4, 2026NoFoodpos—
ORD-2112Massive DynamicShippedLow$1,548.4337Feb 6, 2026Feb 8, 2026YesElectronicswebRush delivery
ORD-2113Prestige WorldwideDeliveredMedium$1,675.8040Feb 9, 2026Feb 12, 2026YesApparelphoneGift wrap
ORD-2114Vandelay IndustriesCancelledHigh$1,803.1743Feb 12, 2026Feb 16, 2026NoHomeediPO required
ORD-2115Paper Street Soap Co.DraftUrgent$1,930.5446Feb 15, 2026Feb 15, 2026NoFoodposNet 30
ORD-2116Bluth CompanyConfirmedLow$2,057.9149Feb 18, 2026Feb 19, 2026NoElectronicswebWarehouse B
ORD-2117Pied PiperShippedMedium$2,185.2852Feb 21, 2026Feb 23, 2026YesApparelphoneContact buyer before ship
ORD-2118MomCorpDeliveredHigh$2,312.6555Feb 24, 2026Feb 27, 2026YesHomeediSignature on delivery
ORD-2119Planet ExpressCancelledUrgent$2,440.0258Feb 27, 2026Mar 3, 2026NoFoodposFragile
ORD-2120Acme CorpDraftLow$2,567.3961Mar 2, 2026Mar 2, 2026NoElectronicswebBackorder OK
ORD-2121Globex IncConfirmedMedium$2,694.7664Mar 5, 2026Mar 6, 2026NoApparelphoneSplit shipment allowed
ORD-2122InitechShippedHigh$2,822.1367Mar 8, 2026Mar 10, 2026YesHomeedi—
ORD-2123Umbrella LLCDeliveredUrgent$2,949.5070Mar 11, 2026Mar 14, 2026YesFoodposRush delivery
ORD-2124Soylent CorpCancelledLow$3,076.8773Mar 14, 2026Mar 18, 2026NoElectronicswebGift wrap

DataTable — Panel + Quick Filters

Filter panel with a quick-filter section and field rows. Quick filters contribute their JsonLogic directly to the merged top-level rule. Use Apply Filter to commit panel edits and Clear to remove all filters and apply immediately.

ORD-2100Acme CorpDraftLow$19.991Jan 1, 2026Jan 1, 2026NoElectronicsweb—
ORD-2101Globex IncConfirmedMedium$147.364Jan 4, 2026Jan 5, 2026NoApparelphoneRush delivery
ORD-2102InitechShippedHigh$274.737Jan 7, 2026Jan 9, 2026YesHomeediGift wrap
ORD-2103Umbrella LLCDeliveredUrgent$402.1010Jan 10, 2026Jan 13, 2026YesFoodposPO required
ORD-2104Soylent CorpCancelledLow$529.4713Jan 13, 2026Jan 17, 2026NoElectronicswebNet 30
ORD-2105Wayne EnterprisesDraftMedium$656.8416Jan 16, 2026Jan 16, 2026NoApparelphoneWarehouse B
ORD-2106Stark IndustriesConfirmedHigh$784.2119Jan 19, 2026Jan 20, 2026NoHomeediContact buyer before ship
ORD-2107OscorpShippedUrgent$911.5822Jan 22, 2026Jan 24, 2026YesFoodposSignature on delivery
ORD-2108Cyberdyne SystemsDeliveredLow$1,038.9525Jan 25, 2026Jan 28, 2026YesElectronicswebFragile
ORD-2109Wonka IndustriesCancelledMedium$1,166.3228Jan 28, 2026Feb 1, 2026NoApparelphoneBackorder OK
ORD-2110HooliDraftHigh$1,293.6931Jan 31, 2026Jan 31, 2026NoHomeediSplit shipment allowed
ORD-2111Vehement CapitalConfirmedUrgent$1,421.0634Feb 3, 2026Feb 4, 2026NoFoodpos—
ORD-2112Massive DynamicShippedLow$1,548.4337Feb 6, 2026Feb 8, 2026YesElectronicswebRush delivery
ORD-2113Prestige WorldwideDeliveredMedium$1,675.8040Feb 9, 2026Feb 12, 2026YesApparelphoneGift wrap
ORD-2114Vandelay IndustriesCancelledHigh$1,803.1743Feb 12, 2026Feb 16, 2026NoHomeediPO required
ORD-2115Paper Street Soap Co.DraftUrgent$1,930.5446Feb 15, 2026Feb 15, 2026NoFoodposNet 30
ORD-2116Bluth CompanyConfirmedLow$2,057.9149Feb 18, 2026Feb 19, 2026NoElectronicswebWarehouse B
ORD-2117Pied PiperShippedMedium$2,185.2852Feb 21, 2026Feb 23, 2026YesApparelphoneContact buyer before ship
ORD-2118MomCorpDeliveredHigh$2,312.6555Feb 24, 2026Feb 27, 2026YesHomeediSignature on delivery
ORD-2119Planet ExpressCancelledUrgent$2,440.0258Feb 27, 2026Mar 3, 2026NoFoodposFragile
ORD-2120Acme CorpDraftLow$2,567.3961Mar 2, 2026Mar 2, 2026NoElectronicswebBackorder OK
ORD-2121Globex IncConfirmedMedium$2,694.7664Mar 5, 2026Mar 6, 2026NoApparelphoneSplit shipment allowed
ORD-2122InitechShippedHigh$2,822.1367Mar 8, 2026Mar 10, 2026YesHomeedi—
ORD-2123Umbrella LLCDeliveredUrgent$2,949.5070Mar 11, 2026Mar 14, 2026YesFoodposRush delivery
ORD-2124Soylent CorpCancelledLow$3,076.8773Mar 14, 2026Mar 18, 2026NoElectronicswebGift wrap

Standalone — useDataTableFilters hook

The headless hook used outside of `<DataTable>`; a custom layout drives both filter surfaces from the same state.

No filters applied. Use the panel or chips to start filtering.

Code Block

Shiki highlighting, optional line numbers, and copy. See the dedicated docs for full props and variants.

server.ts
Loading syntax highlight

Mermaid Renderer

Preview-first diagrams with code/source toggle, zoom, fullscreen, and SVG/PNG export. See the dedicated docs for props and theming.

Loading MermaidLoading diagram…