Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

server-side filtering has been achieved internally for bazza/ui's data table filters 🤯 we provide you top tier UI/UX and fully managed state + logic you share the filter state with anything — TANSTACK table, query, nuqs, SWR — it's up to you coming soon.

kian bazza

2,598 subscribers

18,523 views • 1 year ago •via X (Twitter)

Education Science & Technology Arts

Anya Rossi• Live Now

Private livecam show

12 Comments

Jay Ghiya1 year ago

@bazzaui @tan_stack @nuqs47ng We just did this with tanstack router plus sadman Shadcn table great work. I think using tanstack router is way simpler and maintainable than nuqs

RTTS1 year ago

Testing Salesforce presents unique challenges due to its complexity, scalability and customizability. RTTS can plan, design & automate a successful testing process for you.

Chetan Chinchulkar1 year ago

@bazzaui @tan_stack @nuqs47ng Noiceeee 🤩

kian bazza1 year ago

@bazzaui @tan_stack @nuqs47ng Ayyy thanks Chetan :)

Gaurav1 year ago

@bazzaui @tan_stack @nuqs47ng Can't wait😍😍

kian bazza1 year ago

@bazzaui @tan_stack @nuqs47ng Wooooooo

james1 year ago

@bazzaui @tan_stack @nuqs47ng i can't wait to try this! brilliant

kian bazza1 year ago

@bazzaui @tan_stack @nuqs47ng Thanks James, looking forward to hearing your experience and feedback :)

Rakesh1 year ago

@bazzaui @tan_stack @nuqs47ng waiting..

kian bazza1 year ago

@bazzaui @tan_stack @nuqs47ng Loading.....

RajuGangitla1 year ago

@bazzaui @tan_stack @nuqs47ng Great work

kian bazza1 year ago

@bazzaui @tan_stack @nuqs47ng Thanks Raju :)

Related Videos

Hyped for the upcoming update to @bazzaui data table filters. Server-side filtering. BYO table library (optional). i18n support. Performance improvements. Built with shadcn and install w/ one command. Try it early (`canary` channel) by joining our Discord server ⤵️

Hyped for the upcoming update to @bazzaui data table filters. Server-side filtering. BYO table library (optional). i18n support. Performance improvements. Built with shadcn and install w/ one command. Try it early (`canary` channel) by joining our Discord server ⤵️

kian bazza

15,797 views • 1 year ago

airtable and linear linear like filters, and sorting for TANSTACK table. built with shadcn ui.

airtable and linear linear like filters, and sorting for TANSTACK table. built with shadcn ui.

sadman

96,489 views • 1 year ago

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.

shadcn

420,995 views • 3 years ago

airtable like filtering and sorting with TANSTACK table v9 and shadcn ui. filtering and sorting are auto generated based on the column definitions.

airtable like filtering and sorting with TANSTACK table v9 and shadcn ui. filtering and sorting are auto generated based on the column definitions.

sadman

80,780 views • 1 year ago

Improved data-table demo: ◆ cmdk filter (incl. last suggestions) ◆ collapsible controls side panel ◆ filter types: input, checkboxes, slider, timerange ◆ incl. searchparams → Inspired by Vercel & Datadog, Inc., powered by shadcn ui & @tanstack table

Improved data-table demo: ◆ cmdk filter (incl. last suggestions) ◆ collapsible controls side panel ◆ filter types: input, checkboxes, slider, timerange ◆ incl. searchparams → Inspired by Vercel & Datadog, Inc., powered by shadcn ui & @tanstack table

Maximilian Kaske 🏓

111,212 views • 1 year ago

Just dropped our most awaited Filters component with 10 advance examples: - shadcn compatible & 100% free - Type-safe from end to end - Define custom filed types - Library agnostic - DB operators support - i18n & RTL ready - Data Grid + TANSTACK Table integration - nuqs integration - Async mode examples - Standard inputs + custom renderers - Size(sm,md, lg) and style(solid, outline) variants - Base UI version coming soon ... Go ahead 👇to slice and dice your data like a pro 😎

