{"id":37003191,"url":"https://github.com/sylvainjule/kirby-pagetable","last_synced_at":"2026-01-14T00:32:19.937Z","repository":{"id":39499967,"uuid":"163504201","full_name":"sylvainjule/kirby-pagetable","owner":"sylvainjule","description":"Display subpages in a flexible table section. Kirby 3 only.","archived":true,"fork":false,"pushed_at":"2024-03-11T15:35:17.000Z","size":597,"stargazers_count":112,"open_issues_count":0,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-10-03T05:25:29.857Z","etag":null,"topics":["datatable","index","kirby","pages","section","subpages","table"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sylvainjule.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["sylvainjule"],"custom":["https://www.paypal.me/sylvainjl"]}},"created_at":"2018-12-29T11:03:25.000Z","updated_at":"2025-05-05T08:31:55.000Z","dependencies_parsed_at":"2024-06-12T15:44:27.212Z","dependency_job_id":"1b5f4a4d-760c-4c4a-8ec7-e0ba99c41c6b","html_url":"https://github.com/sylvainjule/kirby-pagetable","commit_stats":{"total_commits":98,"total_committers":15,"mean_commits":6.533333333333333,"dds":"0.30612244897959184","last_synced_commit":"890cc884693b07f0f63cf14455690a34d222db2a"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/sylvainjule/kirby-pagetable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainjule%2Fkirby-pagetable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainjule%2Fkirby-pagetable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainjule%2Fkirby-pagetable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainjule%2Fkirby-pagetable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sylvainjule","download_url":"https://codeload.github.com/sylvainjule/kirby-pagetable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainjule%2Fkirby-pagetable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28406503,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T21:51:37.118Z","status":"ssl_error","status_checked_at":"2026-01-13T21:45:14.585Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datatable","index","kirby","pages","section","subpages","table"],"created_at":"2026-01-14T00:32:19.439Z","updated_at":"2026-01-14T00:32:19.928Z","avatar_url":"https://github.com/sylvainjule.png","language":"PHP","funding_links":["https://github.com/sponsors/sylvainjule","https://www.paypal.me/sylvainjl","https://paypal.me/sylvainjl"],"categories":[],"sub_categories":[],"readme":"\u003e This plugin is compatible with Kirby 3 for legacy projects, it won't be updated to Kirby 4 whose Pages sections offer a `layout: table` option.\n\n# Kirby 3 - Pagetable\n\nDisplay subpages in a flexible, sortable and searchable table.\n\n![screenshot](https://user-images.githubusercontent.com/14079751/50537598-15aef980-0b62-11e9-8d82-e5b22584c9c5.jpg)\n\n\u003cbr/\u003e\n\n## Overview\n\n\u003e Kirby 3.6+ is supported with Pagetable 1.1+. You should use 1.0.9 with previous Kirby 3 versions.\n\n\u003e This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider [making a donation of your choice](https://paypal.me/sylvainjl) or purchasing your license(s) through [my affiliate link](https://a.paddle.com/v2/click/1129/36369?link=1170).\n\n- [1. Installation](#1-installation)\n- [2. Setup](#2-setup)\n- [3. Global options](#3-options)\n  * [3.1. Inherited options](#31-inherited-options)\n  * [3.2. Limit options](#32-limit-options)\n  * [3.3. Visibility options](#33-visibility-options)\n  * [3.4. Query](#34-query)\n  * [3.5. Custom strings](#35-custom-strings)\n  * [3.6. Panel / preview link](#36-panel-preview-link)\n- [4. Column options](#4-column-options)\n  * [4.1. label](#41-label)\n  * [4.2. text](#42-text)\n  * [4.3. type](#43-type)\n  * [4.4. width](#44-width)\n  * [4.5. class](#45-class)\n  * [4.6. sortable](#46-sortable)\n  * [4.7. searchable](#47-searchable)\n  * [4.8. mobile](#48-mobile)\n- [5. Complete example](#5-complete-example)\n- [6. License](#6-license)\n- [7. Credits](#7-credits)\n\n\u003cbr/\u003e\n\n## 1. Installation\n\n\u003e If you are looking for a Kirby 2 version of this field, please check out the [index field](https://github.com/jongacnik/kirby-index-field).\n\nDownload and copy this repository to ```/site/plugins/pagetable```\n\nAlternatively, you can install it with composer: ```composer require sylvainjule/pagetable```\n\n\u003cbr/\u003e\n\n## 2. Blueprint usage\n\nThe `pagetable` section can replace any `pages` section you have already set:\n\n```yaml\nsections:\n  mypagetable:\n    headline: My PageTable\n    type: pagetable\n```\n\n\u003cbr/\u003e\n\n## 3. Global options\n\n### 3.1. Inherited options\n\nThese options work exactly the same way they do for the `pages` section, please refer to [its documentation](https://getkirby.com/docs/reference/panel/sections/pages):\n\n```yaml\n- create\n- headline\n- image\n- max\n- min\n- parent\n- sortBy\n- status\n```\n\n### 3.2. Limit options\n\nYou can limit the initial number of displayed pages the same way you could with the usal `pages` section, only pagination will happen on the front-end.\nDefault is `25`.\n\n```yaml\nsections:\n  mypagetable:\n    type: pagetable\n    limit: 25\n```\n\nYou can also set the limit options displayed in the select input at the bottom of the section. Default is `[10, 25, 50]`.\n\n```yaml\nsections:\n  mypagetable:\n    type: pagetable\n    limitOptions:\n      - 10\n      - 25\n      - 50\n```\n\n### 3.3. Visibility options\n\nYou can toggle the visibility of the image column, status button and action button\n\n```yaml\nsections:\n  mypagetable:\n    type: pagetable\n    showImage: false\n    showStatus: false\n    showActions: false\n```\n\n### 3.4. Query\n\nYou can query any set of pages you'd like with the `query` option. Queries can start with either `kirby`, `site`, `pages` or (current) `page`.\nThis, for example, will query pages that have *\"Foo\"* in their title.\n\n```yaml\nsections:\n  mypagetable:\n    type: pagetable\n    query: site.index.filterBy('title', '*=', 'Foo')\n```\n\nLearn more about Kirby's blueprints query language [here](https://getkirby.com/docs/guide/blueprints/query-language).\n\n### 3.5. Custom strings\n\nPagetable ships with translated strings for its placeholders / buttons / etc.\nYou can change any of them to whatever you'd like in your blueprint:\n\n```yaml\nsections:\n  mypagetable:\n    type: pagetable\n    translations:\n      # single language\n      empty: You have not added any products yet\n      # or translated\n      empty:\n        en: You have not added any projects yet\n        fr: Vous n'avez actuellement aucun projet à afficher\n      # All available keys and their default english strings\n      empty: No pages yet\n      rowsPerPage: Pages displayed\n      all: All\n      loading: Loading pages…\n      filterPages: Filter pages…\n      reset: Reset\n```\n\n### 3.6. Panel / preview link\n\nBy default, each row will redirect to its panel page. You can however chose to redirect your editors to its preview page instead, by setting the `url` option.\n\n```yaml\nsections:\n  mypagetable:\n    type: pagetable\n    url: preview\n```\n\n\u003cbr/\u003e\n\n## 4. Column options\n\nThe plugin allows you to choose the columns you want to display, and fine-tune their behaviour. A column with all options explicitely set will look like:\n\n```yaml\ncolumns:\n  title:\n    label: Page title\n    text: '{{ page.title }}'\n    type: text\n    width: 1/2\n    class: my-title-class\n    sortable: true\n    searchable: true\n  modified:\n    ...\n```\n\n#### 4.1. `label`\n\n\u003e type: `string`, default: the option's key\n\nThe column's title, displayed in the head / first row of the table.\n\n```yaml\n# Single-language\ncolumns:\n  title:\n    label: Page title\n\n# Multi-language\ncolumns:\n  title:\n    label:\n      en: Page title\n      fr: Titre de la page\n```\n\n#### 4.2. `text` (required)\n\n\u003e type: `string`\n\nDefines the information displayed in each row of the column. You will need to inject information from the current page there, with the help of template placeholders:\n\n```yaml\ncolumns:\n  title:\n    text: '{{ page.title }}'\n```\n\nNote that the only limitation here is to always return a string. This string can either contain plain text or html markup, it will be rendered accordingly. Which means, for example, that your can format the returned string with a [field method](https://getkirby.com/docs/reference/plugins/extensions/field-methods):\n\n```php\n// site/plugins/my-methods/index.php\nKirby::plugin('your/plugin', [\n    'fieldMethods' =\u003e [\n        'toBlue' =\u003e function($field) {\n            return '\u003cspan style=\"color: #384d9d\"\u003e' . $field-\u003evalue . '\u003c/span\u003e';\n        }\n    ]\n]);\n```\n\nIn your blueprint:\n\n```yaml\ncolumns:\n  title:\n    text: '{{ page.title.toBlue }}'\n```\n\nWill display blue titles in the table:\n\n![screenshot-blue](https://user-images.githubusercontent.com/14079751/50537762-6889b080-0b64-11e9-869e-5083831acfac.jpg)\n\n#### 4.3. `type`\n\n\u003e type: `string`, default: `text`\n\nThe content type of the column. Most of the time you will want to keep the default type, but in a few cases is crucial to set it explicitely in order to get the sorting and alignement right. Options are:\n\n- `text`: default, left aligned\n- `number`: right aligned\n- `decimal`: right aligned, 2 decimal places\n- `percentage`: right aligned, expects a decimal between 0 and 1 (like 0.03) and formats it as 3.00%\n- `boolean`: right aligned\n- `date`: right aligned, expects a string representation of date, as well as a two other required options.\n\nThe table needs to know the format in which your are passing the date (`dateInputFormat`) and how you want it to display them (`dateOutputFormat`). There is a little subtlety here, because syntax differs between [php dates](http://php.net/manual/fr/function.date.php) and the JS dates library, [date-fns](https://date-fns.org/v2.0.0-alpha.7/docs/parse). For example :\n\n```yaml\ncolumns:\n  title:\n    type: date\n    # return the date as 2018-12-24\n    text: '{{ page.modified(\"Y-m-d\") }}'\n    # tell the table to expect a date formated as 2018-12-24\n    dateInputFormat: 'YYYY-MM-DD'\n    # output it as Dec 24th 2018\n    dateOutputFormat: 'MMM Do YYYY'\n```\n\n#### 4.4. `width`\n\n\u003e type: `string`, default: `auto`\n\nThe width of the column in the table, written as a fraction and automatically calculated (1/2, 1/3, 1/6, 32/94, etc.)\n\n```yaml\ncolumns:\n  title:\n    width: 3/4\n```\n\n#### 4.5. `class`\n\n\u003e type: `string`, default: `null`\n\nAllows you to add a custom class to the column.\nA class `myClass` will be added as `.head-myClass` to its th, and `.row-myClass` to its td.\n\n```yaml\ncolumns:\n  title:\n    class: myClass\n```\n\n#### 4.6. `sortable`\n\n\u003e type: `Boolean`, default: `true`\n\nEnable / disable sorting of the column.\n\n```yaml\ncolumns:\n  title:\n    sortable: true\n```\n\n#### 4.7. `searchable`\n\n\u003e type: `Boolean`, default: `true`\n\nIf `false`, this column will be ignored by the global search.\n\n```yaml\ncolumns:\n  title:\n    searchable: true\n```\n\n#### 4.8. `mobile`\n\n\u003e type: `Boolean`, default: `false`\n\nBy default, only the first column is shown on mobile viewports. You can change it for whichever column you'd like by setting this to `true`.\n\n```yaml\ncolumns:\n  title:\n    mobile: true\n```\n\nNote that only one column can have this option.\n\n\u003cbr/\u003e\n\n## 5. Complete example\n\nHere's how to reproduce the screenshot on top of this README:\n\n![screenshot](https://user-images.githubusercontent.com/14079751/50537598-15aef980-0b62-11e9-8d82-e5b22584c9c5.jpg)\n\nFirst, we need to have a few fields available in our children's blueprint (photographer's name, category, project's date):\n\n```yaml\n...\nfields:\n  photographer:\n    type: text\n  category:\n    type: select\n    options:\n      architecture: Architecture\n      culture: Culture\n      environment: Environment\n      gastronomy: Gastronomy\n      science: Science\n  date:\n    type: date\n```\n\nWe then create our pagetable section, and set the associated columns:\n\n```yaml\nsections:\n  mypagetable:\n    headline: Projects index\n    type: pagetable\n    status: all\n    image:\n      cover: true\n    columns:\n      title:\n        label: Title\n        text: '{{ page.title }}'\n        width: 1/3\n      photographer:\n        label: Photographer\n        text: '{{ page.photographer }}'\n      category:\n        label: Category\n        text: '{{ page.category }}'\n      date:\n        label: Date\n        type: date\n        text: '{{ page.date.toDate(\"Y-m-d\") }}'\n        dateInputFormat: 'YYYY-MM-DD'\n        dateOutputFormat: 'MMMM YYYY'\n        width: 1/6\n```\n\nAt this point, every information should be displayed but categories still lack any kind of styling. We need to call a [field method](https://getkirby.com/docs/reference/plugins/extensions/field-methods) here, that we need to register in a custom plugin. We'll create a `site/plugins/my-methods/index.php` and write:\n\n```php\nKirby::plugin('your/plugin', [\n    'fieldMethods' =\u003e [\n        'toLabel' =\u003e function($field) {\n          $value = $field-\u003evalue;\n          return '\u003cspan class=\"category-label\" data-category=\"'. $value .'\"\u003e' . $value . '\u003c/span\u003e';\n        },\n    ]\n]);\n```\n\nNow every label will be rendered as:\n\n```html\n\u003cspan class=\"category-label\" data-category=\"architecture\"\u003earchitecture\u003c/span\u003e\n```\n\nWe're on our way but there is still no styling. Let's create an `assets/css/panel.css` stylesheet (if you have none yet), and add some rules there:\n\n```css\n.k-pagetable-section .category-label {\n  font-size: 0.65rem;\n  text-transform: uppercase;\n  padding: 5px 7px;\n  border-radius: 3px;\n}\n.k-pagetable-section .category-label[data-category=\"architecture\"] {\n  background: #d7e1e9;\n}\n.k-pagetable-section .category-label[data-category=\"culture\"] {\n  background: #f5e6bf;\n}\n.k-pagetable-section .category-label[data-category=\"environment\"] {\n  background: #cae5dd;\n}\n.k-pagetable-section .category-label[data-category=\"gastronomy\"] {\n  background: #e0d7dd;\n}\n.k-pagetable-section .category-label[data-category=\"science\"] {\n  background: #f9e9e0;\n}\n```\n\nDon't forget to tell the panel that you want to load the stylesheet by adding it in your `site/config/config.php`:\n\n```php\n\u003c?php\n\nreturn array(\n  'panel' =\u003e array('css' =\u003e 'assets/css/panel.css'),\n);\n```\n\nLast step is changing the column's text in our blueprint, and append our new `toLabel` method:\n\n```yaml\ncategory:\n  label: Category\n  text: '{{ page.category.toLabel }}'\n```\n\nYou should now end up with the exact same setup than illustrated in the above screenshot.\n\n\u003cbr/\u003e\n\n## 6. License\n\nMIT\n\n\u003cbr/\u003e\n\n## 7. Credits\n\n- Many thanks to [stevenworldplay](https://github.com/stevenworldplay) for the `query` option, from [k3-pagesdisplay-section](https://github.com/rasteiner/k3-pagesdisplay-section)\n- This section is built on top of [vue-good-table](https://xaksis.github.io/vue-good-table/).\n- Please have a look at [https://github.com/jongacnik/kirby-index-field](kirby-index-field) for a K2 version.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvainjule%2Fkirby-pagetable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylvainjule%2Fkirby-pagetable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvainjule%2Fkirby-pagetable/lists"}