# CrossfilterProvider

> Shares one dataset and its filters with every chart inside: each chart filters by brushing or clicking, and every other chart (and any table fed from `useCrossfilter().filtered`) …

Source: https://ui.jcsoftdev.com/docs/components/crossfilter-provider

Shares one dataset and its filters with every chart inside: each chart filters by brushing or
clicking, and every other chart (and any table fed from `useCrossfilter().filtered`) follows.

## Import

```ts
import { CrossfilterProvider } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/crossfilter`.

## Usage

```tsx
export const VentasCruzadas: Story = {
  args: storyArgs,
  render: () => <SalesCrossfilter columns="wide" />,
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` * | `readonly T[]` |  |  |
| `dimensions` * | `Readonly<Record<string, Accessor<T>>>` |  | How to read each dimension from a record. Keep the object stable (module level or memoized). |
| `initialFilters` | `Readonly<Record<string, CrossfilterFilter>>` | `NO_FILTERS` | Filters when the page loads. |
| `children` * | `ReactNode` |  |  |

`*` marks a required prop.

## Storybook stories

- [Ventas Cruzadas](/storybook/?path=/story/charts-crossfilter--ventas-cruzadas)
- [Filtro Inicial](/storybook/?path=/story/charts-crossfilter--filtro-inicial)
- [Narrow](/storybook/?path=/story/charts-crossfilter--narrow)
- [Brutal Preset](/storybook/?path=/story/charts-crossfilter--brutal-preset)
- [Pincel Rectangular](/storybook/?path=/story/charts-crossfilter--pincel-rectangular)
- [Pincel Inicial](/storybook/?path=/story/charts-crossfilter--pincel-inicial)
- [Pincel Narrow](/storybook/?path=/story/charts-crossfilter--pincel-narrow)
- [Pincel Tactil](/storybook/?path=/story/charts-crossfilter--pincel-tactil)

## Source

`packages/ui/src/charts/crossfilter/crossfilter.tsx`