repository·main·Indexed 21 days ago
https://github.com/bazzalabs/uiAn open-source library of modern React components. It features specialized tools for data tables, including the useDataTableFilters hook for managing client-side and server-side filtering, a type-safe column configuration builder (createColumnConfigHelper), and the DataTableFilter UI component. The library also provides utility components like TypeTable for displaying technical property information and Info for popover descriptions, with built-in integration support for TanStack Table.
For columns with discrete choices (option or multiOption), you can provide options in two ways:
Use this for fixed sets of options (static) or options fetched from an API (remote). Use the .options() method on the builder.
Only available for client-side filtering. This is useful when options aren't known at build time and you don't have a dedicated endpoint. The component loops through the available data to extract unique values. If the values aren't already in the ColumnOption shape, use .transformOptionFn() to map them.
Note: For server-side filtering, you must use the declared options approach because the client data is not representative of the full dataset.
dtf
.option()
.accessor((row) => row.assignee)
.id('assignee')
.displayName('Assignee')
.icon(UserCheckIcon)
.transformOptionFn((u) => ({
value: u.id,
label: u.name,
icon: <UserAvatar user={u} />
}))The FilterStrategy determines where the data filtering logic is executed:
client strategy: The client receives the entire dataset and performs filtering locally in the browser. This is ideal for smaller datasets.server strategy: The client sends filter requests to the server. The server applies the filters and returns only the matching subset of data. This is required for large datasets to avoid loading everything into memory.The useDataTableFilters hook is the primary entrypoint for managing filter state and logic. It decouples the filtering logic from the UI, allowing you to use the same state with any table library (TanStack Table, AG Grid, etc.) or even no library at all.
Each table should have its own instance. The hook returns:
columns: The processed column configurations.filters: The current state of all active filters.actions: Methods to mutate the filter state.strategy: The filtering strategy being used ('client' or 'server').To render the UI, pass these returned values into the <DataTableFilters /> component.
const { columns, filters, actions, strategy } = useDataTableFilters({
strategy: 'client',
data: issues.data ?? [],
columnsConfig,
})
return (
<div>
<DataTableFilters
columns={columns}
filters={filters}
actions={actions}
strategy={strategy}
/>
<DataTable />
<DataTablePagination />
</div>
)If you are using TanStack Table (TST) with client-side filtering, you can use the provided integration to automatically map the data table's filter state and logic to TST.
Note: If you are using server-side filtering, this integration is not required; simply feed your data into your TST instance.
createTSTColumns: Overrides the filterFn property for each filterable TST column with the appropriate internal filter function based on your column configurations.createTSTFilters: Converts the filter state from useDataTableFilters() into a TST-compatible ColumnFiltersState.Important: You must specify an id for each TST column definition that matches the id of the corresponding column filter configuration.
const { columns, filters, actions, strategy } = useDataTableFilters({ /* ... */ })
const tstColumns = useMemo(
() =>
createTSTColumns({
columns: tstColumnDefs, // your TanStack Table column definitions
configs: columns, // Your column configurations
}),
[columns],
)
const tstFilters = useMemo(() => createTSTFilters(filters), [filters])
const table = useReactTable({
data: issues.data ?? [],
columns: tstColumns,
getRowId: (row) => row.id,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
state: {
columnFilters: tstFilters
}
})bazza/ui in your projects, refer to the official documentation at https://ui.bazza.dev/docs. The library provides hand-crafted, modern React components that are open source and free to use.You can add the data table filters component to your project using the shadcn CLI:
npx shadcn@latest add https://ui.bazza.dev/r/filtersIf you are using TanStack Table, you must migrate from using the meta property in column definitions to the new column configuration builder and filter instance model.
Follow these steps to migrate:
meta property: Delete the meta property from your existing TanStack Table column definitions.bazza/ui components, you must first initialize and set up your project using shadcn/ui. This is a prerequisite for using the component library. Follow the official installation guide for your specific framework (e.g., Next.js, Vite, Remix) at ui.shadcn.com/docs/installation.The bazza/ui project is open source. If you want to contribute code, components, or improvements directly, you can do so via the GitHub repository.
https://github.com/kianbazza/uiTo perform filtering on the server rather than the client, set the strategy to 'server' in the useDataTableFilters configuration.
When using server-side filtering, you typically:
nuqs).filters state to your data fetching query.options (for option-based columns) and faceted data (for unique/min/max values) to the hook so it can render the UI correctly.Example configuration:
const { columns, filters, actions, strategy } = useDataTableFilters({
strategy: 'server',
data: issues.data ?? [],
columnsConfig,
options: {
status: statusOptions,
assignee: userOptions,
labels: labelOptions,
},
faceted: {
status: facetedStatuses.data,
assignee: facetedUsers.data,
labels: facetedLabels.data,
estimatedHours: facetedEstimatedHours.data,
},
})