Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 год назад •via X (Twitter)

ОбразованиеНаука и технологииИскусство
LIVE

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 ⤵️
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 просмотров • 1 год назад

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 просмотров • 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.
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 просмотров • 3 лет назад

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 просмотров • 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
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 просмотров • 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 😎
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 просмотров • 8 месяцев назад

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

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
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 просмотров • 11 месяцев назад

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 просмотров • 1 год назад

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

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 👀
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 просмотров • 1 год назад

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

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 →
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 просмотров • 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
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 просмотров • 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!”
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 просмотров • 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:
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 просмотров • 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 💜
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 просмотров • 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 💜
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 просмотров • 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.
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 просмотров • 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:
0:21

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 месяцев назад