Bazza UI

https://ui.bazza.dev/docs/
Admin
Bazza UI is a collection of React components and hooks built on shadcn/ui, designed to help...
Tokens:2,897
Snippets:20
Trust Score:5.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Data Table Filter Component

Source: https://ui.bazza.dev/docs/data-table-filter

Command to install the data table filter component into your project. For JavaScript projects, manual JSON locale file setup is required due to a known issue with the shadcn CLI.

```bash
npx shadcn-ui add data-table-filter
```

--------------------------------

### Create locales Directory and Copy en.json

Source: https://ui.bazza.dev/docs/data-table-filter

Manual steps to set up JSON locale files for JavaScript projects after installation, as a workaround for a shadcn CLI issue. This involves creating a 'locales' directory and copying the 'en.json' file into it.

```bash
mkdir -p ./src/components/ui/data-table-filter/locales
cp ./node_modules/shadcn-ui/dist/data-table-filter/locales/en.json ./src/components/ui/data-table-filter/locales/en.json
```

--------------------------------

### Render DataTableFilter Component

Source: https://ui.bazza.dev/docs/data-table-filter

Example of rendering the `<DataTableFilter />` component, which is built with shadcn/ui. It utilizes the filter state and provides UI elements for applying filters.

```javascript
import { DataTableFilter } from "@/components/ui/data-table-filter/data-table-filter";

<DataTableFilter filter={filter} setFilter={setFilter} />
```

--------------------------------

### Persist Filter State with nuqs

Source: https://ui.bazza.dev/docs/data-table-filter

Shows how to use the `nuqs` library to persist the filter state in the URL. This involves installing `nuqs` and `zod`, creating a Zod schema, and using `nuqs` adapters to manage the query state.

```bash
npm install nuqs zod
# or
yarn add nuqs zod
```

```typescript
import { z } from "zod";
import { createQueryState } from "nuqs/adapters";

// Define your filter state schema
const filterStateSchema = z.object({
  search: z.string().optional(),
  status: z.enum(["active", "inactive"]).optional(),
});

// Create your query state
const queryState = createQueryState(filterStateSchema, {
  parse: (v) => v,
  serialize: (v) => v,
});

// Then pass it to your table filters instance
<DataTableFilters {...props} queryState={queryState} />

```

--------------------------------

### Initialize DataTable Filters Hook (React)

Source: https://ui.bazza.dev/docs/data-table-filter

Example of initializing the `useDataTableFilters` React hook, which manages the state for data table filters. It takes options for different column types and strategies.

```javascript
import { useDataTableFilters } from "@/components/ui/data-table-filter/use-data-table-filters";

const { filter, setFilter } = useDataTableFilters({
  columns: [
    // ... column configurations ...
  ],
  strategy: "client", // or "server"
});
```

--------------------------------

### Creating DataTableFilters Instance (TypeScript)

Source: https://ui.bazza.dev/docs/data-table-filter

Demonstrates how to create a DataTableFilters instance using the useDataTableFilters hook. This includes specifying the filtering strategy, providing the data, and defining column configurations. The returned instance provides columns, filters state, actions, and the strategy.

```typescript
import { useDataTableFilters, ColumnConfig } from "@/lib/datatable-filters";

const columnsConfig: ColumnConfig[] = [
  // ... your column configurations
] as const;

const data = [
  // ... your data
];

const { columns, filters, actions, strategy } = useDataTableFilters({
  strategy: "client", // or "server"
  data: data,
  columnsConfig: columnsConfig,
});
```

--------------------------------

### Define Column Configuration Builder

Source: https://ui.bazza.dev/docs/data-table-filter

Illustrates how to define a column configuration using a builder pattern. This allows specifying column properties like ID, header, accessor key, and filter type.

```javascript
import { ColumnBuilder } from "@/components/ui/data-table-filter/column-builder";

const columnConfig = ColumnBuilder.create<YourDataType>()
  .add("status", {
    header: "Status",
    accessorKey: "status",
    filter: {
      type: "option", // or "multiOption", "text", "range"
      options: [
        { label: "Todo", value: "todo" },
        // ... other options ...
      ],
    },
  })
  .add("title", {
    header: "Title",
    accessorKey: "title",
    filter: {
      type: "text",
    },
  })
  .build();
```

--------------------------------

### Declared Options with Remote Data (TypeScript)

