@midas-ds/table-styles 1.1.8 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.2.0 (2026-01-13)
+
+### 🚀 Features
+
+- **table-styles:** add pagination component ([#978](https://github.com/migrationsverket/midas/pull/978))
+
+### 🧱 Updated Dependencies
+
+- Updated components to 16.3.1
+
+## 1.1.9 (2026-01-09)
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.9.3
+
 ## 1.1.8 (2026-01-09)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -1,6 +1,62 @@
-# Table-styles
+# @midas-ds/table-styles
 
-CSS for styling headless libs with `@midas-ds` styles.
+React components and styles for TanStack Table with Midas design system.
 
+## Installation
 
+```bash
+npm install @midas-ds/table-styles @tanstack/react-table
+```
 
+## Usage
+
+### Import the component and styles
+
+```typescript
+import { Pagination } from '@midas-ds/table-styles'
+import '@midas-ds/table-styles/tanstack-table.css'
+```
+
+### Basic example with TanStack Table
+
+```typescript
+import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'
+import { Pagination } from '@midas-ds/table-styles'
+import '@midas-ds/table-styles/tanstack-table.css'
+
+function MyTable() {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  const { pagination: { pageIndex, pageSize } } = table.getState()
+
+  return (
+    <>
+      <table className="midas-tanstack-table">
+        {/* Your table markup */}
+      </table>
+
+      <Pagination
+        getCanNextPage={table.getCanNextPage}
+        getCanPreviousPage={table.getCanPreviousPage}
+        getPageCount={table.getPageCount}
+        getRowCount={table.getRowCount}
+        nextPage={table.nextPage}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        previousPage={table.previousPage}
+        setPageIndex={table.setPageIndex}
+        setPageSize={table.setPageSize}
+      />
+    </>
+  )
+}
+```
+
+## Documentation
+
+For complete documentation and examples, visit [Midas Design System](https://designsystem.migrationsverket.se/)

package/index.css

@@ -0,0 +1 @@
+._pagination_4gcns_1{align-items:center;background-color:var(--midas-layer-01-base);color:var(--midas-text-primary);container-type:inline-size;display:flex;font-size:var(--midas-typography-font-size-20);height:var(--midas-size-150);justify-content:space-between;line-height:var(--midas-typography-line-height-30)}._pagination_4gcns_1 *{font-size:var(--midas-typography-font-size-20)}._separator_4gcns_17{border-left:1px solid var(--midas-border-color-subtle)}._select_4gcns_21{flex-direction:row;gap:var(--midas-spacing-10)}._select_4gcns_21 label{align-items:center;display:flex;font-weight:var(--midas-typography-weight-regular);margin:0}._select_4gcns_21 button{border:none}._select_4gcns_21 button span{max-width:unset!important}._listBoxItem_4gcns_41{padding:.44rem var(--midas-spacing-50) .44rem var(--midas-spacing-50);font-size:var(--midas-typography-font-size-20);line-height:var(--midas-typography-line-height-20);height:var(--midas-size-120);white-space:nowrap}._listBoxItem_4gcns_41[data-selected] div{max-width:unset!important}._listBoxItem_4gcns_41[data-selected]:before,._listBoxItem_4gcns_41[data-selected]:after{display:none}._pageSize_4gcns_60{padding-left:var(--midas-spacing-50)}._pageSize_4gcns_60 button{padding:0 var(--midas-spacing-50) 0 var(--midas-spacing-30)}._pageSize_4gcns_60 button+span div{left:var(--midas-spacing-30)!important}._result_4gcns_73{align-items:center;display:flex;height:100%;padding:0 var(--midas-spacing-50)}@container (width < 675px){._result_4gcns_73{display:none}}._pageIndexContainer_4gcns_85{align-items:center;display:flex;padding:0 var(--midas-spacing-50) 0 0}._pageIndexContainer_4gcns_85 ._label_4gcns_91{white-space:nowrap}@container (width < 420px){._pageIndexContainer_4gcns_85 ._label_4gcns_91{display:none}}._pageIndex_4gcns_85 button{padding:0 var(--midas-spacing-30) 0 var(--midas-spacing-50)}._buttons_4gcns_108{display:flex;height:100%}

package/index.d.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './lib/pagination';
+export type { PaginationProps } from './lib/pagination';

package/index.mjs

@@ -0,0 +1,146 @@
+import { jsxs as o, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { ChevronLeft as z, ChevronRight as B } from "lucide-react";
+import { useLocalizedStringFormatter as w, Select as b, ListBoxItem as f, Text as P, Button as h } from "@midas-ds/components";
+import { FocusScope as F, useFocusManager as L } from "react-aria";
+import './index.css';const R = { nextPage: "Next page", previousPage: "Previous page", rowsPerPage: "Rows per page:", of: "of", page: "page", pages: "pages", row: "row", rows: "rows", selectPage: "Select page" }, V = { nextPage: "Nästa sida", previousPage: "Föregående sida", rowsPerPage: "Rader per sida:", of: "av", page: "sida", pages: "sidor", row: "rad", rows: "rader", selectPage: "Välj sida" }, I = {
+  en: R,
+  sv: V
+}, y = "_pagination_4gcns_1", j = "_listBoxItem_4gcns_41", k = "_pageSize_4gcns_60 _select_4gcns_21", A = "_result_4gcns_73 _separator_4gcns_17", D = "_pageIndexContainer_4gcns_85 _separator_4gcns_17", M = "_label_4gcns_91", K = "_pageIndex_4gcns_85 _select_4gcns_21", O = "_buttons_4gcns_108", T = "_button_4gcns_108 _separator_4gcns_17", a = {
+  pagination: y,
+  listBoxItem: j,
+  pageSize: k,
+  result: A,
+  pageIndexContainer: D,
+  label: M,
+  pageIndex: K,
+  buttons: O,
+  button: T
+}, q = ({
+  getCanNextPage: r,
+  getCanPreviousPage: p,
+  nextPage: m,
+  previousPage: i
+}) => {
+  const n = L(), g = w(I), c = (_) => {
+    switch (_.key) {
+      case "ArrowRight":
+        n?.focusNext({ wrap: !0 });
+        break;
+      case "ArrowLeft":
+        n?.focusPrevious({ wrap: !0 });
+        break;
+    }
+  };
+  return /* @__PURE__ */ o(C, { children: [
+    /* @__PURE__ */ t(
+      h,
+      {
+        "aria-label": g.format("previousPage"),
+        className: a.button,
+        isDisabled: !p(),
+        onKeyDown: c,
+        onPress: i,
+        variant: "icon",
+        children: /* @__PURE__ */ t(z, {})
+      }
+    ),
+    /* @__PURE__ */ t(
+      h,
+      {
+        "aria-label": g.format("nextPage"),
+        className: a.button,
+        isDisabled: !r(),
+        onKeyDown: c,
+        onPress: m,
+        variant: "icon",
+        children: /* @__PURE__ */ t(B, {})
+      }
+    )
+  ] });
+}, Q = (r) => {
+  const {
+    getPageCount: p,
+    getRowCount: m,
+    pageIndex: i,
+    pageSize: n,
+    pageSizeOptions: g = [10, 20, 30, 40, 50],
+    setPageIndex: c,
+    setPageSize: _
+  } = r, s = w(I), u = p(), l = m(), x = (i + 1) * n, S = x - n + 1, N = (e) => {
+    c(e !== null ? Number(e) : 0);
+  }, v = (e) => {
+    const d = e !== null ? Number(e) : n;
+    _(d);
+  };
+  return /* @__PURE__ */ o("div", { className: a.pagination, children: [
+    /* @__PURE__ */ t(
+      b,
+      {
+        className: a.pageSize,
+        items: g.map((e) => ({
+          id: e.toString(),
+          name: e
+        })),
+        label: s.format("rowsPerPage"),
+        onChange: v,
+        value: n.toString(),
+        children: (e) => /* @__PURE__ */ t(
+          f,
+          {
+            className: a.listBoxItem,
+            id: e.id,
+            textValue: e.id,
+            children: e.name
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ o(P, { className: a.result, children: [
+      S,
+      " -",
+      " ",
+      x > l ? l : x,
+      " ",
+      s.format("of"),
+      " ",
+      l.toLocaleString(),
+      " ",
+      l === 1 ? s.format("row") : s.format("rows")
+    ] }),
+    /* @__PURE__ */ o("div", { className: a.pageIndexContainer, children: [
+      /* @__PURE__ */ t(
+        b,
+        {
+          "aria-label": s.format("selectPage"),
+          className: a.pageIndex,
+          items: Array.from({ length: u }, (e, d) => ({
+            id: d.toString(),
+            name: d
+          })),
+          onChange: N,
+          value: i.toString(),
+          children: (e) => /* @__PURE__ */ t(
+            f,
+            {
+              className: a.listBoxItem,
+              id: e.id,
+              textValue: (Number(e.id) + 1).toString(),
+              children: e.name + 1
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o(P, { className: a.label, children: [
+        s.format("of"),
+        " ",
+        u,
+        " ",
+        u === 1 ? s.format("page") : s.format("pages")
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: a.buttons, children: /* @__PURE__ */ t(F, { children: /* @__PURE__ */ t(q, { ...r }) }) })
+  ] });
+};
+export {
+  Q as Pagination
+};

package/lib/pagination/Pagination.d.ts

@@ -0,0 +1,9 @@
+import { PaginationState, RowData, Table } from '@tanstack/react-table';
+export interface PaginationProps<T extends RowData> extends Pick<Table<T>, 'getCanNextPage' | 'getCanPreviousPage' | 'getPageCount' | 'getRowCount' | 'nextPage' | 'previousPage' | 'setPageIndex' | 'setPageSize'>, PaginationState {
+    /**
+     * Options for different page sizes
+     * @default [10, 20, 30, 40, 50]
+     */
+    pageSizeOptions?: number[];
+}
+export declare const Pagination: <T extends RowData>(props: PaginationProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/package.json

@@ -11,16 +11,30 @@
   "publishConfig": {
     "access": "public"
   },
-  "description": "Midas table styles",
+  "description": "Midas table components and styles for TanStack Table",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "1.1.8",
+  "version": "1.2.0",
+  "main": "./index.mjs",
+  "types": "./index.d.ts",
+  "files": [
+    "./"
+  ],
   "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "default": "./index.mjs"
+    },
     "./tanstack-table.css": {
       "import": "./tanstack-table.css"
     }
   },
   "dependencies": {
-    "@midas-ds/theme": "3.9.2"
+    "@midas-ds/components": "16.3.1",
+    "@midas-ds/theme": "3.9.3",
+    "lucide-react": "^0.525.0",
+    "react-aria-components": "1.14.0",
+    "@tanstack/react-table": "^8.21.3"
   }
 }