@operato/data-grist 2.0.0-alpha.7 → 2.0.0-alpha.80

package/docs/default-value/default-value.md

@@ -46,7 +46,7 @@ const gristConfig = {
       defaultValue: {
         name: 'getRelativeDate',
         params: [{
-          relativeDate: -1 // yesterday
+          relativeDays: -1 // yesterday
         }]
       }
     }

package/docs/default-value/value-generator/date-generator.md

@@ -12,7 +12,7 @@ function getRelativeDate(params: RelativeDateParams = {}): Date | number | strin
 
 이 함수는 `RelativeDateParams`라는 이름의 타입의 매개변수 객체를 받습니다. 이 객체의 필드에 대한 상세한 정보는 다음과 같습니다:
 
-- `relativeDate?: number`: 상대적인 날짜를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 날짜를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -29,7 +29,7 @@ function getRelativeDate(params: RelativeDateParams = {}): Date | number | strin
 
 ```typescript
 const relativeDate = getRelativeDate({
-  relativeDate: 1,
+  relativeDays: 1,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/docs/default-value/value-generator/month-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeMonthDate(params: RelativeMonthDateParams = {}): string | nu
 
 - `relativeMonths?: number`: 상대적인 월을 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 월 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3개월 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 월을 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -32,7 +32,7 @@ function getRelativeMonthDate(params: RelativeMonthDateParams = {}): string | nu
 ```typescript
 const relativeMonthDate = getRelativeMonthDate({
   relativeMonths: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/docs/default-value/value-generator/week-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeWeekDate(params: RelativeWeekDateParams = {}): string | numb
 
 - `relativeWeeks?: number`: 상대적인 주를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 주 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3주 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 주를 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -32,7 +32,7 @@ function getRelativeWeekDate(params: RelativeWeekDateParams = {}): string | numb
 ```typescript
 const relativeWeekDate = getRelativeWeekDate({
   relativeWeeks: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/docs/default-value/value-generator/year-date-generator.md

@@ -14,7 +14,7 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 
 - `relativeYears?: number`: 상대적인 연도를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 연도 수를 나타냅니다. 예를 들어, 이 값이 3이면 현재 날짜로부터 3년 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 연도를 의미합니다.
 
-- `relativeDates?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
+- `relativeDays?: number`: 상대적인 일수를 나타내는 숫자입니다. 이 값은 현재 날짜로부터의 일 수를 나타냅니다. 예를 들어, 이 값이 2이면 현재 날짜로부터 2일 뒤를 나타냅니다. 이 값이 주어지지 않으면 기본값은 0입니다, 즉 현재 날짜를 의미합니다.
 
 - `timeZone?: string`: 날짜를 얻고자 하는 시간대를 나타내는 문자열입니다. 이 값이 주어지지 않으면 사용자의 로컬 시간대가 사용됩니다.
 
@@ -32,7 +32,7 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 ```typescript
 const relativeYearDate = getRelativeYearDate({
   relativeYears: 2,
-  relativeDates: 3,
+  relativeDays: 3,
   timeZone: 'Asia/Seoul',
   format: 'date'
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.80",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -55,35 +55,36 @@
     "storybook:build": "tsc && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-icon": "^0.27.0",
-    "@operato/headroom": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.4",
-    "@operato/popup": "^2.0.0-alpha.4",
-    "@operato/pull-to-refresh": "^2.0.0-alpha.0",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.0",
+    "@material/web": "^1.4.0",
+    "@operato/headroom": "^2.0.0-alpha.57",
+    "@operato/input": "^2.0.0-alpha.80",
+    "@operato/popup": "^2.0.0-alpha.80",
+    "@operato/pull-to-refresh": "^2.0.0-alpha.57",
+    "@operato/styles": "^2.0.0-alpha.80",
+    "@operato/time-calculator": "^2.0.0-alpha.57",
+    "@operato/utils": "^2.0.0-alpha.68",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@types/lodash-es": "^4.17.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -100,5 +101,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "2507b451915b745adb249bf59eef586d7683531a"
+  "gitHead": "9405ad5252a157db9c9680256a6cb65f764a890b"
 }

package/src/accumulator/accumulator.ts

@@ -6,7 +6,7 @@ function sum(data: GristData, column: ColumnConfig): number {
   return data.records
     .filter(record => !Number.isNaN(record[name]))
     .reduce((sum, record) => {
-      return sum + Number(record[name])
+      return sum + Number(record[name] || 0)
     }, 0)
 }
 
@@ -16,7 +16,7 @@ function avg(data: GristData, column: ColumnConfig): number {
 
   return (
     effectiveRecords.reduce((sum, record) => {
-      return sum + Number(record[name])
+      return sum + Number(record[name] || 0)
     }, 0) / effectiveRecords.length
   )
 }
@@ -30,7 +30,7 @@ function min(data: GristData, column: ColumnConfig): number {
 
   return Math.min.apply(
     null,
-    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name]))
+    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name] || 0))
   )
 }
 
@@ -39,7 +39,7 @@ function max(data: GristData, column: ColumnConfig): number {
 
   return Math.max.apply(
     null,
-    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name]))
+    data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name] || 0))
   )
 }
 

package/src/configure/rows-option-builder.ts

@@ -3,7 +3,16 @@ import { RowsConfig } from '../types'
 import { getGristEventHandler } from '../handlers'
 
 export const buildRowsOptions = (rows: any): RowsConfig => {
-  var { appendable = true, insertable = false, selectable, groups = [], totals = [], classifier, accumulator } = rows
+  var {
+    appendable = true,
+    editable = true,
+    insertable = false,
+    selectable,
+    groups = [],
+    totals = [],
+    classifier,
+    accumulator
+  } = rows
 
   /* handler */
   var { click, dblclick, focus } = rows.handlers || {}
@@ -14,6 +23,7 @@ export const buildRowsOptions = (rows: any): RowsConfig => {
   return {
     accumulator,
     appendable,
+    editable,
     insertable,
     selectable,
     groups,

package/src/configure/zero-config.ts

@@ -45,6 +45,7 @@ export const ZERO_COLUMN: ColumnConfig = {
 export const ZERO_ROWS: RowsConfig = {
   appendable: false,
   insertable: false,
+  editable: false,
   groups: ZERO_GROUPS,
   totals: ZERO_TOTALS,
   classifier: ZERO_CLASSIFIER,

package/src/data-card/data-card-gutter-menu.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './data-card-gutter.js'
 
 import { css, html, LitElement } from 'lit'
@@ -19,7 +19,7 @@ class DataCardGutterMenu extends LitElement {
       padding: 4px;
     }
 
-    mwc-icon {
+    md-icon {
       flex: 1;
       margin: 0;
       margin-bottom: 1px;
@@ -29,7 +29,7 @@ class DataCardGutterMenu extends LitElement {
       font-size: var(--grid-record-fontsize);
     }
 
-    mwc-icon:hover {
+    md-icon:hover {
       cursor: pointer;
       color: var(--grid-record-color-hover);
     }
@@ -41,11 +41,11 @@ class DataCardGutterMenu extends LitElement {
   @property() clickHandler!: EventListener
   @property() dblclickHandler!: EventListener
 
-  @query('mwc-icon') icon!: Element
+  @query('md-icon') icon!: Element
 
   render() {
     return html`
-      <mwc-icon @click=${(e: Event) => this.open(e)}>more_horiz</mwc-icon>
+      <md-icon @click=${(e: Event) => this.open(e)}>more_horiz</md-icon>
       <slot></slot>
     `
   }

package/src/data-card/data-card.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../empty-note'
 import './record-card'
 
@@ -42,7 +42,7 @@ export class DataCard extends DataManipulator {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         top: var(--data-card-fab-position-vertical);
         right: var(--data-card-fab-position-horizontal);
@@ -142,7 +142,7 @@ export class DataCard extends DataManipulator {
       ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       ${this.isTop
         ? html``
-        : html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
+        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
     `
   }
 

package/src/data-card/event-handlers/record-card-click-handler.ts

@@ -29,6 +29,6 @@ export function recordCardClickHandler(this: RecordCard, e: MouseEvent): void {
     rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target)
   } else {
     /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */
-    this.popupRecordView()
+    this.config.rows.editable && this.popupRecordView()
   }
 }

