Query the Data Grid API from frontend applications.

Use Access Policies and multi-tenant JWT tokens to control access to your data.

'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useDataGrid, RelativeTimeRange } from "@propeldata/ui-kit";

const queryClient = new QueryClient();

function UseDataGrid() {
  const { data } = useDataGrid({
    dataPool: { name: "TacoSoft Demo Data" },
    columns: ['*'],
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 },
  });

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

export default function UseSqlExample() {
  return (
    <QueryClientProvider client={queryClient}>
      <UseDataGrid />
    </QueryClientProvider>
  );
}

GitHub

Example

​
Props API

columns
string[]

The columns to retrieve, if not passed, all columns will be included, Pass [’*’] to retrieve all columns

dataPool
DataPoolInput

The Data Pool to be queried. A Data Pool ID or unique name can be provided

orderByColumn
number

The index of the column to order the table by. The index is 1-based. If not provided, records will be ordered by their timestamp by default.

sort
Sort

The sort order of the rows. It can be ascending (ASC) or descending (DESC) order. Defaults to descending (DESC) order when not provided.

timeZone
string

Indicates specific time zone region

timeRange
TimeRangeInput

Specify the time range for a time series, counter, or leaderboard Metric query

filters
FilterInput[]

Filters that the chart will respond to

accessToken
string

Access token used for the query. While you can pass this one to each component, we recommend wrapping components in the AccessTokenProvider instead:

refetchInterval
number

Interval in milliseconds for refetching the data

retry
boolean

Whether to retry on errors.

propelApiUrl
string

This prop allows you to override the URL for Propel’s GraphQL API. You shouldn’t need to set this unless you are testing.

enabled
boolean

When false, the component will not make any GraphQL requests, default is true.

Was this page helpful?

useCounteruseLeaderboard