To import CSS, use:

import "@digitus-sms/form-controls/style.css";

import { StatusBadge } from "@digitus-sms/form-controls";

export default function Example() {
  return <StatusBadge status="Approved" />;
}
const statusConfig = {
  approved: {
    label: "Approved",
    bgColor: "#0D01FF",
    textColor: "#0D01FF",
    dotColor: "#0D01FF",
    borderColor: "#0D01FF",
  },
  rejected: {
    label: "Rejected",
    bgColor: "#F04438",
    textColor: "#F04438",
    dotColor: "#F04438",
    borderColor: "#F04438",
  },
  "response pending": {
    label: "Response Pending",
    bgColor: "#F79009",
    textColor: "#F79009",
    dotColor: "#F79009",
    borderColor: "#F79009",
  },
};
<StatusBadge
  status="approved"
  config={statusConfig}
/>

Props

| Prop | Type | Default | Description | | ---------------- | ----------------------------- | ------------ | ------------------------------------ |

|status |string | undefined | Status text | |config |Record<string, StatusConfig> | undefined | Status → style mapping | |className |string | undefined | Optional wrapper class |

Components

TablePaginator

A fully controlled, self-contained pagination component designed to work alongside PrimeReact's DataTable (or any table).

Usage

const MyTable = () => {
  const [rows, setRows] = useState(10);
  const [first, setFirst] = useState(0);
  const [inputValue, setInputValue] = useState<number | string>(1);
  const totalRecords = 500;
  const totalPages = Math.ceil(totalRecords / rows);

  const handlePageChange = (e: PaginatorPageChangeEvent) => {
    setFirst(e.first);
    setRows(e.rows);
    setInputValue(e.page + 1);
  };

  const handleRowsChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setRows(Number(e.target.value));
    setFirst(0);
    setInputValue(1);
  };

  const handlePageInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handlePageKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      const page = Number(inputValue);
      if (page >= 1 && page <= totalPages) {
        setFirst((page - 1) * rows);
      }
    }
  };

  const handlePageBlur = () => {
    const page = Number(inputValue);
    if (page >= 1 && page <= totalPages) {
      setFirst((page - 1) * rows);
    } else {
      setInputValue(Math.floor(first / rows) + 1); // reset to current page
    }
  };

  return (
    <>
      {/* Your DataTable here — remove paginator and paginatorTemplate props */}

      <TablePaginator
        currentPage={Math.ceil(first / rows) + 1}
        rows={rows}
        totalRecords={totalRecords}
        inputValue={inputValue}
        onPageChange={handlePageChange}
        onRowsChange={handleRowsChange}
        onPageInput={handlePageInput}
        onPageKeyDown={handlePageKeyDown}
        onPageBlur={handlePageBlur}
      />
    </>
  );
};

Props

| Prop | Type | Required | Default | Description | |---|---|---|---|---| | currentPage | number | ✅ | — | Current active page (1-based) | | rows | number | ✅ | — | Number of rows per page | | totalRecords | number | ✅ | — | Total number of records across all pages | | inputValue | number \| string | ✅ | — | Controlled value of the jump-to-page input | | onPageChange | (e: PaginatorPageChangeEvent) => void | ✅ | — | Called when user navigates via any button | | onRowsChange | (e: ChangeEvent<HTMLSelectElement>) => void | ✅ | — | Called when user changes rows-per-page | | onPageInput | (e: ChangeEvent<HTMLInputElement>) => void | ✅ | — | Called on every keystroke in the page input | | onPageKeyDown | (e: KeyboardEvent<HTMLInputElement>) => void | ✅ | — | Called on keydown (use for Enter key handling) | | onPageBlur | () => void | ✅ | — | Called when the page input loses focus | | rowsPerPageOptions | number[] | ❌ | [10, 25, 50, 100] | Options shown in the rows-per-page dropdown | | className | string | ❌ | — | Extra className applied to the root wrapper |

PaginatorPageChangeEvent

This type is exported from the library — no need to install PrimeReact just for the type.

import type { PaginatorPageChangeEvent } from 'sms-ui-library';

interface PaginatorPageChangeEvent {
  first: number;      // index of the first record on this page (0-based)
  rows: number;       // rows per page
  page: number;       // current page index (0-based)
  pageCount: number;  // total number of pages
}

Using with PrimeReact DataTable

Remove paginator and paginatorTemplate from DataTable and place TablePaginator directly below it:

<DataTable
  value={data}
  lazy
  first={first}
  rows={rows}
  totalRecords={totalRecords}
  onPage={handlePageChange}
  // ❌ do NOT pass paginator or paginatorTemplate
>
  {/* columns */}
</DataTable>

<TablePaginator
  currentPage={Math.ceil(first / rows) + 1}
  rows={rows}
  totalRecords={totalRecords}
  inputValue={inputValue}
  onPageChange={handlePageChange}
  onRowsChange={handleRowsChange}
  onPageInput={handlePageInput}
  onPageKeyDown={handlePageKeyDown}
  onPageBlur={handlePageBlur}
/>

Peer Dependencies

{
  "react": ">=17",
  "react-dom": ">=17"
}

License

MIT