Just dropped our most awaited Filters component with 10 advance examples: - shadcn compatible & 100% free - Type-safe from end to end - Define custom filed types - Library agnostic - DB operators support - i18n & RTL ready - Data Grid + TANSTACK Table integration - nuqs integration - Async mode examples - Standard inputs + custom renderers - Size(sm,md, lg) and style(solid, outline) variants - Base UI version coming soon ... Go ahead 👇to slice and dice your data like a pro 😎

ReUI

52,955 views • 8 months ago

MCP-UI support has been achieved internally 😉

MCP-UI support has been achieved internally 😉

Ruben Casas 🦊

26,599 views • 11 months ago

🇬🇧 STARMER: “I’M FIGHTING FOR YOU AT EVERY GLOBAL TABLE" "We want to be the best state partner for enterprise anywhere in the world and to give you the best possible conditions to succeed. When I'm sitting across the negotiating table with the EU, with the US, with India, whoever it is, trust me: I'm fighting for you." Source: Sky News

🇬🇧 STARMER: “I’M FIGHTING FOR YOU AT EVERY GLOBAL TABLE" "We want to be the best state partner for enterprise anywhere in the world and to give you the best possible conditions to succeed. When I'm sitting across the negotiating table with the EU, with the US, with India, whoever it is, trust me: I'm fighting for you." Source: Sky News

Mario Nawfal

97,284 views • 11 months ago

Fun fact: you can create state *on the server* with Astro and Preact signals. Easiest way to share state between islands 👀

Fun fact: you can create state on the server with Astro and Preact signals. Easiest way to share state between islands 👀

Astro

48,528 views • 1 year ago

Kilohearts Filter Table. Coming soon... ⏳

Kilohearts Filter Table. Coming soon... ⏳

Kilohearts

151,639 views • 1 year ago

Linear-style filters using shadcn and TANSTACK table. This was for a private, closed-source project from about a year ago. I was new to TypeScript but eager to recreate it. I completed the project and seriously leveled up my TypeScript skills. Let me know if you're curious about the build process—I may open-source the filtering logic 👀

Linear-style filters using shadcn and TANSTACK table. This was for a private, closed-source project from about a year ago. I was new to TypeScript but eager to recreate it. I completed the project and seriously leveled up my TypeScript skills. Let me know if you're curious about the build process—I may open-source the filtering logic 👀

kian bazza

33,616 views • 1 year ago

generate your data-table with filters, presets and more →

generate your data-table with filters, presets and more →

Maximilian Kaske 🏓

32,155 views • 2 months ago

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database. • Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database. • Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state. • State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results. • Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar. • Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change. • State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel. • Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages. This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset. Demo → Code →

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database. • Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database. • Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state. • State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results. • Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar. • Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change. • State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel. • Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages. This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset. Demo → Code →

Lee Robinson

236,573 views • 1 year ago

Ron DeSantis to Deported Illegals: ‘You Are Going to Regret’ Coming to Florida “If you have been deported, and you come to this state, and you’re here illegally, and you commit crimes, we are throwing the book at you. You are going to regret coming to the state of Florida.” Video: TheBlaze

Ron DeSantis to Deported Illegals: ‘You Are Going to Regret’ Coming to Florida “If you have been deported, and you come to this state, and you’re here illegally, and you commit crimes, we are throwing the book at you. You are going to regret coming to the state of Florida.” Video: TheBlaze

The Vigilant Fox 🦊

182,433 views • 2 years ago

This is what it is all about: “We are fighting to sit at the dinner table. White people, you will no longer eat alone. We are coming to sit at the dinner table, and if you are refusing us to sit at the dinner table, we are going to destroy that dinner table!”

