> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Data Grid

> Get a table of records from a Data Pool.

<div />

## Use cases

<CardGroup cols={2}>
  <Card title="Data tables">
    Display records in a table format.

    <br />

    <Frame>
      <img src="https://mintcdn.com/propeldocs/QOy5SmMMP2AzzqCU/images/docs/data-table.png?fit=max&auto=format&n=QOy5SmMMP2AzzqCU&q=85&s=9dee89a8761f179bf4f4ef79ab95e13c" width="400" height="300" data-path="images/docs/data-table.png" />
    </Frame>
  </Card>

  <Card title="Log interfaces">
    Display logs in tabular format.

    <br />

    <Frame>
      <img src="https://mintcdn.com/propeldocs/9FdNDTkhOu7EgAUd/images/docs/log-interface.png?fit=max&auto=format&n=9FdNDTkhOu7EgAUd&q=85&s=8c6a37f856868fe6b380d49763f9e738" width="400" height="300" data-path="images/docs/log-interface.png" />
    </Frame>
  </Card>
</CardGroup>

## Features

All the [common API features](/docs/query-apis/overview#common-features), plus:

<AccordionGroup>
  <Accordion title="Ordering" icon="sort">
    Enables users to order the results based on a specified column and sort direction.

    * Use `orderByColumn` in the query to specify the column to order by
    * Use `sort` to specify the sort direction (ASC or DESC)

    ```graphql theme={"system"}
    query DataGridExample {
      dataGrid(input: {
        ...
        orderByColumn: "taco_total_price"
        sort: DESC
        ...
      }) {
        rows
      }
    }
    ```
  </Accordion>

  <Accordion title="Pagination" icon="page">
    Provides built-in cursor-based pagination for navigating through large data sets.

    * Use `first` to specify the maximum number of records to return
    * The `pageInfo` object in the response provides pagination details

    ```graphql theme={"system"}
    query DataGridExample {
      dataGrid(input: {
        ...
        first: 10
        ...
      }) {
        rows
        pageInfo {
          hasNextPage
          endCursor
        }
      }
    }
    ```

    See our [API pagination guide](/docs/query-apis/guides/pagination) to learn more.
  </Accordion>
</AccordionGroup>

## Example

### Example 1: Simple data grid query

Get records for the current month ordered by timestamp in descending order.

<CodeGroup>
  ```graphql Query theme={"system"}
  query DataGridExample1 {
    dataGrid(input: {
      dataPool: {
        name: "TacoSoft Demo Data"
      },
      timeRange: {
        relative: THIS_MONTH
      },
      columns: ["timestamp", "taco_name", "taco_total_price"],
      orderByColumn: 1,
      sort: DESC,
      filters: [],
      first: 3
    }) {
      headers
      rows
      pageInfo {
        hasNextPage
        hasPreviousPage
        endCursor
        startCursor
      }
    }
  }
  ```

  ```json Response theme={"system"}
  {
    "dataGrid": {
      "headers": [
        "timestamp",
        "taco_name",
        "taco_total_price"
      ],
      "rows": [
        [
          "2024-10-08T21:00:54.495Z",
          "Shrimp",
          "8"
        ],
        [
          "2024-10-08T21:00:54.495Z",
          "Pollo",
          "6"
        ],
        [
          "2024-10-08T21:00:54.495Z",
          "Breakfast",
          "3"
        ]
      ],
      "pageInfo": {
        "hasNextPage": true,
        "hasPreviousPage": false,
        "endCursor": "eyJvZmZzZXQiOjJ9",
        "startCursor": "eyJvZmZzZXQiOjB9"
      }
    }
  }
  ```
</CodeGroup>

## Usage

## Arguments

The fields for querying Data Grid records.

<ParamField path="dataPool" type="DataPoolInput" required>
  The Data Pool to be queried.

  <Expandable title="DataPoolInput">
    <ParamField path="id" type="ID">
      The ID of the Data Pool.
    </ParamField>

    <ParamField path="name" type="String">
      The name of the Data Pool.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="timeRange" type="TimeRangeInput">
  The time range for retrieving the records.

  <Expandable title="TimeRangeInput">
    The fields required to specify the time range for a time series, counter, or leaderboard Metric query.

    If no relative or absolute time ranges are provided, Propel defaults to an absolute time range beginning with the earliest record in the Metric's Data Pool and ending with the latest record.

    If both relative and absolute time ranges are provided, the relative time range will take precedence.

    If a `LAST_N` relative time period is selected, an `n` ≥ 1 must be provided. If no `n` is provided or `n` \< 1, a `BAD_REQUEST` error will be returned.

    <ParamField path="timestamp" type="String">
      The timestamp field to use when querying. Defaults to the timestamp configured on the Data Pool or Metric, if any.
      Set this to filter on an alternative timestamp field.
    </ParamField>

    <ParamField path="relative" type="RelativeTimeRange">
      The relative time period.

      <Expandable title="RelativeTimeRange">
        The Relative time ranges are based on the current date and time.

        `THIS` - The current unit of time. For example, if today is June 8, 2022, and
        `THIS_MONTH` is selected, then data for June 2022 would be returned.

        `PREVIOUS` - The previous unit of time. For example, if today is June 8, 2022, and
        `PREVIOUS_MONTH` is selected, then data for May 2022 would be returned. It excludes
        the current unit of time.

        `NEXT` - The next unit of time. For example, if today is June 8, 2022, and
        `NEXT_MONTH` is selected, then data for July 2022 would be returned. It excludes
        the current unit of time.

        `LAST_N` - The last `n` units of time, including the current one. For example, if today
        is June 8, 2022 and `LAST_N_YEARS` with `n` = 3 is selected, then data for 2020, 2021, and
        2022 will be returned. It will include the current time period.

        <ParamField path=" ">
          * `THIS_HOUR`: Starts at the zeroth minute of the current hour and continues for 60 minutes.
          * `TODAY`: Starts at 12:00:00 AM of the current day and continues for 24 hours.
          * `THIS_WEEK`: Starts on Monday, 12:00:00 AM of the current week and continues for seven days.
          * `THIS_MONTH`: Starts at 12:00:00 AM on the first day of the current month and continues for the duration of the month.
          * `THIS_QUARTER`: Starts at 12:00:00 AM on the first day of the current calendar quarter and continues for the duration of the quarter.
          * `THIS_YEAR`: Starts on January 1st, 12:00:00 AM of the current year and continues for the duration of the year.
          * `PREVIOUS_HOUR`: Starts at the zeroth minute of the previous hour and continues for 60 minutes.
          * `YESTERDAY`: Starts at 12:00:00 AM on the day before the today and continues for 24 hours.
          * `PREVIOUS_WEEK`: Starts on Monday, 12:00:00 AM, a week before the current week, and continues for seven days.
          * `PREVIOUS_MONTH`: Starts at 12:00:00 AM on the first day of the month before the current month and continues for the duration of the month.
          * `PREVIOUS_QUARTER`: Starts at 12:00:00 AM on the first day of the calendar quarter before the current quarter and continues for the duration of the quarter.
          * `PREVIOUS_YEAR`: Starts on January 1st, 12:00:00 AM, the year before the current year, and continues for the duration of the year.
          * `NEXT_HOUR`:  Starts at the zeroth minute of the next hour and continues for 60 minutes.
          * `TOMORROW`: " Starts at 12:00:00 AM, the day after the current day, and continues for 24 hours.
          * `NEXT_WEEK`: Starts on Monday, 12:00:00 AM, the week after the current week, and continues for the duration of the week.
          * `NEXT_MONTH`: Starts at 12:00:00 AM on the first day of the next month and continues for the duration of the month.
          * `NEXT_QUARTER`: Starts at 12:00:00 AM on the first day of the next calendar quarter and continues for the duration of the quarter.
          * `NEXT_YEAR`: Starts on January 1st, 12:00:00 AM of the next year and continues for the duration of the year.
          * `LAST_N_MINUTES`: Starts at the zeroth second `n` - 1 minute(s) before the current minute and continues through the current minute. It includes this minute.
          * `LAST_N_HOURS`: Starts at the zeroth minute of the `n` - 1 hour(s) before the current hour, and continues through the current hour. It includes this hour.
          * `LAST_N_DAYS`: Starts at 12:00:00 AM, `n` - 1 day(s) before the current day, and continues through the current day. It includes today.
          * `LAST_N_WEEKS`: Starts on Monday, 12:00:00 AM, `n` - 1 week(s) before the current week, and continues through the current week. It includes this week.
          * `LAST_N_MONTHS`: Starts at 12:00:00 AM on the first day of the month, `n` - 1 month(s) before the current month, and continues through the current month. It includes this month.
          * `LAST_N_QUARTERS`: Starts at 12:00:00 AM on the first day of the calendar quarter `n` - 1 quarter(s) before the current quarter and continues through the current quarter. It includes this quarter.
          * `LAST_N_YEARS`: Starts on January 1st, 12:00:00 AM of the year `n` - 1 year(s) before the current year and continues through the current year. It includes this year.
          * `LAST_15_MINUTES`
          * `LAST_30_MINUTES`
          * `LAST_HOUR`
          * `LAST_4_HOURS`
          * `LAST_12_HOURS`
          * `LAST_24_HOURS`
          * `LAST_7_DAYS`
          * `LAST_30_DAYS`
          * `LAST_90_DAYS`
          * `LAST_3_MONTHS`
          * `LAST_6_MONTHS`
          * `LAST_YEAR`
          * `LAST_2_YEARS`
          * `LAST_5_YEARS`
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="n" type="Int">
      The number of time units for the `LAST_N` relative periods.
    </ParamField>

    <ParamField path="start" type="DateTime">
      The optional start timestamp (inclusive). Defaults to the timestamp of the earliest record in the Data Pool.
    </ParamField>

    <ParamField path="stop" type="DateTime">
      The optional end timestamp (exclusive). Defaults to the timestamp of the latest record in the Data Pool.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="timeZone" type="String">
  The time zone to use. Dates and times are always returned in UTC, but setting the time zone influences relative time ranges and granularities.

  You can set this to "America/Los\_Angeles", "Europe/Berlin", or any other value in the [IANA time zone database](https://en.wikipedia.org/wiki/Tz_database). Defaults to "UTC".
</ParamField>

<ParamField path="columns" type="[String!]" required>
  The columns to retrieve.
</ParamField>

<ParamField path="orderByColumn" type="Int">
  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.
</ParamField>

<ParamField path="sort" type="Sort">
  The sort order of the rows. It can be ascending (`ASC`) or descending (`DESC`) order. Defaults to descending (`DESC`) order when not provided.

  <Expandable title="Sort">
    The available sort orders.

    <ParamField path=" ">
      * `ASC`: Sort in ascending order.
      * `DESC`: Sort in descending order.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="filterSql" type="String">
  The filters to apply to the records, in the form of SQL. You may only filter on columns included in the `columns` array input.
</ParamField>

<ParamField path="first" type="Int">
  The number of rows to be returned when paging forward. It can be a number between 1 and 1,000.
</ParamField>

<ParamField path="after" type="String">
  The cursor to use when paging forward.
</ParamField>

<ParamField path="last" type="Int">
  The number of rows to be returned when paging forward. It can be a number between 1 and 1,000.
</ParamField>

<ParamField path="before" type="String">
  The cursor to use when paging backward.
</ParamField>

<Expandable title="Deprecated Fields">
  <ParamField path="filters" type="[FilterInput!]" deprecated>
    The filters to apply to the records. You may only filter on columns included in the `columns` array input.

    <span style={{ fontStyle: 'italic' }}>deprecated: Use `filterSql` instead</span>

    <Expandable title="FilterInput">
      The fields of a filter.

      You can construct more complex filters using `and` and `or`. For example, to construct a filter equivalent to

      ```
      (value > 0 AND value <= 100) OR status = "confirmed"
      ```

      you could write

      ```
      {
        "column": "value",
        "operator": "GREATER_THAN",
        "value": "0",
        "and": [{
          "column": "value",
          "operator": "LESS_THAN_OR_EQUAL_TO",
          "value": "0"
        }],
        "or": [{
          "column": "status",
          "operator": "EQUALS",
          "value": "confirmed"
        }]
      }
      ```

      Note that `and` takes precedence over `or`.

      <ParamField path="column" type="String" required>
        The name of the column to filter on.
      </ParamField>

      <ParamField path="operator" type="FilterOperator" required>
        The operation to perform when comparing the column and filter values.

        <Expandable title="FilterOperator">
          The available Filter operators.

          <ParamField path=" ">
            * `EQUALS`:  Selects values that are equal to the specified value.
            * `NOT_EQUALS`:  Selects values that are not equal to the specified value.
            * `GREATER_THAN`:  Selects values that are greater than the specified value.
            * `GREATER_THAN_OR_EQUAL_TO`:  Selects values that are greater or equal to the specified value.
            * `LESS_THAN`:  Selects values that are less than the specified value.
            * `LESS_THAN_OR_EQUAL_TO`:  Selects values that are less or equal to the specified value.
            * `IS_NULL`:  Selects values that are null. This operator does not accept a value.
            * `IS_NOT_NULL`:  Selects values that are not null. This operator does not accept a value.
            * `LIKE`:  Selects values that match the specified pattern.
            * `NOT_LIKE`:  "Selects values that do not match the specified pattern.
          </ParamField>
        </Expandable>
      </ParamField>

      <ParamField path="value" type="String">
        The value to compare the column to.
      </ParamField>

      <ParamField path="and" type="[FilterInput!]">
        Additional filters to AND with this one. AND takes precedence over OR.
      </ParamField>

      <ParamField path="or" type="[FilterInput!]">
        Additional filters to OR with this one. AND takes precedence over OR.
      </ParamField>
    </Expandable>
  </ParamField>
</Expandable>

## Response

The Data Grid table's node.

This type represents a single row of a Data Grid table.

<ParamField path="headers" type="[String!]" required>
  The Data Grid table's headers.
</ParamField>

<ParamField path="row" type="[String]" required>
  An array of the values for the row.
</ParamField>

## Embeddable UI components

<CardGroup cols={2}>
  <Card title="useDataGrid" icon="code" href="/docs/embeddable-ui/components/use-data-grid">
    A React Hook for fetching tabular data from the Data Grid API.
  </Card>
</CardGroup>