@scania/tegel 0.0.9 → 0.0.11

package/dist/collection/components/table/table-component-pagination.stories.js

@@ -0,0 +1,215 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import tdsTable from './table/readme.md';
+import tdsTableToolbar from './table-toolbar/readme.md';
+import tdsHeader from './table-header/readme.md';
+import tdsHeaderCell from './table-header-cell/readme.md';
+import tdsTableBody from './table-body/readme.md';
+import tdsBodyRow from './table-body-row/readme.md';
+import tdsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import tdsBodyCell from './table-body-cell/readme.md';
+import tdsTableFooter from './table-footer/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Table`,
+  parameters: {
+    notes: {
+      'tds-table': tdsTable,
+      'tds-table-toolbar': tdsTableToolbar,
+      'tds-header': tdsHeader,
+      'tds-header-cell': tdsHeaderCell,
+      'tds-table-body': tdsTableBody,
+      'tds-body-row': tdsBodyRow,
+      'tds-body-row-expandable': tdsBodyRowExpandable,
+      'tds-body-cell': tdsBodyCell,
+      'tds-table-footer': tdsTableFooter,
+    },
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the Table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive Table',
+      description: 'Enables Table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between Table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column1Width: {
+      name: 'Column 1 width',
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column2Width: {
+      name: 'Column 2 width',
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column3Width: {
+      name: 'Column 3 width',
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column4Width: {
+      name: 'Column 4 width',
+      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    responsiveDesign: false,
+    verticalDivider: false,
+    noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
+  },
+};
+const PaginationTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+    <tds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      enable-responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      >
+          <tds-table-header>
+              <tds-header-cell column-key='truck' column-title='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='driver' column-title='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='country' column-title='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='mileage' column-title='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+          </tds-table-header>
+          <tds-table-body>
+          </tds-table-body>
+          <tds-table-footer default-page="2" pages="4" pagination></tds-table-footer>
+  </tds-table>
+  
+
+  <script>
+  /* ONLY WORKS IN THE CANVAS TAB. */
+  myData = [
+    {
+      "truck": "L-series",
+      "driver": "Sonya Bruce",
+      "country": "Brazil",
+      "mileage": 123987
+    },
+    {
+      "truck": "P-series",
+      "driver": "Guerra Bowman",
+      "country": "Sweden",
+      "mileage": 2000852
+    },
+    {
+      "truck": "G-series",
+      "driver": "Ferrell Wallace",
+      "country": "Germany",
+      "mileage": 564
+    },
+    {
+      "truck": "R-series",
+      "driver": "Cox Burris",
+      "country": "Spain",
+      "mileage": 1789357
+    },
+    {
+      "truck": "S-series",
+      "driver": "Montgomery Cervantes",
+      "country": "Croatia",
+      "mileage": 65
+    },
+    {
+      "truck": "L-series",
+      "driver": "Sheryl Nielsen",
+      "country": "Greece",
+      "mileage": 365784
+    },
+    {
+      "truck": "G-series",
+      "driver": "Benton Gomez",
+      "country": "France",
+      "mileage": 80957
+    },
+    {
+      "truck": "G-series",
+      "driver": "Benton Gomez",
+      "country": "France",
+      "mileage": 80957
+    }
+  ]
+  tableBody = document.querySelector('tds-table-body');
+  tableFooter = document.querySelector('tds-table-footer');
+
+
+  setPage = (page) => {
+    const rowsPerPage = 2;
+    const start = (page - 1) * rowsPerPage;
+
+    tableBody.bodyData = myData.slice(start, start + rowsPerPage);
+  } 
+
+  setPage(2);
+
+
+    tableFooter.addEventListener('tdsPageChange', (event) => {
+      const page = event.detail.paginationValue;
+      setPage(page);
+    })
+
+  </script>
+  
+  `);
+export const Pagination = PaginationTemplate.bind({});

package/dist/collection/components/table/table-component-sorting.stories.js

@@ -0,0 +1,238 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import tdsTable from './table/readme.md';
+import tdsTableToolbar from './table-toolbar/readme.md';
+import tdsHeader from './table-header/readme.md';
+import tdsHeaderCell from './table-header-cell/readme.md';
+import tdsTableBody from './table-body/readme.md';
+import tdsBodyRow from './table-body-row/readme.md';
+import tdsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import tdsBodyCell from './table-body-cell/readme.md';
+import tdsTableFooter from './table-footer/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Table`,
+  parameters: {
+    notes: {
+      'tds-table': tdsTable,
+      'tds-table-toolbar': tdsTableToolbar,
+      'tds-header': tdsHeader,
+      'tds-header-cell': tdsHeaderCell,
+      'tds-table-body': tdsTableBody,
+      'tds-body-row': tdsBodyRow,
+      'tds-body-row-expandable': tdsBodyRowExpandable,
+      'tds-body-cell': tdsBodyCell,
+      'tds-table-footer': tdsTableFooter,
+    },
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    compactDesign: {
+      name: 'Compact Design',
+      description: 'Enables compact design of the Table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive design',
+      description: 'Enables Table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column1sortable: {
+      name: 'Column 1 is sortable',
+      description: 'Enables column 1 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column2sortable: {
+      name: 'Column 2 is sortable',
+      description: 'Enables column 2 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column3sortable: {
+      name: 'Column 3 is sortable',
+      description: 'Enables column 3 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column4sortable: {
+      name: 'Column 4 is sortable',
+      description: 'Enables column 4 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between Table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column1Width: {
+      name: 'Column 1 width',
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column2Width: {
+      name: 'Column 2 width',
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column3Width: {
+      name: 'Column 3 width',
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column4Width: {
+      name: 'Column 4 width',
+      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    responsiveDesign: false,
+    column1sortable: true,
+    column2sortable: true,
+    column3sortable: true,
+    column4sortable: true,
+    verticalDivider: false,
+    noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
+  },
+};
+const SortingTemplate = ({ modeVariant, compactDesign, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+    <tds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      enable-responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <tds-table-toolbar table-title="Sorting"></tds-table-toolbar>
+          <tds-table-header>
+              <tds-header-cell column-key='truck' column-title='Truck type' sortable="${column1sortable}" ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='driver' column-title='Driver name' sortable="${column2sortable}" ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='country' column-title='Country' sortable="${column3sortable}" ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='mileage' column-title='Mileage' sortable="${column4sortable}" text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+          </tds-table-header>
+          <tds-table-body>
+          </tds-table-body>
+  </tds-table>
+  
+  
+  <script>
+
+    document.addEventListener('tdsSortChange', (event) => {
+      console.log(event)
+    })
+    /* ONLY WORKS IN THE CANVAS TAB. */
+    tableBody = document.querySelector('tds-table-body');
+    tableBody.bodyData = [
+      {
+        "truck": "L-series",
+        "driver": "Sonya Bruce",
+        "country": "Brazil",
+        "mileage": 123987
+      },
+      {
+        "truck": "P-series",
+        "driver": "Guerra Bowman",
+        "country": "Sweden",
+        "mileage": 2000852
+      },
+      {
+        "truck": "G-series",
+        "driver": "Ferrell Wallace",
+        "country": "Germany",
+        "mileage": 564
+      },
+      {
+        "truck": "R-series",
+        "driver": "Cox Burris",
+        "country": "Spain",
+        "mileage": 1789357
+      },
+      {
+        "truck": "S-series",
+        "driver": "Montgomery Cervantes",
+        "country": "Croatia",
+        "mileage": 65
+      },
+      {
+        "truck": "L-series",
+        "driver": "Sheryl Nielsen",
+        "country": "Greece",
+        "mileage": 365784
+      },
+      {
+        "truck": "G-series",
+        "driver": "Benton Gomez",
+        "country": "France",
+        "mileage": 80957
+      }
+    ]
+  
+  </script>`);
+export const Sorting = SortingTemplate.bind({});

package/dist/collection/components/table/table-footer/table-footer.js

@@ -7,66 +7,69 @@ export class TdsTableFooter {
   constructor() {
     this.previousPage = () => {
       /* Emits pagination event. */
-      const pageChangeEvent = this.tdsPageChange.emit({
+      this.tdsPageChange.emit({
         tableId: this.tableId,
         paginationValue: Number(this.inputElement.value) - 1,
       });
       /** If pages and greater or equal to 2, decrease pagination value.
        * This is to not get under 1 in pagination value.  */
-      if (this.paginationValue >= 2) {
-        this.paginationValue--;
+      if (this.defaultPage >= 2) {
+        this.defaultPage--;
       }
       /* If the change event is not prevented -> do pagination. */
-      if (!pageChangeEvent.defaultPrevented) {
+      if (!this.pages) {
         /* Decrease the pagination until the first page. */
         this.runPagination();
       }
     };
     this.nextPage = () => {
-      /* Emits pagination event. */
-      const pageChangeEvent = this.tdsPageChange.emit({
+      var _a;
+      this.tdsPageChange.emit({
         tableId: this.tableId,
         paginationValue: Number(this.inputElement.value) + 1,
       });
       /** If pages and greater or equal to the amount of pages, increase pagination value.
        * This is to not get above the amount of pages in pagination value.  */
-      if (this.paginationValue <= this.numberOfPages) {
-        this.paginationValue++;
+      if (this.defaultPage <= ((_a = this.pages) !== null && _a !== void 0 ? _a : this.numberOfPages)) {
+        this.defaultPage++;
       }
       /* If the change event is not prevented -> do pagination. */
-      if (!pageChangeEvent.defaultPrevented) {
+      if (!this.pages) {
         /* Increase the pagination until the last page. */
         this.runPagination();
       }
     };
     this.runPagination = () => {
-      // grab all rows in body
-      const dataRowsPagination = this.host.parentNode
-        .querySelector('tds-table-body')
-        .querySelectorAll('.tds-table__row');
-      dataRowsPagination.forEach((item, i) => {
-        // for making logic easier 1st result, 2nd result...
-        const index = i + 1;
-        if (this.tempPaginationDisable) {
-          this.paginationValue = 1;
-        }
-        else {
-          const lastResult = this.rowsPerPage * this.paginationValue;
-          const firstResult = lastResult - this.rowsPerPage;
-          if (index > firstResult && index <= lastResult) {
-            item.classList.remove('tds-table__row--hidden');
+      /** Check the rows per page is used - if so, we need to do all the pagination. */
+      if (this.rowsPerPage) {
+        // grab all rows in body
+        const dataRowsPagination = this.host.parentNode
+          .querySelector('tds-table-body')
+          .querySelectorAll('.tds-table__row');
+        dataRowsPagination.forEach((item, i) => {
+          // for making logic easier 1st result, 2nd result...
+          const index = i + 1;
+          if (this.tempPaginationDisable) {
+            this.defaultPage = 1;
           }
           else {
-            item.classList.add('tds-table__row--hidden');
+            const lastResult = this.rowsPerPage * this.defaultPage;
+            const firstResult = lastResult - this.rowsPerPage;
+            if (index > firstResult && index <= lastResult) {
+              item.classList.remove('tds-table__row--hidden');
+            }
+            else {
+              item.classList.add('tds-table__row--hidden');
+            }
           }
-        }
-      });
+        });
+      }
     };
     this.pagination = false;
-    this.rowsPerPage = 5;
-    this.paginationValue = 1;
-    this.maxPages = undefined;
-    this.clientSetColumnsNumber = null;
+    this.defaultPage = 1;
+    this.pages = null;
+    this.rowsPerPage = undefined;
+    this.cols = null;
     this.columnsNumber = 0;
     this.numberOfPages = 0;
     this.tempPaginationDisable = false;
@@ -93,11 +96,15 @@ export class TdsTableFooter {
     relevantTableProps.forEach((tablePropName) => {
       this[tablePropName] = this.tableEl[tablePropName];
     });
-    const numberOfRows = this.host.parentElement.querySelector('tds-table-body').childElementCount;
+    if (this.rowsPerPage) {
+      /* Number of children which are <tds-table-body-row> */
+      const numberOfRows = Array.from(this.host.parentElement.querySelector('tds-table-body').children).filter((element) => element.tagName === 'TDS-TABLE-BODY-ROW').length;
+      this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
+    }
+    /** Get the number of columns. */
     const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
-    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
-    if (this.clientSetColumnsNumber !== null) {
-      this.columnsNumber = this.clientSetColumnsNumber;
+    if (this.cols) {
+      this.columnsNumber = this.cols;
     }
     else {
       this.columnsNumber = numberOfColumns;
@@ -107,10 +114,10 @@ export class TdsTableFooter {
     const insertedValue = event.target.value;
     if (insertedValue > this.numberOfPages || insertedValue < 1) {
       event.target.classList.add('tds-table__page-selector-input--shake');
-      this.paginationValue = event.target.max;
+      this.defaultPage = event.target.max;
     }
     else {
-      this.paginationValue = event.target.value;
+      this.defaultPage = event.target.value;
     }
     const paginationEvent = this.tdsPageChange.emit({
       tableId: this.tableId,
@@ -126,8 +133,9 @@ export class TdsTableFooter {
     }
   }
   render() {
-    var _a;
-    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { class: "tds-table__footer-row" }, h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { class: "tds-table__pagination" }, h("div", { class: "tds-table__row-selector" }), h("div", { class: "tds-table__page-selector" }, h("input", { ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: (_a = this.maxPages) !== null && _a !== void 0 ? _a : this.numberOfPages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), h("p", { class: "tds-table__footer-text" }, "of ", h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: () => this.previousPage() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: () => this.nextPage() }, h("tds-icon", { name: "chevron_right", size: "20px" })))))))));
+    var _a, _b, _c;
+    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { class: "tds-table__footer-row" }, h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { class: "tds-table__pagination" }, h("div", { class: "tds-table__row-selector" }), h("div", { class: "tds-table__page-selector" }, h("input", { ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: (_a = this.pages) !== null && _a !== void 0 ? _a : this.numberOfPages, value: this.defaultPage, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), h("p", { class: "tds-table__footer-text" }, "of", ' ', h("span", null, this.tempPaginationDisable ? 1 : (_b = this.pages) !== null && _b !== void 0 ? _b : this.numberOfPages), ' ', "pages"), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.defaultPage <= 1 || this.tempPaginationDisable, onClick: () => this.previousPage() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.defaultPage >= ((_c = this.pages) !== null && _c !== void 0 ? _c : this.numberOfPages) ||
+        this.tempPaginationDisable, onClick: () => this.nextPage() }, h("tds-icon", { name: "chevron_right", size: "20px" })))))))));
   }
   static get is() { return "tds-table-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -161,7 +169,7 @@ export class TdsTableFooter {
         "reflect": true,
         "defaultValue": "false"
       },
-      "rowsPerPage": {
+      "defaultPage": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -173,13 +181,13 @@ export class TdsTableFooter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets how many rows to display when pagination is enabled."
+          "text": "Sets the default page number."
         },
-        "attribute": "rows-per-page",
+        "attribute": "default-page",
         "reflect": true,
-        "defaultValue": "5"
+        "defaultValue": "1"
       },
-      "paginationValue": {
+      "pages": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -191,13 +199,13 @@ export class TdsTableFooter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the pagination number."
+          "text": "Sets the number of pages."
         },
-        "attribute": "pagination-value",
+        "attribute": "pages",
         "reflect": true,
-        "defaultValue": "1"
+        "defaultValue": "null"
       },
-      "maxPages": {
+      "rowsPerPage": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -208,13 +216,16 @@ export class TdsTableFooter {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "Prop for a client to set max number of pages."
+          "tags": [{
+              "name": "deprecated",
+              "text": "Used to set rows per page, this also enabled automatic pagination of the table."
+            }],
+          "text": ""
         },
-        "attribute": "max-pages",
+        "attribute": "rows-per-page",
         "reflect": true
       },
-      "clientSetColumnsNumber": {
+      "cols": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -226,9 +237,9 @@ export class TdsTableFooter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too"
+          "text": "<b>Client override</b> Used to set the number of columns, use as fallback if the automatic count of columns fail."
         },
-        "attribute": "client-set-columns-number",
+        "attribute": "cols",
         "reflect": false,
         "defaultValue": "null"
       }