package/src/data-card/record-card.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './data-card-field'
 import '../record-view'
 import './data-card-gutter'
@@ -183,7 +183,7 @@ export class RecordCard extends LitElement {
     }
 
     return html`
-      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}
+      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}
       ${thumbnailColumn
         ? html` <ox-card-field
             thumbnail
@@ -216,46 +216,44 @@ export class RecordCard extends LitElement {
                 ></ox-card-gutter>
               `
             : gutters.length > 2
-            ? html`
-                <ox-card-gutter-menu
-                  .gutters=${gutters}
-                  .rowIndex=${rowIndex}
-                  .record=${record}
-                  .clickHandler=${this.clickHandler}
-                  .dblclickHandler=${this.dblclickHandler}
-                ></ox-card-gutter-menu>
-              `
-            : html``}
+              ? html`
+                  <ox-card-gutter-menu
+                    .gutters=${gutters}
+                    .rowIndex=${rowIndex}
+                    .record=${record}
+                    .clickHandler=${this.clickHandler}
+                    .dblclickHandler=${this.dblclickHandler}
+                  ></ox-card-gutter-menu>
+                `
+              : html``}
         </div>
 
         <div brief>
           ${briefFields.map(
-            (column, idx) =>
-              html`
-                <ox-card-field
-                  .rowIndex=${rowIndex}
-                  .column=${column}
-                  .record=${record}
-                  .value=${record[column?.name || '']}
-                  ?name=${idx == 0}
-                  ?desc=${idx == 1}
-                ></ox-card-field>
-              `
+            (column, idx) => html`
+              <ox-card-field
+                .rowIndex=${rowIndex}
+                .column=${column}
+                .record=${record}
+                .value=${record[column?.name || '']}
+                ?name=${idx == 0}
+                ?desc=${idx == 1}
+              ></ox-card-field>
+            `
           )}
         </div>
         ${detailFields.length > 0
           ? html`
               <div detail>
                 ${detailFields.map(
-                  (column, idx) =>
-                    html`
-                      <ox-card-field
-                        .rowIndex=${rowIndex}
-                        .column=${column}
-                        .record=${record}
-                        .value=${record[column?.name || '']}
-                      ></ox-card-field>
-                    `
+                  (column, idx) => html`
+                    <ox-card-field
+                      .rowIndex=${rowIndex}
+                      .column=${column}
+                      .record=${record}
+                      .value=${record[column?.name || '']}
+                    ></ox-card-field>
+                  `
                 )}
               </div>
             `

package/src/data-grid/data-grid-accum-field.ts

@@ -47,6 +47,10 @@ export class DataGridAccumField extends LitElement {
         flex: none;
         margin: 0 auto;
       }
+
+      md-icon {
+        font-size: 1.5em;
+      }
     `
   ]
 
