@thegrid-tools/client-filters

Client filters package for Grid Data applications. This package provides React components and hooks for filtering, sorting, and querying profile data.

Installation

# Using npm
npm install @thegrid-tools/client-filters

# Using yarn
yarn add @thegrid-tools/client-filters

# Using pnpm
pnpm add @thegrid-tools/client-filters

Peer Dependencies

This package requires the following peer dependencies to be installed with the exact versions specified in the package.json file. Using matching versions ensures compatibility when the context provider is used within your project.

npm install [email protected] @tanstack/[email protected]

Basic Usage

Wrap your application or component with the FiltersProvider to enable filtering functionality:

import { FiltersProvider } from '@thegrid-tools/client-filters';

function App() {
  return (
    <FiltersProvider>
      <YourComponent />
    </FiltersProvider>
  );
}

Configuration

You can customize the filters by passing a configuration object to the FiltersProvider:

import { FiltersProvider } from '@thegrid-tools/client-filters';

const config = {
  overrideFilterValues: {
    productDeployedOn: ['platform1', 'platform2'],
    supportsProducts: ['product1', 'product2'],
    productTypes: ['type1', 'type2'],
    productAssetRelationships: ['relationship1'],
    tags: ['tag1', 'tag2'],
    productIds: ['id1', 'id2'],
  },
  overrideOptionsFilterValues: {
    productTypes: ['15', '16', '17'],
  },
};

function App() {
  return (
    <FiltersProvider config={config}>
      <YourComponent />
    </FiltersProvider>
  );
}

Available Hooks

Context Hooks

These hooks provide access to the filter, sorting, and query contexts:

import { 
  useProfileFiltersContext,
  useProfileSortingContext,
  useProfilesQueryContext
} from '@thegrid-tools/client-filters';

function YourComponent() {
  const { filters } = useProfileFiltersContext();
  const { sorting } = useProfileSortingContext();
  const queryParams = useProfilesQueryContext();

  const {data, isLoading} = await execute(
    graphql(`
      query Profiles(
        $order_by: [ProfileInfosOrderBy!]
        $where: ProfileInfosBoolExp
        $limit: Int
        $offset: Int
      ) {
        profileInfos(
          limit: $limit
          offset: $offset
          where: $where
          order_by: $order_by
        ) {
          name
          ...other fields
        }
      }
    `),
    queryParams
  );
  

  return (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  );
}

Filter Hooks

The package provides various filter hooks for different types of filtering:

• Profile filters: type, sectors, statuses, founding date
• Product filters: status, types, launch date, deployed on
• Asset filters: type, ticker, deployed on, standard
• Entity filters: type, name, country
• Tag filters
• Search filters

Example usage:

import { useProfileFilters } from '@thegrid-tools/client-filters/hooks/use-profile-filters';

function FilterComponent() {
  const {
    searchFilter,
    profileTypeFilter,
    profileSectorsFilter,
  } = useProfileFilters();
  
  // Use the filters in your UI
  return (
    <div>
      <input 
        type="text" 
        value={searchFilter.value} 
        onChange={(e) => searchFilter.onChange(e.target.value)} 
        placeholder="Search..." 
      />
    </div>
  );
}

Sorting

You can use the sorting hooks to sort profile data:

import { useProfileSorting } from '@thegrid-tools/client-filters/hooks/use-profile-sorting';

function SortingComponent() {
  const { sortBy, setSortBy, sortDirection, setSortDirection } = useProfileSorting();
  
  return (
    <div>
      <select 
        value={sortBy} 
        onChange={(e) => setSortBy(e.target.value)}
      >
        <option value="name">Name</option>
        <option value="date">Date</option>
        {/* Other sort options */}
      </select>
      
      <button onClick={() => setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')}>
        {sortDirection === 'asc' ? '↑' : '↓'}
      </button>
    </div>
  );
}

URL Synchronization

The filters are automatically synchronized with the URL using the nuqs package, making it easy to share and bookmark filtered views.