> ## 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

> Visualize records in table format.

<div />

<Tabs>
  <Tab title="Preview">
    <iframe
      width="100%"
      height="520"
      src="https://ui-kit-docs-examples.vercel.app/data-grid"
      allow="accelerometer; clipboard-write; gyroscope;"
      style={{
    overflow: 'hidden',
    border: '1px solid #ECECED',
    display: 'block', // Makes iframe behave as block element
    margin: 0,
    padding: 0
  }}
      marginWidth="0"
      marginHeight="0"
      scrolling="no"
    />
  </Tab>

  <Tab title="Code">
    ```jsx /data-grid/page.tsx theme={"system"}
    import {
      DataGrid,
      Sort,
      Flex,
    } from "@propeldata/ui-kit";

    export default async function DataGridExample() {
      return (
        <Flex p="3" justify="center" width="100%">
          <DataGrid
            query={{
              columns: ["timestamp", "taco_name", "taco_unit_price"],
              dataPool: {
                name: "TacoSoft Demo Data",
              },
              orderByColumn: 1,
              sort: Sort.Desc
            }}
            paginationProps={{
              defaultPageSize: 10
            }}
            resizable={true}
            prettifyHeaders={true}
            showRowCount={true}
          />
        </Flex>
      );
    }
    ```
  </Tab>
</Tabs>

<div className="flex justify-center gap-8 mt-2">
  <a href="https://github.com/propeldata/ui-kit/blob/main/packages/ui-kit/src/components/DataGrid/DataGrid.tsx" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="github" size={18} />

    GitHub

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>

  <a href="https://storybook.propeldata.com/?path=/docs/components-datagrid--overview" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="book" size={18} />

    Storybook

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>

  <a href="https://github.com/propeldata/ui-kit-docs-examples/blob/main/src/app/data-grid/page.tsx" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="github" size={18} />

    Example

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>
</div>

## Props API

