@digital-realty/ix-grid 1.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ix-grid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# \<ix-grid>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-grid
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-grid/ix-grid.js';
+</script>
+
+<ix-grid></ix-grid>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/columns.js

@@ -0,0 +1,65 @@
+import { html } from 'lit';
+
+const contactIcon = (status) => {
+  const statusMap = {
+    active: ['check_circle', 'Active'],
+    invited: ['mail', 'Invited'],
+    declined: ['do_not_disturb_on', 'Declined'],
+    suspended: ['warning', 'Suspended'],
+    removed: ['delete', 'Removed'],
+  };
+
+  const [icon, title] = statusMap[status] || [null, null];
+
+  if (icon && title) {
+    return html`<span class="${icon} material-icons" title="${title}"
+      >${icon}</span
+    >`;
+  }
+  return null;
+};
+
+export const columns = [
+  {
+    name: 'firstName',
+    header: 'First name',
+    bodyRenderer: (row) => html` <span>${row.firstName}</span>`,
+    sortable: true,
+    filterable: true,
+    hidden: false
+  },
+  {
+    name: 'lastName',
+    header: 'Last name',
+    bodyRenderer: (row) => html` <span>${row.lastName}</span>`,
+    sortable: true,
+    filterable: true,
+  },
+  {
+    name: 'email',
+    header: 'Email',
+    bodyRenderer: (row) => html` <span>${row.email}</span>`,
+    sortable: true,
+    filterable: true,
+  },
+  {
+    name: 'phone',
+    header: 'Phone',
+    bodyRenderer: (row) => html` <span>${row.phone}</span>`,
+    sortable: true,
+  },
+  {
+    name: 'accounts',
+    header: 'Account',
+    width: '40%',
+    bodyRenderer: (row) => html` <div class="accounts">
+      ${row.accounts.map(
+        (account) =>
+          html` ${contactIcon(account.status.toLowerCase())}<span
+              class="account-name"
+              >${account.name}</span
+            >`
+      )}
+    </div>`,
+  }
+]

package/demo/contacts.js

@@ -0,0 +1,292 @@
+export const contacts = [
+  {
+    "id": "user-id-001",
+    "firstName": "John",
+    "lastName": "Doe",
+    "email": "john.doe@google.com",
+    "phone": "+44892418222",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "INVITED"
+      },
+      {
+        "id": "amazon-us-003",
+        "name": "Amazon US",
+        "status": "INACTIVE"
+      },
+      {
+        "id": "meta-emea-004",
+        "name": "Meta EMEA",
+        "status": "REMOVED"
+      }
+    ]
+  },
+  {
+    "id": "user-id-002",
+    "firstName": "John",
+    "lastName": "Smith",
+    "email": "john@smith.com",
+    "phone": "+447777777777",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-003",
+    "firstName": "Jane",
+    "lastName": "Smith",
+    "email": "jane.s@yahoo.com",
+    "phone": "+44867384383",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-004",
+    "firstName": "Michael",
+    "lastName": "Crout",
+    "email": "m.crout@gmail.com",
+    "phone": "+44852741827",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-005",
+    "firstName": "Brian S.",
+    "lastName": "Tropey",
+    "email": "briantropey@outlook.com",
+    "phone": "+44827463923",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-006",
+    "firstName": "Mary",
+    "lastName": "Stewart",
+    "email": "mary.stewart@gmail.com",
+    "phone": "+44837438442",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-007",
+    "firstName": "Josephina",
+    "lastName": "Miller",
+    "email": "josephinarmiller@gmail.com",
+    "phone": "+44837537812",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-008",
+    "firstName": "James",
+    "lastName": "Holmes",
+    "email": "j.holmes@yahoo.com",
+    "phone": "+44853573958",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  }, 
+  {
+    "id": "user-id-009",
+    "firstName": "Robert",
+    "lastName": "Collins",
+    "email": "rob.collins@gmail.com",
+    "phone": "+44384284278",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-010",
+    "firstName": "Darlene",
+    "lastName": "Lucas",
+    "email": "darlene.lucas@outlook.com",
+    "phone": "+44924284287",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-011",
+    "firstName": "Dorothy",
+    "lastName": "Villagomez",
+    "email": "dorothyvillagomez@outlook.com",
+    "phone": "+44981241282",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-012",
+    "firstName": "Richard",
+    "lastName": "Jackson",
+    "email": "ricky.jackson@gmail.com",
+    "phone": "+44772489128",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-013",
+    "firstName": "Janet",
+    "lastName": "Lewis",
+    "email": "j.lewis@gmail.com",
+    "phone": "+44218519222",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  },
+  {
+    "id": "user-id-014",
+    "firstName": "James",
+    "lastName": "Smoky",
+    "email": "Smoky@smith.com",
+    "phone": "+443333333333",
+    "status": "Active",
+    "accounts": [
+      {
+        "id": "microsoft-us-001",
+        "name": "Microsoft US",
+        "status": "ACTIVE"
+      },
+      {
+        "id": "google-ca-002",
+        "name": "Google Canada",
+        "status": "ACTIVE"
+      }
+    ]
+  }
+]

