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

# Credits grants table

## Overview

The **Credit Grants Table widget** provides visibility into all credit grants associated with a customer. It shows the origin of credits, their usage, and their current state in a structured table format.

## Layout

The Credit grants widget displays a structured list of credit grants associated with a customer, providing a clear overview of how credits were issued, their current status, remaining balances, and expiration dates.

The layout includes the following elements:

* **Received**: timestamp when the grant was issued.
* **Grant Type**: type of credit (e.g., promotional, paid, subscription).
* **State**: current status of the grant (Available, Scheduled, Expired, Voided).
* **Balance**: remaining credits versus the original amount.
* **Expires**: expiration date, if applicable.

This widget is especially useful for distinguishing between purchased and promotional credits, tracking upcoming expirations, and auditing adjustments over time.

<img src="https://mintcdn.com/stigg/ygEljAEwG3Wab_zZ/images/credit-grants.png?fit=max&auto=format&n=ygEljAEwG3Wab_zZ&q=85&s=2063c339c476382d204ff7ec8c632c33" alt="" width="2278" height="3322" data-path="images/credit-grants.png" />

## Customization

### No-code widget designer

The Stigg app offers a no-code widget designer, which allows you to control the widget colors, typography and layout.

### Custom CSS

For more advanced customization, custom CSS can be applied using the widget designer of the Stigg app. Alternatively, custom CSS can also be applied using code.

Below you can find a list of the supported CSS classes:

#### Main container classes

| Class name                                                                  | Description                                                   |
| --------------------------------------------------------------------------- | ------------------------------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-container`</span> | Main wrapper container for the entire **CreditGrants** widget |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-card`</span>      | Card container that wraps the table content                   |

#### Table classes

| Class name                                                                    | Description                                         |
| ----------------------------------------------------------------------------- | --------------------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-table`</span>       | Main table component                                |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-table-error`</span> | Error state styling when the table fails to load    |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-table-empty`</span> | Empty state styling when there are no credit grants |

#### Table cell content classes

| Class name                                                                       | Description                                    |
| -------------------------------------------------------------------------------- | ---------------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-effective-date`</span> | **Received At** date column content            |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-grant-type`</span>     | **Grant Type** column content                  |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-status-chip`</span>    | Status chip component in the **Status** column |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-balance`</span>        | **Balance** column content                     |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-grants-expiry-date`</span>    | **Expiry Date** column content                 |

## Snippet

```jsx theme={null}
import React from 'react';
import { StiggProvider, CreditGrants } from '@stigg/react-sdk';

function App() {
  return (
    <StiggProvider
      apiKey="your-stigg-api-key"
      customerId="customer-demo-01"
    >
      <div className="credit-widgets">
        {/* Credit Grants Table */}
        <CreditGrants
          currencyId="cred-type-ai-tokens" // Required: currency identifier
          
          // Optional: Custom column labels and messages
          localization={{
            receivedAt: "Grant Date",
            grantType: "Type",
            status: "Status",
            balance: "Amount",
            expiryDate: "Expires",
            emptyState: "No credit grants found for this currency",
            loadingState: "Loading grants...",
            errorState: "Unable to load credit grants"
          }}
        />
      </div>
    </StiggProvider>
  );
}

export default App;
```

### Props

<ParamField body="currencyId" type="string">
  Currency or credit type identifier used to filter credit grants.
</ParamField>

<ParamField body="pageSize" type="number">
  Number of credit grant records to load per page.
</ParamField>

<ParamField body="paging" type="object">
  Cursor-based paging configuration for navigating through large result sets.
</ParamField>

<ParamField body="decimalPlaces" type="number">
  Number of decimal places to display for credit balances.
</ParamField>

<ParamField body="localization" type="object">
  Text overrides for customizing table headers, labels, and states.
</ParamField>

### Texts

The default widget texts can currently be overridden using code:

<CodeGroup>
  ```tsx React theme={null}
  import { CreditGrants } from "@stigg/react-sdk";

  // Basic usage
  export function CustomerCreditGrants() {
    return (
      <CreditGrants
        currencyId="<CURRENCY_ID>"
        pageSize={10}
        localization={{
          receivedAt: "Received",
          grantType: "Grant type",
          status: "State",
          balance: "Balance",
          expiryDate: "Expires",
          loadingState: "Loading credit grants...",
          emptyState: "No credit grants available",
          errorState: "Failed to load credit grants",
          effectiveAt: "Effective at",
        }}
      />
    );
  }
  ```

  ```bash bash theme={null}
  <script setup lang="ts">
  import { CreditGrants, type CreditGrantsProps } from "@stigg/vue-sdk";

  const creditGrants: CreditGrantsProps = {
    currencyId: "<CURRENCY_ID>",
    pageSize: 10,
    localization: {
      receivedAt: "Received",
      grantType: "Grant type",
      status: "State",
      balance: "Balance",
      expiryDate: "Expires",
      loadingState: "Loading credit grants...",
      emptyState: "No credit grants available",
      errorState: "Failed to load credit grants",
      effectiveAt: "Effective at",
    },
  };
  </script>

  <template>
    <CreditGrants v-bind="creditGrants" />
  </template>
  ```
</CodeGroup>

## Additional resources

<Card title="Get credit grants" icon="palette" href="https://react-sdk-docs.stigg.io/interfaces/getcreditgrantsparams" horizontal />

## Related SDKs

<CardGroup cols={2}>
  <Card title="" href="/api-and-sdks/integration/frontend/react" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/FZ_ywutvYHnQbKpn/images/react.svg?fit=max&auto=format&n=FZ_ywutvYHnQbKpn&q=85&s=75e8661a7d87b8e2b3493d7fdfb33db9" alt="React" style={{ width: '32px' }} width="23" height="20" data-path="images/react.svg" />

      <span>React</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/vuejs" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/qpsRT7dNo0hXTxnb/images/vue.svg?fit=max&auto=format&n=qpsRT7dNo0hXTxnb&q=85&s=c861442fd84f9822a716d778b10a8dba" alt="Vue.js" style={{ width: '32px' }} width="800" height="800" data-path="images/vue.svg" />

      <span>Vue.js</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/nextjs" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/FZ_ywutvYHnQbKpn/images/next.svg?fit=max&auto=format&n=FZ_ywutvYHnQbKpn&q=85&s=7fea95b3e8f678015cb8b8d58d1e7886" alt="Next.js" style={{ width: '32px' }} width="16" height="16" data-path="images/next.svg" />

      <span>Next.js</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/html" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/aJeGPh9dwMpK_Kcr/images/html.svg?fit=max&auto=format&n=aJeGPh9dwMpK_Kcr&q=85&s=ae948dc9e5ca66cf75892b94859954a0" alt="Webflow, Wordpress, HTML" style={{ width: '32px' }} width="800" height="800" data-path="images/html.svg" />

      <span>Webflow, Wordpress, HTML</span>
    </div>
  </Card>
</CardGroup>