@@ -62,7 +66,7 @@ export class DataGridAccumField extends LitElement {
 
   render(): TemplateResult {
     if (!this.column || !this.column.accumulator) {
-      return this.columnIndex == 0 ? html`<mwc-icon>functions</mwc-icon>` : html`${nothing}`
+      return this.columnIndex == 0 ? html`<md-icon>functions</md-icon>` : html`${nothing}`
     }
 
     var { value, column, record, rowIndex } = this
@@ -70,11 +74,12 @@ export class DataGridAccumField extends LitElement {
 
     // tag가 true이면 value 앞에 (sum) 같은 태그 생성
     var { accumulator } = column
+    let tag = ''
     if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && accumulator?.tag) {
-      value = `(${i18next.t(`label.accumulator_${accumulator.type}`)}) ${value}`
+      tag = `(${i18next.t(`label.accumulator_${accumulator.type}`)})`
     }
 
-    return html`${renderer?.call(this, value, column, record, rowIndex, this)}`
+    return html`${tag}&nbsp;${renderer?.call(this, value, column, record, rowIndex, this)}`
   }
 
   updated(changes: PropertyValues<this>) {

package/src/data-grid/data-grid-body.ts

@@ -100,7 +100,7 @@ export class DataGridBody extends LitElement {
   @property({ type: Array }) columns: ColumnConfig[] = []
   @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: Object }) focused: { row: number; column: number } = ZERO_FOCUS
-  @property({ type: Object }) editTarget: { row: number; column: number; valueWithEdit: string | null } | null = null
+  @property({ type: Object }) editTarget: { row: number; column: number; valueWith: string | null } | null = null
   @property({ type: Number }) from = -1
   @property({ type: Number }) to = -1
   @property({ type: Array }) fixedLefts: number[] = []
@@ -135,7 +135,7 @@ export class DataGridBody extends LitElement {
   render() {
     // block이 선택되어 있으면, focused row/column은 표현하지 않는다.
     var { row: focusedRow, column: focusedColumn } = (!this._selectBlock && this.focused) || {}
-    var { row: editingRow, column: editingColumn, valueWithEdit = null } = this.editTarget || {}
+    var { row: editingRow, column: editingColumn, valueWith = null } = this.editTarget || {}
 
     var columns = this.columns.filter(column => !column.hidden)
     var data = this.data
@@ -182,7 +182,7 @@ export class DataGridBody extends LitElement {
                 ?selected-row=${attrSelected}
                 ?focused=${idxRow === focusedRow && idxColumn === focusedColumn}
                 ?editing=${idxRow === editingRow && idxColumn === editingColumn}
-                .valueWithEdit=${valueWithEdit}
+                .valueWith=${valueWith}
                 .value=${record[column.name]}
                 ?dirty=${!!dirtyFields[column.name]}
                 fixed=${ifDefined(this.fixedLefts[idxColumn])}
@@ -400,7 +400,7 @@ export class DataGridBody extends LitElement {
     }
   }
 
-  startEditTarget(row: number, column: number, valueWithEdit: string | null = null) {
+  startEditTarget(row: number, column: number, valueWith: string | null = null) {
     var { editable } = this.columns.filter(column => !column.hidden)[column].record
     if (typeof editable === 'function') {
       const curRow = this.data.records[row] || {}
@@ -419,7 +419,7 @@ export class DataGridBody extends LitElement {
     this.editTarget = {
       row,
       column,
-      valueWithEdit
+      valueWith
     }
   }
 
@@ -647,14 +647,19 @@ export class DataGridBody extends LitElement {
 
             switch (type) {
               case 'object':
+              case 'parameters':
                 try {
                   value = JSON.parse(value || 'null')
                 } catch (err) {}
                 break
               case 'boolean':
+              case 'checkbox':
                 value = !!value && !!String(value).match(/true/i)
                 break
               case 'number':
+              case 'float':
+              case 'integer':
+              case 'progress':
                 value = parseToNumberOrNull(value)
                 break
               default:

package/src/data-grid/data-grid-field.ts

@@ -87,7 +87,7 @@ export class DataGridField extends LitElement {
   @property({ type: Number }) columnIndex = 0
   @property({ type: Boolean }) editing = false
   @property({ type: Object }) value = {}
-  @property({ type: String }) valueWithEdit: string | null = null
+  @property({ type: String }) valueWith: string | null = null
   @property({ attribute: false }) emphasized: any = false
   @property({ type: String }) fixed?: string
   @property({ type: String }) type?: string

package/src/data-grid/data-grid-footer.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -14,17 +14,18 @@ export class DataGridFooter extends LitElement {
       :host {
         display: flex;
         flex-direction: row;
+        gap: 4px;
         overflow: hidden;
 
         padding: var(--grid-footer-padding);
         background-color: var(--grid-footer-background-color);
         font-size: var(--grid-footer-font-size);
+        align-items: center;
       }
 
       :host * {
         white-space: nowrap;
         overflow: hidden;
-        padding: 0 2px;
 
         text-overflow: ellipsis;
         text-align: center;
@@ -35,11 +36,18 @@ export class DataGridFooter extends LitElement {
         flex: 1;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 1.5em;
         vertical-align: middle;
       }
 
+      .limit {
+        display: flex;
+        flex-direction: row;
+        gap: 6px;
+        align-items: center;
+      }
+
       .limit a {
         color: var(--grid-footer-limit-color);
       }
@@ -82,20 +90,19 @@ export class DataGridFooter extends LitElement {
     var totalPage = Math.max(1, Math.ceil(total / limit))
 
     return html`
-      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><mwc-icon>skip_previous</mwc-icon></a>
-      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><mwc-icon>navigate_before</mwc-icon></a>
+      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><md-icon>skip_previous</md-icon></a>
+      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><md-icon>navigate_before</md-icon></a>
       <span>page <strong>${page}</strong>&nbsp;/&nbsp;${totalPage}</span>
-      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><mwc-icon>navigate_next</mwc-icon></a>
-      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><mwc-icon>skip_next</mwc-icon></a>
+      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><md-icon>navigate_next</md-icon></a>
+      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><md-icon>skip_next</md-icon></a>
 
       <span class="filler"></span>
 
       <span class="limit">
         ${pages.map(
-          size =>
-            html`
-              <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${stringifyBigNumber(size)}</a>
-            `
+          size => html`
+            <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${stringifyBigNumber(size)}</a>
+          `
         )}
         records
       </span>