Source: https://ui.bazza.dev/docs/data-table-filter

Illustrates the declared options approach, where options are provided explicitly. This is suitable when options are known at build time or fetched separately. The instance can directly accept these options via the 'options' property.

```typescript
import { ColumnBuilder, ColumnOption } from "@/lib/datatable-filters";

const declaredOptions: ColumnOption[] = [
  { label: "Option A", value: "a" },
  { label: "Option B", value: "b" },
];

const declaredOptionsColumn = ColumnBuilder.build("status", {
  type: "string",
  options: {
    strategy: "declare",
    values: declaredOptions,
  },
  // ... other configurations
});

// When creating the instance:
const { columns, filters, actions, strategy } = useDataTableFilters({
  strategy: "client",
  data: [],
  columnsConfig: [declaredOptionsColumn] as const,
  // Assuming 'declaredOptionsColumn' is the only column needing options passed directly
  options: {
    status: declaredOptions, // Pass options for the 'status' column
  },
});
```

--------------------------------

### Create Column Configuration Helper - TypeScript

Source: https://ui.bazza.dev/docs/data-table-filter

Initializes a type-safe column configuration builder for data tables. It takes a generic type parameter representing the data model, ensuring type safety throughout the column definition process. This builder provides a fluent API for defining column properties.

```typescript
import { createColumnConfigHelper } from "@/components/ui/DataTable";

interface Issue {
  id: number;
  title: string;
  status: "open" | "closed";
  priority: "low" | "medium" | "high";
  createdAt: Date;
}

const issueColumnConfig = createColumnConfigHelper<Issue>();
```

--------------------------------

### Uncontrolled State with Default Filters (TypeScript)

Source: https://ui.bazza.dev/docs/data-table-filter

Shows how to use the uncontrolled state management for DataTableFilters by providing an initial filter state using the 'defaultFilters' property. The instance manages the filter state internally.

```typescript
import { useDataTableFilters, ColumnConfig, FilterState } from "@/lib/datatable-filters";

const columnsConfig: ColumnConfig[] = [
  // ... your column configurations
] as const;

const initialFilters: FilterState = {
  // ... your default filter values
};

const { columns, filters, actions, strategy } = useDataTableFilters({
  strategy: "client",
  data: [], // Data is not directly used in 'server' strategy for filtering logic
  columnsConfig: columnsConfig,
  defaultFilters: initialFilters,
});
```

--------------------------------

### Setting Min/Max for Numeric Columns (TypeScript)

Source: https://ui.bazza.dev/docs/data-table-filter

Shows how to define minimum and maximum values for numeric columns using the 'min' and 'max' methods within the column configuration. These values are used for range slider boundaries, especially crucial for the 'server' filtering strategy.

```typescript
import { ColumnBuilder } from "@/lib/datatable-filters";

const numericColumnConfig = ColumnBuilder.build("numericColumn", {
  type: "number",
  min: 0, // Set faceted minimum value
  max: 1000, // Set faceted maximum value
  // ... other configurations
});
```

--------------------------------

### Inferring Options from Data (TypeScript)

Source: https://ui.bazza.dev/docs/data-table-filter

Demonstrates the inferred options feature for client-side filtering. This approach extracts unique values directly from the provided data at runtime. The 'transformOptionFn' can be used to shape these values into the required ColumnOption format if they are not already.

```typescript
import { ColumnBuilder } from "@/lib/datatable-filters";

const inferredOptionsColumn = ColumnBuilder.build("category", {
  type: "string",
  options: {
    strategy: "infer",
    // Optional: transformOptionFn: (value) => ({ label: value, value: value }),
  },
  // ... other configurations
});
```

--------------------------------

### Integrate DataTableFilters with TanStack Table

Source: https://ui.bazza.dev/docs/data-table-filter

Provides functions to integrate DataTableFilters with TanStack Table (TST). `createTSTColumns` overrides TST column filter functions, and `createTSTFilters` converts DataTableFilters state to TST-compatible state.

```typescript
import { createTSTColumns, createTSTFilters } from "@ui/lib/tanstack-table";
import type { ColumnDef, FilterFn } from "@tanstack/react-table";
import type { DataTableFilterConfig } from "@ui/lib/data-table-filters";

// Example Usage:
const tstColumns: ColumnDef<YourDataType>[] = createTSTColumns([
  // Your DataTableFilterConfig definitions here
]);

const tstFilters = createTSTFilters(filtersState);

```