package/demo/index.html

@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo"></div>
+
+  <script type="module">
+    import { html, render } from 'lit';
+    import '@digital-realty/theme';
+    import '../dist/ix-grid.js';
+    import { contacts } from './contacts.js';
+    import { columns } from './columns.js';
+
+    let pageData;
+    let pageNumber = 1;
+    const pageSize = 10;
+    let rowsLength = contacts.length;
+
+    const getPageData = (start, end, col, dir, filters = {}) => {
+      let thisPage = [...contacts];
+      // apply filters
+      Object.entries(filters).forEach(([filterName, filterVal])=>{
+        thisPage = thisPage.filter(row=>row[filterName].toLowerCase().includes(filterVal.toLowerCase()));
+      });
+      // sort
+      if(col !== '' && dir === 'asc'){
+        thisPage.sort(
+          (a,b) => a[col] > b[col] ? 1 : -1
+        )
+      } else if(col !== '' && dir === 'desc'){
+        thisPage.sort(
+          (a,b) => a[col] > b[col] ? -1 : 1 
+        )
+      } 
+      if(thisPage.length < contacts.length) {
+        rowsLength = thisPage.length;
+      } else {
+        rowsLength = contacts.length;
+      }
+      pageData = thisPage.slice(start,end);
+    }
+
+    const handleChange = (e) => {
+      // eslint-disable-next-line
+      const { columnName, page, pageSize, sortOrder, filters } = e.detail;
+      pageNumber = page;
+      const start = (page - 1) * pageSize;
+      const end = start + pageSize;
+      getPageData(start, end, columnName, sortOrder, filters);
+      // eslint-disable-next-line
+      refresh();
+    }
+
+    /*
+ localStorageID
+   @property({ type: String }) sortedColumn = '';
+
+  @property({ type: String }) sortDirection = '';
+    */
+
+    const refresh = () => render(
+      html`
+        <div data-theme="ix-theme" class="container">
+          <ix-grid 
+            .columns=${columns}
+            .rows=${pageData}
+            .recordCount=${rowsLength}
+            .page=${pageNumber}
+            .pageSize=${pageSize}
+            @change=${handleChange}
+          ></ix-grid>
+        </div>
+      `,
+      document.querySelector('#demo')
+    );
+
+    getPageData(0,9,'firstName','asc');
+    refresh();
+  </script>
+</body>
+</html>

package/dist/IxGrid.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import '@vaadin/grid';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './components/IxPagination.js';
+import './components/IxGridColumnFilter.js';
+import './components/IxGridRowFilter.js';
+export interface Row {
+    [key: string]: string;
+}
+export interface Column {
+    name: string;
+    header: string;
+    bodyRenderer: (row: Row) => any;
+    width?: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    hidden?: boolean;
+    frozenToEnd?: boolean;
+}
+export declare class IxGrid extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    columns: Column[];
+    rows: Row[];
+    defaultEmptyText: string;
+    sortedColumn: string;
+    sortDirection: string;
+    hideHeader: boolean;
+    rowLimit: number;
+    page: number;
+    pageSize: number;
+    pageSizes: number[];
+    recordCount: number;
+    localStorageID: string | undefined;
+    private filters;
+    isLoading: boolean;
+    isExpanded: boolean;
+    get columnNames(): string[];
+    private updatePage;
+    handleSort(column?: string): void;
+    private renderColumnHeader;
+    private renderHeader;
+    private renderRowLimitControls;
+    private renderPaginationControls;
+    render(): import("lit").TemplateResult<1>;
+}