Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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.

kianbazza's profile picture

kian bazza

2,598 subscribers

18,523 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & TechnologieKunst
LIVE

Anya Rossi• Live Now

Private livecam show

12 Kommentare

Profilbild von Jay Ghiya
Jay Ghiyavor 1 Jahr

@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

Profilbild von RTTS
RTTSvor 1 Jahr

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

Profilbild von Chetan Chinchulkar
Chetan Chinchulkarvor 1 Jahr

@bazzaui @tan_stack @nuqs47ng Noiceeee 🤩

Profilbild von kian bazza
kian bazzavor 1 Jahr

@bazzaui @tan_stack @nuqs47ng Ayyy thanks Chetan :)

Profilbild von Gaurav
Gauravvor 1 Jahr

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

Profilbild von kian bazza
kian bazzavor 1 Jahr

@bazzaui @tan_stack @nuqs47ng Wooooooo

Profilbild von james
jamesvor 1 Jahr

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

Profilbild von kian bazza
kian bazzavor 1 Jahr

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

Profilbild von Rakesh
Rakeshvor 1 Jahr

@bazzaui @tan_stack @nuqs47ng waiting..

Profilbild von kian bazza
kian bazzavor 1 Jahr

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

Profilbild von RajuGangitla
RajuGangitlavor 1 Jahr

@bazzaui @tan_stack @nuqs47ng Great work

Profilbild von kian bazza
kian bazzavor 1 Jahr

@bazzaui @tan_stack @nuqs47ng Thanks Raju :)

Ähnliche 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 ⤵️
0:27

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 Aufrufe • vor 1 Jahr

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

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

sadman

96,489 Aufrufe • vor 1 Jahr

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.
0:47

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 Aufrufe • vor 3 Jahren

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

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 Aufrufe • vor 1 Jahr

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
0:28

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 Aufrufe • vor 1 Jahr

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 😎
4:34

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 Aufrufe • vor 8 Monaten

MCP-UI support has been achieved internally 😉
0:34

MCP-UI support has been achieved internally 😉

Ruben Casas 🦊

26,599 Aufrufe • vor 11 Monaten

🇬🇧 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
1:39

🇬🇧 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 Aufrufe • vor 11 Monaten

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

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

Astro

48,528 Aufrufe • vor 1 Jahr

Kilohearts Filter Table. Coming soon... ⏳
0:29

Kilohearts Filter Table. Coming soon... ⏳

Kilohearts

151,639 Aufrufe • vor 1 Jahr

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 👀
1:07

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 Aufrufe • vor 1 Jahr

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

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

Maximilian Kaske 🏓

32,155 Aufrufe • vor 2 Monaten

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 →
0:22

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 Aufrufe • vor 1 Jahr

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
0:45

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 Aufrufe • vor 2 Jahren

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!”
0:28

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 Aufrufe • vor 2 Jahren

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:
0:25

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 Aufrufe • vor 5 Monaten

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 💜
0:33

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 Aufrufe • vor 1 Jahr

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 💜
0:33

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 Aufrufe • vor 1 Jahr

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.
1:01

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 Aufrufe • vor 1 Jahr