\n \n {\n setQuery(next)\n // Back to page one on every edit. A narrower query can leave the\n // current page past the end of the result set, and a grid drawing\n // nothing under a pager that reports rows is worse than a grid\n // that moved.\n setPagination((current) => ({ ...current, pageIndex: 0 }))\n }}\n showClear\n />\n
\n\n \n \n \n \n \n\n \n {/*\n Four overrides, and every one of them undoes the same bug.\n `DataGridPagination` goes single row at `sm`, which is a VIEWPORT\n query rather than a container one, so inside a card narrower than\n 640px it stacks its three parts however wide the card itself is:\n page buttons, then the record range, then rows-per-page, reversed by\n `order-*` and about 140px tall. In a preview frame that is most of\n the height this example has to spend, and a pager nobody can see\n cannot show that the query changed the page count.\n flex-row py-0 the parent's own axis and padding. Plain\n utilities, because the primitive merges this\n className through `cn`, so tailwind-merge drops\n the `flex-col` and `py-2.5` it replaces.\n **:order-none! source order at every depth. Two levels need\n it, the two halves of the bar and the range\n against the buttons inside the right half.\n *:py-0! the two halves' own stacking padding.\n *:last:flex-row! the right half, which stacks internally too.\n The three `!` are load-bearing: those classes live on the\n primitive's own children, out of tailwind-merge's reach, so nothing\n else can win against them.\n\n `flex-wrap` is left alone deliberately, so this degrades rather than\n breaks: on a genuinely narrow phone the two halves wrap to two rows\n instead of forcing a 400px row into 375px.\n */}\n \n
\n \n \n )\n}","target":"components/examples/c-filters-7.tsx"}],"meta":{"order":7,"gridSize":1,"previewHeight":"520","label":"Table Filtering"}}