--------------------------------

### Define Multi-Option Column with Static Options - TypeScript

Source: https://ui.bazza.dev/docs/data-table-filter

Defines a column that accepts multiple options from a predefined static list. It specifies the column's data type as 'multiOption', assigns a unique ID, and provides the available options directly. The accessor extracts an array of string values from the data row.

```typescript
const statusColumn = issueColumnConfig.multiOption({
  options: [
    { label: "Open", value: "open" },
    { label: "Closed", value: "closed" },
  ],
})
  .id("status")
  .accessor("status")
  .displayName("Status")
  .icon("heroicons:check-circle")
  .build();
```

--------------------------------

### Define Text Column - TypeScript

Source: https://ui.bazza.dev/docs/data-table-filter

Defines a text-based column configuration using the column builder. It specifies the column's data type as text, assigns a unique ID, and defines how to access the string value from a data row. Optionally, a display name and icon can be set.

```typescript
const titleColumn = issueColumnConfig.text()
  .id("title")
  .accessor("title")
  .displayName("Title")
  .icon("heroicons:book-open")
  .build();
```

--------------------------------

### Controlled State with Filter Changes (TypeScript)

Source: https://ui.bazza.dev/docs/data-table-filter

Illustrates how to implement controlled state management for DataTableFilters. This involves passing the current filter state via the 'filters' prop and providing a callback function to 'onFiltersChange' to update the external state when filters change.

```typescript
import { useDataTableFilters, ColumnConfig, FilterState } from "@/lib/datatable-filters";
import { useState } from "react";

const columnsConfig: ColumnConfig[] = [
  // ... your column configurations
] as const;

const [filters, setFilters] = useState<FilterState>({
  // ... your initial filter state
});

const { columns, actions, strategy } = useDataTableFilters({
  strategy: "client",
  data: [], // Data is not directly used in 'server' strategy for filtering logic
  columnsConfig: columnsConfig,
  filters: filters, // Pass current filters
  onFiltersChange: setFilters, // Callback to update filters
});
```

--------------------------------

### Define Date Column - TypeScript

Source: https://ui.bazza.dev/docs/data-table-filter

Defines a date-based column configuration using the column builder. It specifies the column's data type as date, assigns a unique ID, and defines how to access the Date object from a data row. Optionally, a display name and icon can be set.

```typescript
const createdAtColumn = issueColumnConfig.date()
  .id("createdAt")
  .accessor("createdAt")
  .displayName("Created At")
  .icon("heroicons:calendar")
  .build();
```

--------------------------------

### Add Custom Locale to DataTableFilters

Source: https://ui.bazza.dev/docs/data-table-filter

Demonstrates how to add a custom locale for the DataTableFilters component by creating a new JSON file and extending the Locale type. This allows for internationalization beyond the default English.

```typescript
import type { Locale } from "./lib/i18n";

declare module "./lib/i18n" {
  interface Locale {
    // Add your new locale code here
    fr: string;
  }
}

```

```json
{
  "addFilter": "Ajouter un filtre",
  "clearFilters": "Effacer les filtres",
  // ... other translations
}

```

--------------------------------

### Define Number Column - TypeScript

Source: https://ui.bazza.dev/docs/data-table-filter

Defines a numeric column configuration using the column builder. It specifies the column's data type as number, assigns a unique ID, and defines how to access the numeric value from a data row. Optionally, a display name and icon can be set.

```typescript
const idColumn = issueColumnConfig.number()
  .id("id")
  .accessor("id")
  .displayName("ID")
  .icon("heroicons:hashtag")
  .build();
```

--------------------------------

### Define Single Option Column with Static Options - TypeScript

Source: https://ui.bazza.dev/docs/data-table-filter

Defines a column that accepts a single option from a predefined static list. It specifies the column's data type as 'option', assigns a unique ID, and provides the available options directly. The accessor extracts the string value from the data row.

```typescript
const priorityColumn = issueColumnConfig.option({
  options: [
    { label: "Low", value: "low" },
    { label: "Medium", value: "medium" },
    { label: "High", value: "high" },
  ],
})
  .id("priority")
  .accessor("priority")
  .displayName("Priority")
  .icon("heroicons:flag")
  .build();
```
Tokens:
Raw