feat(table): add a prop to easily control the pagination's location

You can now render the pagination component on top
or at the bottom of the table, using a prop.
This was previously an undocumented feature, applicable
using a helper class of `has-pagination-on-top`.
But now it is more accessible and discoverable feature for the
consumer.

Author: Kiarokh

etc/lime-elements.api.md

@@ -733,6 +733,7 @@ export namespace Components {
         "movableColumns": boolean;
         "page": number;
         "pageSize": number;
+        "paginationLocation": 'top' | 'bottom';
         "selectable": boolean;
         "selection": object[];
         "sorting": ColumnSorter[];
@@ -1881,6 +1882,7 @@ export namespace JSX {
         "onSort"?: (event: LimelTableCustomEvent<ColumnSorter[]>) => void;
         "page"?: number;
         "pageSize"?: number;
+        "paginationLocation"?: 'top' | 'bottom';
         "selectable"?: boolean;
         "selection"?: object[];
         "sorting"?: ColumnSorter[];

src/components/table/examples/table-pagination.tsx

@@ -0,0 +1,76 @@
+import { Component, h, Host, State } from '@stencil/core';
+import {
+    Column,
+    Option,
+    LimelSelectCustomEvent,
+} from '@limetech/lime-elements';
+import { data, Bird } from './birds';
+import { capitalize } from 'lodash-es';
+
+/**
+ * Pagination
+ * By specifying a `pageSize`, you can enable pagination for the table.
+ *
+ * Additionally, you can control the location of the pagination controls
+ * by setting the `paginationLocation` property to either `top` or `bottom`.
+ *
+ * @sourceFile birds.ts
+ */
+@Component({
+    tag: 'limel-example-table-pagination',
+    styleUrl: 'table.scss',
+    shadow: true,
+})
+export class TablePaginationExample {
+    @State()
+    private columns: Array<Column<Bird>> = [
+        { title: 'Name', field: 'name' },
+        { title: 'Binominal name', field: 'binominalName' },
+        { title: 'Nest type', field: 'nest', formatter: capitalize },
+        { title: 'Eggs per clutch', field: 'eggs', horizontalAlign: 'right' },
+        { title: 'Origin', field: 'origin' },
+    ];
+
+    @State()
+    private paginationLocation: 'top' | 'bottom' = 'bottom';
+
+    private paginationLocationOptions: Option[] = [
+        { text: 'Top', value: 'top' },
+        { text: 'Bottom', value: 'bottom' },
+    ];
+
+    private pageSize = 5;
+
+    render() {
+        return (
+            <Host>
+                <limel-table
+                    data={data}
+                    columns={this.columns}
+                    pageSize={this.pageSize}
+                    paginationLocation={this.paginationLocation}
+                />
+                <limel-example-controls>
+                    <limel-select
+                        label="Pagination location"
+                        value={this.getSelectedPaginationLocation()}
+                        options={this.paginationLocationOptions}
+                        onChange={this.handlePaginationLocationChange}
+                    />
+                </limel-example-controls>
+            </Host>
+        );
+    }
+
+    private getSelectedPaginationLocation = (): Option => {
+        return this.paginationLocationOptions.find(
+            (option) => option.value === this.paginationLocation
+        );
+    };
+
+    private handlePaginationLocationChange = (
+        event: LimelSelectCustomEvent<Option>
+    ) => {
+        this.paginationLocation = event.detail.value as 'top' | 'bottom';
+    };
+}

src/components/table/table.tsx

@@ -46,6 +46,7 @@ const FIRST_PAGE = 1;
  * @exampleComponent limel-example-table-header-menu
  * @exampleComponent limel-example-table-movable-columns
  * @exampleComponent limel-example-table-sorting-disabled
+ * @exampleComponent limel-example-table-pagination
  * @exampleComponent limel-example-table-local
  * @exampleComponent limel-example-table-remote
  * @exampleComponent limel-example-table-activate-row
@@ -179,6 +180,14 @@ export class Table {
     @Prop({ reflect: true })
     public language: Languages = 'en';
 
+    /**
+     * Location of the pagination controls.
+     * - `top`: Display pagination controls at the top of the table
+     * - `bottom`: Display pagination controls at the bottom of the table (default)
+     */
+    @Prop({ reflect: true })
+    public paginationLocation: 'top' | 'bottom' = 'bottom';
+
     /**
      * Emitted when `mode` is `remote` and the table is loading new data. The
      * consumer is responsible for giving the table new data
@@ -863,6 +872,7 @@ export class Table {
             <Host
                 class={{
                     'has-low-density': this.layout === 'lowDensity',
+                    'has-pagination-on-top': this.paginationLocation === 'top',
                 }}
             >
                 <div