> For the complete documentation index, see [llms.txt](https://developer.usemultiplier.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.usemultiplier.com/multiplier-embed-sdks/components/payroll/gp-payroll.md).

# GP Payroll

The `GpPayroll` compound component lets partners embed a **Global Payroll** list experience. Partners control navigation through callbacks, with no router setup required.

{% hint style="info" %}
**Phase 1:** `GpPayroll.List` is available now. `GpPayroll.Details` is coming in a future release.
{% endhint %}

## Overview

`GpPayroll` currently exposes one sub-component:

| Component           | Description                                         |
| ------------------- | --------------------------------------------------- |
| `GpPayroll.List`    | Displays a paginated table of Global Payroll cycles |
| `GpPayroll.Details` | *(Coming soon — Phase 2)*                           |

## Prerequisites

The component must be rendered inside a `MultiplierGlobalConfigProvider`. See [Global Configuration](/multiplier-embed-sdks/installation-and-configuration.md#option-b-global-configuration) for setup instructions.

## GpPayroll.List

Renders the list of Global Payroll cycles.

### Basic Usage

```tsx
import { GpPayroll } from '@Multiplier-Core/partner-sdk-react';

function GlobalPayrollPage() {
  return <GpPayroll.List />;
}
```

### Usage with Row Click Handler

```tsx
import { useState } from 'react';
import { GpPayroll } from '@Multiplier-Core/partner-sdk-react';

function GlobalPayrollPage() {
  const [cycleId, setCycleId] = useState<string | null>(null);
  const [companyId, setCompanyId] = useState<string | undefined>();

  const handleRowClick = (cId: string, coId?: string) => {
    setCycleId(cId);
    setCompanyId(coId);
    // Navigate to your details page
    // e.g. router.push(`/payroll/global/${cId}`)
  };

  return <GpPayroll.List onRowClick={handleRowClick} />;
}
```

{% hint style="info" %}
**Tip:** Always store both `cycleId` and `companyId` from the callback. The `companyId` will be required when `GpPayroll.Details` is released in Phase 2.
{% endhint %}

### Props

| Prop         | Type                                            | Required | Description                                                                                                   |
| ------------ | ----------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------- |
| `onRowClick` | `(cycleId: string, companyId?: string) => void` | No       | Called when a payroll cycle row is clicked. Receives the `cycleId` and the `companyId` of the selected cycle. |

## Preparing for GpPayroll.Details (Phase 2)

When `GpPayroll.Details` ships, it will require both `cycleId` and `companyId`. Store them both today so you don't need to change your list integration later:

```tsx
import { useState } from 'react';
import { GpPayroll } from '@Multiplier-Core/partner-sdk-react';

function GlobalPayrollPage() {
  // Store both now — Details will need companyId in Phase 2
  const [selectedCycle, setSelectedCycle] = useState<{
    cycleId: string;
    companyId?: string;
  } | null>(null);

  if (selectedCycle) {
    // Replace this placeholder with GpPayroll.Details when it ships
    return (
      <div>
        <button onClick={() => setSelectedCycle(null)}>← Back</button>
        <p>Cycle ID: {selectedCycle.cycleId}</p>
        <p>Company ID: {selectedCycle.companyId}</p>
      </div>
    );
  }

  return (
    <GpPayroll.List
      onRowClick={(cycleId, companyId) =>
        setSelectedCycle({ cycleId, companyId })
      }
    />
  );
}
```

## CSS Customization

The component exposes a stable CSS class hook for layout customization. This class carries no default styles — it is purely for targeting.

| Class                              | Element                          | Description                 |
| ---------------------------------- | -------------------------------- | --------------------------- |
| `.multiplier-sdk__gp-payroll-list` | Root wrapper of `GpPayroll.List` | Wraps the entire list table |

### Example

```css
/* Give the list full page width */
.multiplier-sdk__gp-payroll-list {
  width: 100%;
}

/* Add spacing inside a card layout */
.payroll-card .multiplier-sdk__gp-payroll-list {
  padding: 16px;
}
```

## Notes

* **No router required.** The component works with any navigation strategy (React Router, Next.js, plain `useState`, etc.).
* Both `cycleId` and `companyId` are provided in `onRowClick` — capture both even if only `cycleId` is used today.
* The component automatically handles loading states, empty states, and error states internally.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.usemultiplier.com/multiplier-embed-sdks/components/payroll/gp-payroll.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.