{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "55e7b392-14c0-4411-bfcf-a46e7e117368",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a1183801-6081-4061-8795-d7fd8e5e8f38",
   "metadata": {},
   "source": [
    "The `Pagination` component provides a convenient way to navigate between a number of consecutive pages.\n",
    "\n",
    "## Parameters:\n",
    "\n",
    "### Core\n",
    "\n",
    "* **`count`** (`int`): The total number of pages\n",
    "* **`disabled`** (`boolean`): Whether the menu is disabled.\n",
    "* **`value`** (`dict`): The currently selected page.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`boundary_count`** (`int`): The number of boundary pages to show\n",
    "* **`color`** (`str`): The color variant of the paginator, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red).\n",
    "* **`shape`** (`Literal[\"circular\", \"rounded\"]`): The direction the menu opens in.\n",
    "* **`sibling_count`** (`int`): The number of sibling pages to show\n",
    "* **`show_first_button`** (`boolean`): Whether to show button to navigate to first page.\n",
    "* **`show_last_button`** (`boolean`): Whether to show button to navigate to last page.\n",
    "* **`size`** (`Literal[\"small\", \"medium\", \"large\"]`): The size of the pagination menu.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (`dict`): Component level styling API.\n",
    "- **`theme_config`** (`dict`): Theming API.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fcdcd493-8855-48de-a560-672cd8ab7e22",
   "metadata": {},
   "source": [
    "The `Pagination` component allows selecting between a `count` of Pages."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ddb562b1-17a4-4ecb-91b5-c52f351f9c8e",
   "metadata": {},
   "outputs": [],
   "source": [
    "pagination = pmui.Pagination(count=100)\n",
    "\n",
    "pagination"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "666ef005-d429-491f-9fcc-3466c2ed6f6b",
   "metadata": {},
   "source": [
    "While the display uses 1-baseed indexing, clicking on a particular page will set the 0-indexed `value`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "efca39b8-b9c0-4398-8d75-ed9888617892",
   "metadata": {},
   "outputs": [],
   "source": [
    "pagination.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "33dd1aaf-0528-46ac-b215-28e83c1270d3",
   "metadata": {},
   "source": [
    "If you have a list of objects that you want to `paginate` you can create a pagination with the `Pagination.paginate` method, providing the list of objects, a `page_size` and optionally the `layout` for the paginated view:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "50d2fdfc-abd5-4b3f-8ebf-0eb08eda754f",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Pagination.paginate([f'Item: {i}' for i in range(1, 101)], page_size=5)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4e4d9b83-437d-46e2-8eaf-be73163980ee",
   "metadata": {},
   "source": [
    "### Display\n",
    "\n",
    "#### `color`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "07e84dc1-1d00-4c35-93ae-05981c707f08",
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.GridBox(*(\n",
    "    pagination.clone(color=color)\n",
    "    for color in pmui.Pagination.param.color.objects\n",
    "), ncols=2)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "858193c5-4f5f-47be-9248-8ada976125a9",
   "metadata": {},
   "source": [
    "#### `shape`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6cbc6110-0a36-4fcd-aa4e-1d0e55b96056",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(*(\n",
    "    pagination.clone(shape=shape)\n",
    "    for shape in pmui.Pagination.param.shape.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1dd9a997-8978-4cbc-889c-bffeccdd9adb",
   "metadata": {},
   "source": [
    "#### `show_first_button`/`show_last_button`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d711b76d-e761-4cf6-bb49-747bd01d09f6",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Pagination(count=100, show_first_button=True, show_last_button=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "693d2f24-fb5c-4e71-b5ee-593e2fcf3353",
   "metadata": {},
   "source": [
    "#### `size`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d7deca37-4051-4d20-bcae-8dc8940480fc",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Column(*(\n",
    "    pagination.clone(size=size)\n",
    "    for size in pmui.Pagination.param.size.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b4fa9861-9a54-4b2f-bc92-fe3769043890",
   "metadata": {},
   "source": [
    "#### `variant`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2baf4587-543e-433c-85c0-d3dba2fefa5c",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(*(\n",
    "    pagination.clone(variant=variant)\n",
    "    for variant in pmui.Pagination.param.variant.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "89f51600-ce68-4d2e-8442-ab7eadae77f4",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "The `Pagination` exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f6598620-0244-4691-b560-1d7b2a27e6c0",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Pagination().api(jslink=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "af27478d-b97e-4680-823a-126ac9587519",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Panel Documentation:**\n",
    "\n",
    "- [How-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html) - Learn how to add interactivity to your applications using widgets\n",
    "- [Setting up callbacks and links](https://panel.holoviz.org/how_to/links/index.html) - Connect parameters between components and create reactive interfaces\n",
    "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html) - Build parameter-driven applications\n",
    "\n",
    "**Material UI Pagination:**\n",
    "\n",
    "- [Material UI Button Reference](https://mui.com/material-ui/react-pagination) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Button API](https://mui.com/material-ui/api/pagination/) - Detailed API reference and configuration options"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}