<ParamField path="query" type={`DataGridQueryProps`}>
  DataGrid query props

  <Expandable title="DataGridQueryProps">
    <ParamField path="columns" type={`string[]`}>
      The columns to retrieve, if not passed, all columns will be included, Pass \['\*'] to retrieve all columns
    </ParamField>

    <ParamField path="dataPool" type={`DataPoolInput`}>
      The Data Pool to be queried. A Data Pool ID or unique name can be provided

      <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="orderByColumn" type={`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.
    </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="timeZone" type={`string`}>
      Indicates specific time zone region
    </ParamField>

    <ParamField path="timeRange" type={`TimeRangeInput`}>
      Specify the time range for a time series, counter, or leaderboard Metric query

      <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="filters" type={`FilterInput[]`}>
      Filters that the chart will respond to

      <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>

    <ParamField path="accessToken" type={`string`}>
      Access token used for the query. While you can pass this one to each component, we recommend wrapping components in the `AccessTokenProvider` instead:
    </ParamField>

    <ParamField path="refetchInterval" type={`number`}>
      Interval in milliseconds for refetching the data
    </ParamField>

    <ParamField path="retry" type={`boolean`}>
      Whether to retry on errors.
    </ParamField>

    <ParamField path="propelApiUrl" type={`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.
    </ParamField>

    <ParamField path="enabled" type={`boolean`}>
      When false, the component will not make any GraphQL requests, default is true.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="resizable" type={`boolean`}>
  If true, the table columns will be resizable
</ParamField>

<ParamField path="headers" type={`string[]`}>
  If passed along with `rows` the component will ignore the built-in GraphQL operations
</ParamField>

<ParamField path="rows" type={`(string | null)[][]`}>
  If passed along with `headers` the component will ignore the built-in GraphQL operations
</ParamField>

<ParamField path="loading" type={`boolean`}>
  When true, shows a skeleton loader
</ParamField>

<ParamField path="paginationProps" type={`DataGridPaginationProps`}>
  Props that will affect pagination

  <Expandable title="DataGridPaginationProps">
    <ParamField path="defaultPageSize" type={`number`}>
      Default page size for uncontrolled pagination, if passed, query controlled pagination props will be ignored
    </ParamField>

    <ParamField path="pageSizeOptions" type={`number[]`}>
      Options that will populate the pagination select, if not passed, default options will be used (10, 50, 100)
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="disablePagination" type={`boolean`}>
  If true, the pagination footer will be hidden
</ParamField>

<ParamField path="tableLinesLayout" type={`"vertical" | "horizontal" | "both" | "none"`}>
  Determines how the table lines are shown, defaults to "both"
</ParamField>

<ParamField path="slotProps" type={`SlotProps`}>
  <Expandable title="SlotProps">
    <ParamField path="footer" type={`ComponentPropsWithoutRef<"div">`}>
      Props to be applied to the `footer` element
    </ParamField>

    <ParamField path="table" type={`ComponentPropsWithoutRef<"div">`}>
      Props to be applied to the `table` element
    </ParamField>

    <ParamField path="cell" type={`ComponentPropsWithoutRef<"div">`}>
      Props to be applied to the `cell` element
    </ParamField>

    <ParamField path="button" type={`ButtonProps`}>
      Props to be applied to the `button` element
    </ParamField>

    <ParamField path="select" type={`SelectProps<OptionValue>`}>
      Props to be applied to the `select` element
    </ParamField>

    <ParamField path="header" type={`ComponentPropsWithoutRef<"div">`}>
      Props to be applied to the `header` element
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="hideBorder" type={`boolean`}>
  If true, the table border will be hidden
</ParamField>

<ParamField path="borderColor" type={`AccentColors | string`}>
  The color of the table border
</ParamField>

<ParamField path="gridLineColor" type={`AccentColors | string`}>
  The color of the grid lines
</ParamField>

<ParamField path="accentColor" type={`AccentColors`}>
  The global theme accent color. This color is used to highlight elements
</ParamField>

<ParamField path="prettifyHeaders" type={`boolean`}>
  If true, the headers will be prettified
</ParamField>

<ParamField path="showRowCount" type={`boolean`}>
  If true, row count will be shown in the footer
</ParamField>

<Expandable title="Theme Provider Props">
  <ParamField path="appearance" type={`ThemeAppearances`}>
    The initial theme used as a base. It provides a default set of styling
    from which customizations can be applied.

    <Expandable title="ThemeAppearances">
      <ParamField path="ThemeAppearances" type={`"light" | "dark"`} />
    </Expandable>
  </ParamField>

  <ParamField path="accentColor" type={`AccentColors`}>
    The global theme accent color. This color is used to highlight elements

    <Expandable title="AccentColors">
      <ParamField path="AccentColors" type={`"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "indigo" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "teal" | "tomato" | "violet" | "yellow"`} />
    </Expandable>
  </ParamField>

  <ParamField path="grayColor" type={`GrayColors`}>
    The global theme gray color. This color is used for text and background colors

    <Expandable title="GrayColors">
      <ParamField path="GrayColors" type={`"auto" | "gray" | "mauve" | "slate" | "sage" | "olive" | "sand"`} />
    </Expandable>
  </ParamField>

  <ParamField path="radius" type={`Radii`}>
    The global theme radius color. This color is used for border radius

    <Expandable title="Radii">
      <ParamField path="Radii" type={`"none" | "small" | "medium" | "large" | "full"`} />
    </Expandable>
  </ParamField>

  <ParamField path="scaling" type={`Scalings`}>
    The global theme scaling. This value is used to scale components

    <Expandable title="Scalings">
      <ParamField path="Scalings" type={`"90%" | "95%" | "100%" | "105%" | "110%"`} />
    </Expandable>
  </ParamField>

  <ParamField path="panelBackground" type={`PanelBackgrounds`}>
    The global theme panel background. This value is used to set the panel background

    <Expandable title="PanelBackgrounds">
      <ParamField path="PanelBackgrounds" type={`"solid" | "translucent"`} />
    </Expandable>
  </ParamField>
</Expandable>

<Expandable title="Deprecated Fields">
  <ParamField
    path="error"
    type={`{
title: string;
body: string;
} | null`}
    deprecated
  >
    This type is deprecated, use `errorFallbackProps` and `errorFallback` instead
  </ParamField>
</Expandable>