This is what it is all about: “We are fighting to sit at the dinner table. White people, you will no longer eat alone. We are coming to sit at the dinner table, and if you are refusing us to sit at the dinner table, we are going to destroy that dinner table!”

Boer

148,011 views • 2 years ago

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

Elixir by Software Mansion

13,509 views • 5 months ago

UI/UX Designers, did you know you can get real-time UX/UI feedback on your designs and gather valuable insights directly in Figma? Spec AI is a Figma plugin that allows you to get real-time UX/UI feedback, helping you refine your designs and create user-centred experiences directly within Figma with just one click. Repost to share with others 💜

UI/UX Designers, did you know you can get real-time UX/UI feedback on your designs and gather valuable insights directly in Figma? Spec AI is a Figma plugin that allows you to get real-time UX/UI feedback, helping you refine your designs and create user-centred experiences directly within Figma with just one click. Repost to share with others 💜

Abraham John 🦄🦓

28,726 views • 1 year ago

UI/UX Designers, did you know you can get real-time UX/UI feedback on your designs and gather valuable insights directly in Figma? Spec AI is a Figma plugin that allows you to get real-time UX/UI feedback, helping you refine your designs and create user-centred experiences directly within Figma with just one click. Repost to share with others 💜

UI/UX Designers, did you know you can get real-time UX/UI feedback on your designs and gather valuable insights directly in Figma? Spec AI is a Figma plugin that allows you to get real-time UX/UI feedback, helping you refine your designs and create user-centred experiences directly within Figma with just one click. Repost to share with others 💜

Abraham John 🦄🦓

56,452 views • 1 year ago

Quick demo of Zero’s new background queries. Zero’s sync is query-based. Rather than specifying what data you want using rules or some other separate system, you just use queries. Right inside the client app, you do a query using a full sql-style language. You get filters, subqueries , limits, etc. Zero syncs the data backing these queries to the client. It’s important to realize Zero isn’t really a cache. It’s a replica. It’s eagerly replicating a precise snapshot of a slice of your database - the slice covered by the queries you have open. So there is never stale data in Zero. When you close a query we delete the rows uniquely returned by that query because we can no longer keep them up to date. Of course that kind of sucks for the common case of doing a query, navigating, then pressing “back”. Ideally we want that back nav to be fast. To address this Zero 0.17 adds background queries. You can add a ttl to a query and it will keep running and syncing in the background. This is much different than normal caching because this data stays up to date. If you make the same query again, the results will be *instantly* available *and already up to date with server*. If you make a different query the data from the background query is used client-side to answer the new query instantly if possible. This all happens completely automatically. Just by adding the ttl flag.

Quick demo of Zero’s new background queries. Zero’s sync is query-based. Rather than specifying what data you want using rules or some other separate system, you just use queries. Right inside the client app, you do a query using a full sql-style language. You get filters, subqueries , limits, etc. Zero syncs the data backing these queries to the client. It’s important to realize Zero isn’t really a cache. It’s a replica. It’s eagerly replicating a precise snapshot of a slice of your database - the slice covered by the queries you have open. So there is never stale data in Zero. When you close a query we delete the rows uniquely returned by that query because we can no longer keep them up to date. Of course that kind of sucks for the common case of doing a query, navigating, then pressing “back”. Ideally we want that back nav to be fast. To address this Zero 0.17 adds background queries. You can add a ttl to a query and it will keep running and syncing in the background. This is much different than normal caching because this data stays up to date. If you make the same query again, the results will be instantly available and already up to date with server. If you make a different query the data from the background query is used client-side to answer the new query instantly if possible. This all happens completely automatically. Just by adding the ttl flag.

Aaron Boodman

18,808 views • 1 year ago

we've upgraded the table filters in supabase just ask what you want to find and it will intelligently apply the right postgres filters:

we've upgraded the table filters in supabase just ask what you want to find and it will intelligently apply the right postgres filters:

Paul Copplestone - e/postgres

12,195 views • 4 months ago