正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 1 年前 •via X (Twitter)

教育科学技术艺术

Anya Rossi• Live Now

Private livecam show

12 条评论

Jay Ghiya 的头像

Jay Ghiya1 年前

@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

RTTS 的头像

RTTS1 年前

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

Chetan Chinchulkar 的头像

Chetan Chinchulkar1 年前

@bazzaui @tan_stack @nuqs47ng Noiceeee 🤩

kian bazza 的头像

kian bazza1 年前

@bazzaui @tan_stack @nuqs47ng Ayyy thanks Chetan :)

Gaurav 的头像

Gaurav1 年前

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

kian bazza 的头像

kian bazza1 年前

@bazzaui @tan_stack @nuqs47ng Wooooooo

james 的头像

james1 年前

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

kian bazza 的头像

kian bazza1 年前

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

Rakesh 的头像

Rakesh1 年前

@bazzaui @tan_stack @nuqs47ng waiting..

kian bazza 的头像

kian bazza1 年前

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

RajuGangitla 的头像

RajuGangitla1 年前

@bazzaui @tan_stack @nuqs47ng Great work

kian bazza 的头像

kian bazza1 年前

@bazzaui @tan_stack @nuqs47ng Thanks Raju :)

相关视频

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 3 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 8 个月前

MCP-UI support has been achieved internally 😉

MCP-UI support has been achieved internally 😉

Ruben Casas 🦊

26,599 次观看 • 11 个月前

🇬🇧 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 次观看 • 11 个月前

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 次观看 • 1 年前

Kilohearts Filter Table. Coming soon... ⏳

Kilohearts Filter Table. Coming soon... ⏳

Kilohearts

151,639 次观看 • 1 年前

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 次观看 • 1 年前

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

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

Maximilian Kaske 🏓

32,155 次观看 • 2 个月前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 2 年前

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 次观看 • 5 个月前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 4 个月前