{"id":14972520,"url":"https://github.com/xactsystems/b-pagination-table","last_synced_at":"2025-10-26T19:31:33.484Z","repository":{"id":58306382,"uuid":"306329873","full_name":"XactSystems/b-pagination-table","owner":"XactSystems","description":"A pagination table for BootstrapVue with AJAX fetch and server side pagination options.","archived":false,"fork":false,"pushed_at":"2024-10-31T16:54:24.000Z","size":1256,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T22:51:16.989Z","etag":null,"topics":["ajax","bootstrap-4","bootstrap-vue","hacktoberfest","pagination","table"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/XactSystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2020-10-22T12:28:49.000Z","updated_at":"2024-10-31T16:54:28.000Z","dependencies_parsed_at":"2024-04-20T15:37:34.530Z","dependency_job_id":"e11ff551-86b7-491e-a6b9-28b9e61262dd","html_url":"https://github.com/XactSystems/b-pagination-table","commit_stats":{"total_commits":63,"total_committers":2,"mean_commits":31.5,"dds":"0.17460317460317465","last_synced_commit":"a01b55939f1d9c56caddf967eb9aabe9a4ff7ab8"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XactSystems%2Fb-pagination-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XactSystems%2Fb-pagination-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XactSystems%2Fb-pagination-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XactSystems%2Fb-pagination-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XactSystems","download_url":"https://codeload.github.com/XactSystems/b-pagination-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["ajax","bootstrap-4","bootstrap-vue","hacktoberfest","pagination","table"],"created_at":"2024-09-24T13:47:02.780Z","updated_at":"2025-10-26T19:31:33.090Z","avatar_url":"https://github.com/XactSystems.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# b-pagination-table\nA pagination table for BootstrapVue with AJAX fetch and server side pagination options.\n\nInternally the component uses b-pagination and b-table combined into a single component. All the props and slots for both sub-components can be applied to b-pagination-table. Any arbitrary attributes are applied to the b-table component via $attrs.\n\nYou can supply a list of items or provide a URL to fetch the data.\n\n\n## Installation\n\n### Add the component to your project\n```\nnpm install @xactsystems/b-pagination-table\n```\n\n### Use it in your Vue app\n```\n\u003ctemplate\u003e\n    \u003cb-pagination-table small striped :data-url=\"dataUrl\" :fields=\"fields\"\u003e\n        \u003ctemplate v-slot:cell(id)=\"row\"\u003e\n            \u003ca href=\"/view/{{ row.value }}\"\u003eItem:{{ row.value }}\u003c/a\u003e\n        \u003c/template\u003e\n    \u003c/b-pagination-table\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\nimport BPaginationTable from '@xactsystems/b-pagination-table'\n\nexport default {\n    Components: {\n        'b-pagination-table: BPaginationTable,\n    },\n\n    data() {\n        return {\n            dataUrl: '/my-list',\n            fields: [\n                { key: 'id', label: 'Item' },\n                { key: 'description', label: 'Description' }\n            ]\n        }\n    }\n...\n}\n```\n\n## Multi-page row select\nInternally b-pagination-table tracks the selected rows on each page. As you move from page to page the selected items are retained and redisplayed. The row-selected event is the base b-table event and only returns the selected items on the current page. To retrieve a complete set of selected items call the **getAllSelectedRows** method on the table instance.\n\n## Component props\n| Prop                    | Type    | Default Value           | Description                                                                                                                                                                       |\n|-------------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| data-url                | String  | null                    | The URL to fetch the table data from.                                                                                                                                             |\n| items                   | Array   | []                      | Array of items to show in the table. You do not need to use this if you are using data-url unless you want to sync the returned items via the update:items event.                 |\n| pagination              | Boolean or String | true          | If set to 'always', always show the pagination component. If set to true, show the pagination component if the page count is greater then 1. If false pagination is never shown.  |\n| page-length             | Boolean | false                   | Show the page-length dropdown.                                                                                                                                                    |\n| per-page                | Number  | 20                      | The initial page length of the table.                                                                                                                                             |\n| page-length-options     | Array   | [ 10, 20, 50, 75, 100 ] | Options for the page length dropdown.                                                                                                                                             |\n| page-length-cols        | Number  | 3                       | Column width for the page length input.                                                                                                                                      |\n| search                  | Boolean | false                   | Show the search text input.                                                                                                                                                       |\n| search-min-length       | Number  | 0                       | The minimum number of character to enter in the search text input before filtering the table results.                                                                             |\n| search-debounce         | Number  | 150                     | The number of milliseconds to wait between changes to the table filter when searching.                                                                                            |\n| search-cols             | Number  | 3                       | Column width for the search input.                                                                                                                                      |\n| filter                  | string  |                         | Filter property for the table element. When set this overrides the internal search feature. Also look at the 'header' and  'search' slots for providing custom search features.                                                                                                                                       |\n| filter-function         | Function |                        | Filter function for custom searches. Applying this function will override the internal search feature so you also need to set your own search input via the 'search' slot. |\n| sort-by                 | String  | ''                      | The key of the initial sort column.                                                                                                                                               |\n| sort-desc               | Boolean | false                   | Set to true to sort sort-by descending order.                                                                                                                                     |\n| ssp                     | Boolean | false                   | Set to true to use Server-Side-Processing for pagination.                                                                                                                         |\n| state                   | Boolean | false                   | Set to true to save the table state, this will save page-length, search text and the current page number and set these again when the component is re-mounted or the page loaded. |\n| pagination-size         | String  | 'md'                    | The size of the pagination component. This maps to the 'size' prop in b-pagination.                                                                                               |\n| pagination-aria-label   | String  | 'md'                    | The ARIA label of the pagination component. This maps to the 'aria-label' prop in b-pagination.                                                                                   |\n\n\nPlease review the full set of props for both the b-table and the b-pagination components:\n\nhttps://bootstrap-vue.org/docs/components/table\n\nhttps://bootstrap-vue.org/docs/components/pagination\n\n\n\n## Slots\nThe following slots are available for customisation of the table pagination component.\n|Slot          | Description                                                                                                                                     |\n|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------|\n|header-left   | This slot allows custom elements to be placed to the left of the Page Length input. N.B. Wrap your slot content in a b-col tag and specify cols.|\n|header        | This slot allows custom elements to be placed between the Page Length and Search inputs. N.B. This may change as we review the header elements. |\n|header-right  | This slot allows custom elements to be placed to the right of the Search input. N.B. Wrap your slot content in a b-col tag and specify cols.    |\n|search        | This slot provides a replacement for the inbuilt search input. The searchDebounce value is passed to the slot.                                  |\n|table-columns | Each table column is provided as a slot as per the b-table documentation. https://bootstrap-vue.org/docs/components/table#scoped-field-slots    |\n\n\n## Events\nAll the events of both b-table and b-pagination are exposed. In addition the following events are emitted:\n|Event         |Payload       |Details                                                          |\n|--------------|--------------|-----------------------------------------------------------------|\n|input:per-page|Number, String| The size of the page length after the dropdown value is changed.|\n|update:items  |Array         | The array of item data fetched from the data-url source.        |\n\n\n## Methods\nAll the select methods below are passed on to the underlying b-table component and respect the the select-mode prop.\n|Method                |Details                                                                                                           |\n|----------------------|------------------------------------------------------------------------------------------------------------------|\n|selectRow(index)      | Select a row on the current page with the given **index** number.                                                |\n|unselectRow(index)    | Unselect a row on the current page with the given **index** number.                                              |\n|selectAllRows()       | Select all the rows on the current page.                                                                         |\n|clearSelected()       | Unselect all rows on the current page.                                                                           |\n|isRowSelected(index)  | Returns **true** if the row with the given index is selected on the current page, otherwise it returns **false**.|\n|getAllSelectedRows()  | Return an array of selected objects across all pages.                                                            |\n\n\n## Server Side Processing\nThe component allows pagination on the back-end server by providing page relative query parameters to the fetch url. This is enabled by setting the ssp prop to true.\n\n### SSP Query Parameters\n|Parameter|Description                                                                                                     |\n|---------|----------------------------------------------------------------------------------------------------------------|\n|filter   | The search text to filter the results by.                                                                      |\n|orderBy  | Provides the key to sort the results by. If this is preceded by '-' the results should be sorted as descending.|\n|pageStart| The first row number the results should start at.                                                              |\n|pageLength| The maximum number of rows to return.                                                                         |\n\n\n### SSP Returned Data\n|Parameter|Description                                                                                                     |\n|---------|----------------------------------------------------------------------------------------------------------------|\n|returnedCount| The number of records returned in the current response.                                                    |\n|totalCount   | The total number of records available in the result set.                                                   |\n|filteredCount| The number of filtered records available in the result set.                                                |\n|data         | The current page records returned in the response.                                                                         |\n\n### Symfony/Doctrine Paginator\nThis linked gist demonstrates using the Doctrine/ORM Paginator to provide a repsonse to the b-paginator-table SSP request.\nhttps://gist.github.com/ianef/cdc445fe0df33c7dd7b7be3e8a16f866\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxactsystems%2Fb-pagination-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxactsystems%2Fb-pagination-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxactsystems%2Fb-pagination-table/lists"}