tanstack-shadcn-table
Version:
A powerful, feature-rich React table component built on top of TanStack Table v8 with shadcn/ui styling. Optimized bundle size with 55% reduction through peer dependencies.
77 lines (76 loc) • 2.45 kB
TypeScript
import type { Column } from "@tanstack/react-table";
import type * as React from "react";
import type { TableTranslations } from "../lib/i18n/types";
export type FacetedFilterProps<TData, TValue> = {
/**
* The table column to filter
*/
column?: Column<TData, TValue>;
/**
* Title of the filter button
*/
title?: string;
/**
* Array of filter options
*/
options: {
/**
* Display label for the option
*/
label: string;
/**
* Value of the option
*/
value: unknown;
/**
* Optional icon component to display next to the option
*/
icon?: React.ComponentType<{
className?: string;
}>;
}[];
/**
* Translations object for internationalization
* @default defaultTranslations
*/
translations?: TableTranslations;
};
type DataTableFacetedFilterProps<TData, TValue> = FacetedFilterProps<TData, TValue>;
/**
* FacetedFilter - A flexible faceted filter component for table columns
*
* Displays a popover with a searchable list of filter options. Users can select
* multiple options to filter the table data. Selected filters are displayed as
* badges on the trigger button.
*
* @template TData - The type of data in the table
* @template TValue - The type of the column value
*
* @param props - FacetedFilter component props
* @param props.column - The table column to filter
* @param props.title - Title of the filter button
* @param props.options - Array of filter options with label, value, and optional icon
* @param props.translations - Translations object for internationalization
*
* @returns The rendered FacetedFilter component
*
* @example
* ```tsx
* import { FacetedFilter } from "tanstack-shadcn-table/table-elements";
* import { CheckCircle2, XCircle } from "lucide-react";
*
* const statusOptions = [
* { label: "Active", value: "active", icon: CheckCircle2 },
* { label: "Inactive", value: "inactive", icon: XCircle },
* ];
*
* <FacetedFilter
* column={table.getColumn("status")}
* title="Status"
* options={statusOptions}
* />
* ```
*/
export declare function DataTableFacetedFilter<TData, TValue>({ column, title, options, translations, }: DataTableFacetedFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
export declare const FacetedFilter: typeof DataTableFacetedFilter;
export {};