- {allColumns.map((col) => (
-
- {col.label}
-
- ))}
-
setTempColumns([])}>Reset
-
toggleHide(tempColumns)}>Confirm
-
) => {
- const data = mockData;
-
- const { tableProps, filters, setFilters, allColumns } = useTable({
- columns: mockColumns,
- });
-
- return (
- <>
-
- {allColumns
- .filter((c) => c.availableFilterOperators?.length)
- .map((c) => (
-
- ))}
-
-
- Selected: {JSON.stringify(filters)}
-
-
-
- );
-};
-
-export const WithActions = (args: Partial) => {
- return (
- alert("Action 1"),
- },
- {
- content: () => "Action 2",
- onClick: () => alert("Action 2"),
- },
- ],
- }}
- {...args}
- />
- );
-};
-
-export const ExpandableState = (args: Partial) => {
- const [expandedRows, setExpandedRows] = useState({});
- const data = mockData;
- const pageSize = 10;
-
- const columns: TableColumn[] = [
- {
- id: "toggle",
- label: "toggle",
- render: (_, { handleExpandRow }) => (
- {`->`}
- ),
- },
- ...mockColumns,
- ];
-
- const { tableProps, currentPage } = useTable({
- pagination: {
- totalCount: 100,
- },
- columns,
- });
-
- const pagedData = data.slice(
- currentPage * pageSize,
- (currentPage + 1) * pageSize
- );
-
- const handleExpandRow = (index: number) => {
- setExpandedRows((prevState) => ({
- ...prevState,
- [index]: !prevState[index],
- }));
- };
-
- return (
- (
-
-
Expanded row
-
{JSON.stringify(rowData)}
-
) => {
- const data = mockData;
- const pageSize = 10;
-
- const columns: TableColumn[] = [
- {
- id: "toggle",
- label: "toggle",
- render: (_, { handleExpandRow }) => (
- {`->`}
- ),
- },
- ...mockColumns,
- ];
-
- const { tableProps, currentPage } = useTable({
- pagination: {
- totalCount: 100,
- },
- expandable: true,
- columns,
- });
-
- const pagedData = data.slice(
- currentPage * pageSize,
- (currentPage + 1) * pageSize
- );
-
- return (
- (
-
-
Expanded row
-
{JSON.stringify(rowData)}
-
) => {
- return (
- alert("Action 1"),
- },
- {
- content: () => "Action 2",
- onClick: () => alert("Action 2"),
- },
- ],
- }}
- noResult="No result"
- {...args}
- />
- );
-};
diff --git a/apps/storybook/src/stories/TableConfigProvider.stories.tsx b/apps/storybook/src/stories/TableConfigProvider.stories.tsx
deleted file mode 100644
index 9f078e0..0000000
--- a/apps/storybook/src/stories/TableConfigProvider.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ITableProps, Table, TableConfigProvider } from "@arkejs/table";
-import mockData from "../mocks/mockData.ts";
-import mockColumns from "../mocks/mockColumns.ts";
-
-export default {
- title: "TableConfigProvider",
- component: TableConfigProvider,
-};
-
-export const Default = (args: Partial) => {
- return (
- {value}
,
- }}
- >
-
-
- );
-};
diff --git a/apps/storybook/src/stories/assets/accessibility.png b/apps/storybook/src/stories/assets/accessibility.png
deleted file mode 100644
index 6ffe6fe..0000000
Binary files a/apps/storybook/src/stories/assets/accessibility.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/accessibility.svg b/apps/storybook/src/stories/assets/accessibility.svg
deleted file mode 100644
index a328883..0000000
--- a/apps/storybook/src/stories/assets/accessibility.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
- Accessibility
-
\ No newline at end of file
diff --git a/apps/storybook/src/stories/assets/addon-library.png b/apps/storybook/src/stories/assets/addon-library.png
deleted file mode 100644
index 95deb38..0000000
Binary files a/apps/storybook/src/stories/assets/addon-library.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/assets.png b/apps/storybook/src/stories/assets/assets.png
deleted file mode 100644
index cfba681..0000000
Binary files a/apps/storybook/src/stories/assets/assets.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/context.png b/apps/storybook/src/stories/assets/context.png
deleted file mode 100644
index e5cd249..0000000
Binary files a/apps/storybook/src/stories/assets/context.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/discord.svg b/apps/storybook/src/stories/assets/discord.svg
deleted file mode 100644
index 1204df9..0000000
--- a/apps/storybook/src/stories/assets/discord.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/apps/storybook/src/stories/assets/docs.png b/apps/storybook/src/stories/assets/docs.png
deleted file mode 100644
index a749629..0000000
Binary files a/apps/storybook/src/stories/assets/docs.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/figma-plugin.png b/apps/storybook/src/stories/assets/figma-plugin.png
deleted file mode 100644
index 8f79b08..0000000
Binary files a/apps/storybook/src/stories/assets/figma-plugin.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/github.svg b/apps/storybook/src/stories/assets/github.svg
deleted file mode 100644
index 158e026..0000000
--- a/apps/storybook/src/stories/assets/github.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/apps/storybook/src/stories/assets/share.png b/apps/storybook/src/stories/assets/share.png
deleted file mode 100644
index 8097a37..0000000
Binary files a/apps/storybook/src/stories/assets/share.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/styling.png b/apps/storybook/src/stories/assets/styling.png
deleted file mode 100644
index d341e82..0000000
Binary files a/apps/storybook/src/stories/assets/styling.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/testing.png b/apps/storybook/src/stories/assets/testing.png
deleted file mode 100644
index d4ac39a..0000000
Binary files a/apps/storybook/src/stories/assets/testing.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/theming.png b/apps/storybook/src/stories/assets/theming.png
deleted file mode 100644
index 1535eb9..0000000
Binary files a/apps/storybook/src/stories/assets/theming.png and /dev/null differ
diff --git a/apps/storybook/src/stories/assets/tutorials.svg b/apps/storybook/src/stories/assets/tutorials.svg
deleted file mode 100644
index 4b2fc7c..0000000
--- a/apps/storybook/src/stories/assets/tutorials.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/apps/storybook/src/stories/assets/youtube.svg b/apps/storybook/src/stories/assets/youtube.svg
deleted file mode 100644
index 33a3a61..0000000
--- a/apps/storybook/src/stories/assets/youtube.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
diff --git a/apps/storybook/src/stories/basic.stories.tsx b/apps/storybook/src/stories/basic.stories.tsx
new file mode 100644
index 0000000..0e7f6e5
--- /dev/null
+++ b/apps/storybook/src/stories/basic.stories.tsx
@@ -0,0 +1,48 @@
+import { useTable } from "@arkejs/table";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/table.tsx";
+import { columns, invoices } from "../mocks/data.tsx";
+
+export default {
+ title: "Basic",
+};
+
+export const Basic = () => {
+ const table = useTable({ columns, data: invoices });
+
+ return (
+
+ A list of your recent invoices.
+
+
+ {table.getAllColumns().map((column) => (
+ {column.id}
+ ))}
+
+
+
+ {table.getRows().map((row) => (
+
+ {row.getAllCells().map((cell) => (
+ {cell.getValue()}
+ ))}
+
+ ))}
+
+
+
+ Total
+ $2,500.00
+
+
+
+ );
+};
diff --git a/apps/storybook/src/stories/column-filtering.stories.tsx b/apps/storybook/src/stories/column-filtering.stories.tsx
new file mode 100644
index 0000000..6b221b9
--- /dev/null
+++ b/apps/storybook/src/stories/column-filtering.stories.tsx
@@ -0,0 +1,75 @@
+import { useTable } from "@arkejs/table";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/table.tsx";
+import { columns, invoices } from "../mocks/data.tsx";
+
+export default {
+ title: "Column Filtering",
+};
+export const ColumnFiltering = () => {
+ const table = useTable({
+ columns,
+ data: invoices,
+ initialState: {
+ columnFilters: {
+ invoice: { test: true },
+ },
+ },
+ });
+
+ const columnFilters = table.getState().columnFilters;
+
+ return (
+ <>
+
+ Active fitlers: {JSON.stringify(columnFilters)}
+
+
+
+ );
+};
diff --git a/apps/storybook/src/stories/column-pinning.stories.tsx b/apps/storybook/src/stories/column-pinning.stories.tsx
new file mode 100644
index 0000000..0a69429
--- /dev/null
+++ b/apps/storybook/src/stories/column-pinning.stories.tsx
@@ -0,0 +1,93 @@
+import { useTable } from "@arkejs/table";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/table.tsx";
+import { columns, invoices } from "../mocks/data.tsx";
+import { cn } from "../lib/cn.ts";
+
+export default {
+ title: "Column Pinning",
+};
+
+export const ColumnPinning = () => {
+ const table = useTable({ columns, data: invoices });
+
+ return (
+ <>
+
+ {table.getAllColumns().map((column) => (
+
+
+ ))}
+
+
+ A list of your recent invoices.
+
+
+ {[
+ ...table.getVisiblePinnedColumns(),
+ ...table.getVisibleUnpinnedColumns(),
+ ].map((column, index) => (
+
+ {column.id}
+
+ ))}
+
+
+
+ {table.getRows().map((row) => (
+
+ {[
+ ...row.getVisiblePinnedCells(),
+ ...row.getVisibleUnpinnedCells(),
+ ].map((cell, index) => {
+ return (
+
+ {cell.getValue()}
+
+ );
+ })}
+
+ ))}
+
+
+
+ Total
+ $2,500.00
+
+
+
+
+ );
+};
diff --git a/apps/storybook/src/stories/column-visibility.stories.tsx b/apps/storybook/src/stories/column-visibility.stories.tsx
new file mode 100644
index 0000000..ee34e0f
--- /dev/null
+++ b/apps/storybook/src/stories/column-visibility.stories.tsx
@@ -0,0 +1,62 @@
+import { useTable } from "@arkejs/table";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/table.tsx";
+import { columns, invoices } from "../mocks/data.tsx";
+
+export default {
+ title: "Column Visibility",
+};
+
+export const ColumnVisibility = () => {
+ const table = useTable({ columns, data: invoices });
+
+ return (
+ <>
+
+ {table.getAllColumns().map((column) => (
+
+
+ ))}
+
+
+ A list of your recent invoices.
+
+
+ {table.getVisibleColumns().map((column) => (
+ {column.id}
+ ))}
+
+
+
+ {table.getRows().map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+ {cell.getValue()}
+ ))}
+
+ ))}
+
+
+
+ Total
+ $2,500.00
+
+
+
+
+ );
+};
diff --git a/apps/storybook/src/stories/custom-cell-render.stories.tsx b/apps/storybook/src/stories/custom-cell-render.stories.tsx
new file mode 100644
index 0000000..a776c93
--- /dev/null
+++ b/apps/storybook/src/stories/custom-cell-render.stories.tsx
@@ -0,0 +1,74 @@
+import { ColumnDef, useTable } from "@arkejs/table";
+import { Invoice, invoices } from "../mocks/data.tsx";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/table.tsx";
+
+export default {
+ title: "Custom Cell Render",
+};
+
+const columns: ColumnDef[] = [
+ {
+ id: "invoice",
+ header: "Invoice",
+ cell: {
+ renderValue: (value) => (
+
+
+ ),
+ },
+ },
+ {
+ id: "paymentStatus",
+ },
+ {
+ id: "paymentMethod",
+ },
+ {
+ id: "totalAmount",
+ },
+];
+
+export const CustomCellRender = () => {
+ const table = useTable({ columns, data: invoices });
+
+ return (
+
+ A list of your recent invoices.
+
+
+ {table.getAllColumns().map((column) => (
+ {column.columnDef.header}
+ ))}
+
+
+
+ {table.getRows().map((row) => (
+
+ {row.getAllCells().map((cell) => (
+
+ {cell.renderValue()}
+
+ ))}
+
+ ))}
+
+
+
+ Total
+ $2,500.00
+
+
+
+ );
+};
diff --git a/apps/storybook/src/stories/pagination.stories.tsx b/apps/storybook/src/stories/pagination.stories.tsx
new file mode 100644
index 0000000..3f75858
--- /dev/null
+++ b/apps/storybook/src/stories/pagination.stories.tsx
@@ -0,0 +1,101 @@
+import { useTable } from "@arkejs/table";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/table.tsx";
+import {
+ Pagination as PaginationComponent,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "../components/pagination.tsx";
+import { columns, invoices } from "../mocks/data.tsx";
+
+export default {
+ title: "Pagination",
+};
+
+export const Pagination = () => {
+ const table = useTable({ columns, data: invoices });
+ const {
+ pagination: { pageIndex },
+ } = table.getState();
+
+ return (
+ <>
+
+
+
+ Invoice
+ Status
+ Method
+ Amount
+
+
+
+ {invoices.map((invoice) => (
+
+ {invoice.invoice}
+ {invoice.paymentStatus}
+ {invoice.paymentMethod}
+
+ {invoice.totalAmount}
+
+
+ ))}
+
+
+
+ Total
+ $2,500.00
+
+
+
+
+
+
+ table.previousPage()} />
+
+
+ table.setPageIndex(0)}
+ isActive={pageIndex === 0}
+ >
+ 1
+
+
+
+ table.setPageIndex(1)}
+ isActive={pageIndex === 1}
+ >
+ 2
+
+
+
+ table.setPageIndex(2)}
+ isActive={pageIndex === 2}
+ >
+ 3
+
+
+
+
+
+ table.nextPage()} />
+
+
+
+
+ );
+};
diff --git a/apps/storybook/src/stories/row-selection.stories.tsx b/apps/storybook/src/stories/row-selection.stories.tsx
new file mode 100644
index 0000000..a959662
--- /dev/null
+++ b/apps/storybook/src/stories/row-selection.stories.tsx
@@ -0,0 +1,81 @@
+import { useTable } from "@arkejs/table";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/table.tsx";
+import { columns, invoices } from "../mocks/data.tsx";
+
+export default {
+ title: "Row Selection",
+};
+export const RowSelection = () => {
+ const table = useTable({
+ columns,
+ data: invoices,
+ getRowId: (row) => row.invoice,
+ });
+
+ return (
+ <>
+
+ Selected rows:{" "}
+ {JSON.stringify(table.getSelectedRows().map((row) => row.id))}
+
+
+
+ );
+};
diff --git a/apps/storybook/src/stories/sorting.stories.tsx b/apps/storybook/src/stories/sorting.stories.tsx
new file mode 100644
index 0000000..6fab620
--- /dev/null
+++ b/apps/storybook/src/stories/sorting.stories.tsx
@@ -0,0 +1,99 @@
+import { ColumnDef, useTable } from "@arkejs/table";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/table.tsx";
+import { Invoice, invoices } from "../mocks/data.tsx";
+import { useState } from "react";
+
+export default {
+ title: "Sorting",
+};
+
+const columns: ColumnDef[] = [
+ {
+ id: "invoice",
+ },
+ {
+ id: "paymentStatus",
+ enableSorting: false,
+ },
+ {
+ id: "paymentMethod",
+ },
+ {
+ id: "totalAmount",
+ },
+];
+
+export const Sorting = () => {
+ const [enableSorting, setEnableSorting] = useState(true);
+
+ const table = useTable({
+ columns,
+ data: invoices,
+ enableSorting,
+ initialState: {
+ sorting: {
+ invoice: "asc",
+ },
+ },
+ });
+
+ return (
+ <>
+
+ Enable Sorting
+
+ {JSON.stringify(table.getState().sorting)}
+
+ A list of your recent invoices.
+
+
+ {table.getVisibleColumns().map((column) => {
+ const sorting = column.getSortingValue();
+ return (
+
+ column.setSort(sorting === "asc" ? "desc" : "asc")
+ }
+ key={column.id}
+ >
+ {column.id}
+ {sorting === "asc" ? "🔼" : sorting === "desc" ? "🔽" : ""}
+
+ );
+ })}
+
+
+
+ {table.getRows().map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+ {cell.getValue()}
+ ))}
+
+ ))}
+
+
+
+ Total
+ $2,500.00
+
+
+
+
+ );
+};
diff --git a/packages/table/README.md b/packages/table/README.md
index e0427a3..54afd8f 100644
--- a/packages/table/README.md
+++ b/packages/table/README.md
@@ -1,6 +1,6 @@
# @arkejs/table
-
+
[](https://github.com/arkemishub/arke-monorepo/blob/master/LICENSE.txt)
@@ -30,7 +30,7 @@ npm i @arkejs/table
The basic implementation allows you to display data without having any sort of control over pagination, filtering and more.
```jsx
-
+
+ return
}
```
-As you can see by using `useTable` we don't need to define props for the `Table` component since they are returned in `tableProps`.
+As you can see by using `useTable` we don't need to define props for the `Types` component since they are returned in `tableProps`.
In addition, the hook provides us some ways to manage the table externally.
Let's now implement a simple pagination, fully controlled by outside.
@@ -71,7 +71,7 @@ function MyTable() {
return (
<>
-
+
{
@@ -93,4 +93,4 @@ function MyTable() {
}
```
-By using `useTable` exported function we ended up with a `Table` which pagination is managed in the way that we like.
+By using `useTable` exported function we ended up with a `Types` which pagination is managed in the way that we like.
diff --git a/packages/table/package.json b/packages/table/package.json
index 08fa35c..4d47b7b 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -1,6 +1,6 @@
{
"name": "@arkejs/table",
- "version": "0.11.1",
+ "version": "1.0.0-beta.4",
"description": "Arke Table component",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
diff --git a/packages/table/src/components/Pagination/Pagination.tsx b/packages/table/src/components/Pagination/Pagination.tsx
deleted file mode 100644
index 49f5d72..0000000
--- a/packages/table/src/components/Pagination/Pagination.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { IPaginationProps } from "./Pagination.types";
-
-function Pagination({
- currentPage,
- onChange,
- pages,
- pageCount,
-}: IPaginationProps) {
- return (
-
- onChange(0)}
- disabled={currentPage === 0}
- >
- «
-
- onChange(currentPage - 1)}
- disabled={0 > currentPage - 1}
- >
- ‹
-
- {pages?.map((page) => (
- onChange(page)}
- >
- {page + 1}
-
- ))}
- = pageCount}
- onClick={() => onChange(currentPage + 1)}
- >
- ›
-
- = pageCount}
- onClick={() => onChange(pageCount - 1)}
- >
- »
-
-
- );
-}
-
-export default Pagination;
diff --git a/packages/table/src/components/Pagination/index.ts b/packages/table/src/components/Pagination/index.ts
deleted file mode 100644
index 411b916..0000000
--- a/packages/table/src/components/Pagination/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export { default as Pagination } from "./Pagination";
-export * from "./Pagination.types";
diff --git a/packages/table/src/components/TableConfigProvider/TableConfigProvider.tsx b/packages/table/src/components/TableConfigProvider/TableConfigProvider.tsx
deleted file mode 100644
index e7ebc09..0000000
--- a/packages/table/src/components/TableConfigProvider/TableConfigProvider.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { createContext, useContext } from "react";
-import {
- TableConfigProviderProps,
- TableConfigValue,
-} from "./TableConfigProvider.types";
-import { TableComponents } from "../../types";
-
-const TableContext = createContext({
- components: {} as TableComponents,
-});
-
-function TableConfigProvider({
- children,
- components,
-}: TableConfigProviderProps) {
- return (
-
- {children}
-
- );
-}
-
-function useTableConfig() {
- return useContext(TableContext) ?? {};
-}
-
-export default TableConfigProvider;
-export { useTableConfig };
diff --git a/packages/table/src/components/TableConfigProvider/TableConfigProvider.types.ts b/packages/table/src/components/TableConfigProvider/TableConfigProvider.types.ts
deleted file mode 100644
index d62a653..0000000
--- a/packages/table/src/components/TableConfigProvider/TableConfigProvider.types.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { PropsWithChildren } from "react";
-import { TableComponents } from "../../types";
-
-type TableConfigProviderProps = PropsWithChildren<{}> & {
- components?: TableComponents;
-};
-
-type TableConfigValue = {
- components: TableComponents;
-};
-
-export { TableConfigProviderProps, TableConfigValue };
diff --git a/packages/table/src/components/TableConfigProvider/index.ts b/packages/table/src/components/TableConfigProvider/index.ts
deleted file mode 100644
index 4a9d7ff..0000000
--- a/packages/table/src/components/TableConfigProvider/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export { default as TableConfigProvider } from "./TableConfigProvider";
-export * from "./TableConfigProvider.types";
diff --git a/packages/table/src/components/TableHeadCell/TableHeadCell.tsx b/packages/table/src/components/TableHeadCell/TableHeadCell.tsx
deleted file mode 100644
index 7ab059d..0000000
--- a/packages/table/src/components/TableHeadCell/TableHeadCell.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { TableColumn, TableComponents } from "../../types";
-import { ISortData } from "../../hooks";
-import { useCallback, useMemo } from "react";
-
-function Icon({ type }: { type: "asc" | "desc" }) {
- return (
-
-
- );
-}
-
-function TableHeadCell({
- className,
- id,
- style,
- label,
- sort,
- sortable,
- setSort,
- sortType,
- renderHeader,
- components,
-}: TableColumn & Partial & { components?: TableComponents }) {
- const isSortingEnabled = sortable && sortType !== "custom";
-
- const columnSort = useMemo(() => {
- if (isSortingEnabled) {
- return sort?.find((s) => s.key === id);
- }
- return undefined;
- }, [sort, isSortingEnabled, id]);
-
- const handleChangeSort = useCallback(() => {
- if (isSortingEnabled) {
- const newSort = sort?.filter((s) => s.key !== id) ?? [];
-
- if (columnSort) {
- if (columnSort.type === "asc") {
- setSort?.([...newSort, { key: id, type: "desc" }]);
- } else {
- setSort?.(newSort);
- }
- } else {
- setSort?.([...newSort, { key: id, type: "asc" }]);
- }
- }
- }, [columnSort, id, setSort, sort, isSortingEnabled]);
-
- const Th = components?.TableHead ?? "th";
-
- return (
-
- {renderHeader?.() ?? label}
- {columnSort &&
- );
-}
-
-export default TableHeadCell;
diff --git a/packages/table/src/components/TableHeadCell/index.ts b/packages/table/src/components/TableHeadCell/index.ts
deleted file mode 100644
index dcc22c1..0000000
--- a/packages/table/src/components/TableHeadCell/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export { default as TableHeadCell } from "./TableHeadCell";
diff --git a/packages/table/src/components/index.ts b/packages/table/src/components/index.ts
deleted file mode 100644
index 5211dd4..0000000
--- a/packages/table/src/components/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from "./Pagination";
-export * from "./TableConfigProvider";
-export * from "./table";
diff --git a/packages/table/src/components/table.tsx b/packages/table/src/components/table.tsx
deleted file mode 100644
index 470497b..0000000
--- a/packages/table/src/components/table.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as React from "react";
-import { Action, ITableProps, TableColumn } from "../types";
-import { useTableConfig } from "./TableConfigProvider/TableConfigProvider";
-import { TableHeadCell } from "./TableHeadCell";
-import { Fragment, ReactNode } from "react";
-import { Pagination } from "./Pagination";
-
-const getPagedIndex = (index: number, currentPage: number, pageSize = 0) =>
- index + pageSize * currentPage;
-
-const TableComponent = React.forwardRef<
- HTMLTableElement,
- { children?: ReactNode }
->((props, ref) => );
-
-TableComponent.displayName = "TableComponent";
-
-const Table = React.forwardRef<
- HTMLTableElement,
- React.HTMLAttributes & ITableProps
->(
- (
- {
- columns,
- data,
- actions,
- pages,
- pageCount,
- pageSize,
- currentPage = 0,
- goToPage,
- paginationType,
- sortable,
- sort,
- setSort,
- sortType,
- noResult = "No Result",
- renderHeader,
- expandedRows,
- onExpandRow,
- ...props
- },
- ref
- ) => {
- const config = useTableConfig();
- const components = React.useMemo(
- () => ({ ...config.components, ...props.components }),
- [config.components, props.components]
- );
-
- const RenderedTable = components?.Table ?? TableComponent;
- const Thead = components?.TableHeader ?? "thead";
- const Tbody = components?.TableBody ?? "tbody";
- const Tr = components?.TableRow ?? "tr";
- const Th = components?.TableHead ?? "th";
- const Td = components?.TableCell ?? "td";
-
- const renderData = React.useCallback(
- (column: TableColumn, row: Record, index: number) => {
- if (column.render) {
- return column.render(row, {
- handleExpandRow: () =>
- onExpandRow?.(getPagedIndex(index, currentPage, pageSize)),
- });
- }
-
- if (column.type && components[column.type]) {
- return components[column.type]?.(row?.[column.id], row, column);
- }
-
- return row?.[column.id] as React.ReactNode;
- },
- [components, onExpandRow, currentPage, pageSize]
- );
-
- const displayedColumnCount = React.useMemo(
- () =>
- actions ? actions.actions.length + columns.length : columns.length,
- [columns.length, actions?.actions.length]
- );
-
- const renderExpanded = React.useCallback(
- (row: Record, index: number) => {
- if (
- !expandedRows?.[getPagedIndex(index, currentPage, pageSize)] ||
- !components.ExpandedRow
- )
- return null;
-
- return (
-
-
- {components.ExpandedRow(row)}
-
-
- );
- },
- [expandedRows, currentPage, pageSize, columns.length, components]
- );
-
- return (
- <>
-
-
-
- {actions && actions?.position !== "end" && (
- {actions.label}
- )}
- {columns.map((col) => (
-
- col?.renderHeader?.() ?? renderHeader?.(col)
- }
- />
- ))}
- {actions && actions?.position === "end" && (
- {actions.label}
- )}
-
-
-
- {data?.length > 0
- ? data.map((row, index) => (
-
-
- {actions && actions.position !== "end" && (
-
- {actions.actions.map((action, index) => (
-
- )}
- {columns.map((col) => (
-
- {renderData(col, row, index)}
-
- ))}
- {actions && actions.position === "end" && (
-
- {actions.actions.map((action, index) => (
-
- )}
-
- {renderExpanded(row, index)}
-
- ))
- : noResult && (
-
- {noResult}
-
- )}
-
-
- {pages && goToPage && paginationType !== "custom" && (
- }) => {
- return (
- onClick?.(data)}>
- {typeof content === "function" ? content(data) : content}
-
- );
-};
-
-Table.displayName = "Table";
-
-export { Table };
diff --git a/packages/table/src/constants/filters.ts b/packages/table/src/constants/filters.ts
deleted file mode 100644
index 66e6c7d..0000000
--- a/packages/table/src/constants/filters.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { FilterOperator } from "../types";
-
-const numericFilters = [
- FilterOperator.EQ,
- FilterOperator.GE,
- FilterOperator.GT,
- FilterOperator.LT,
- FilterOperator.LE,
-];
-
-const filters = {
- string: [
- FilterOperator.ICONTAINS,
- FilterOperator.ISTARTSWITH,
- FilterOperator.IENDSWITH,
- FilterOperator.EQ,
- ],
- boolean: [FilterOperator.EQ],
- integer: numericFilters,
- float: numericFilters,
- date: numericFilters,
- datetime: numericFilters,
- time: numericFilters,
-};
-
-export default filters;
diff --git a/packages/table/src/core/cell.ts b/packages/table/src/core/cell.ts
new file mode 100644
index 0000000..631a379
--- /dev/null
+++ b/packages/table/src/core/cell.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Column, Row, Table, Cell } from "../types";
+
+export type BaseCell = {
+ column: Column;
+ getValue: () => any;
+ renderValue: () => any;
+ id: string;
+ row: Row;
+};
+export function initCell(
+ table: Table,
+ column: Column,
+ row: Row
+) {
+ const getValue = () => (row.data as any)[column.id];
+
+ let cell: Cell = {
+ id: `${row.id}_${column.id}`,
+ row,
+ column,
+ getValue,
+ renderValue: () =>
+ column?.columnDef.cell?.renderValue
+ ? column.columnDef.cell.renderValue(row.data)
+ : getValue(),
+ };
+
+ for (const feature of table.features) {
+ feature.initCell?.(table, cell, column, row);
+ }
+
+ return cell;
+}
diff --git a/packages/table/src/core/column.ts b/packages/table/src/core/column.ts
new file mode 100644
index 0000000..811fb8e
--- /dev/null
+++ b/packages/table/src/core/column.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ColumnDef, Column, Table } from "../types";
+
+export type BaseColumn = {
+ id: string;
+ columnDef: ColumnDef;
+};
+
+export function initColumn(
+ table: Table,
+ columnDef: ColumnDef
+) {
+ let column: BaseColumn = {
+ id: columnDef.id,
+ columnDef: {
+ ...columnDef,
+ header: columnDef.header ?? columnDef.id,
+ },
+ };
+
+ for (const feature of table.features) {
+ feature.initColumn?.(table, column as Column);
+ }
+
+ return column;
+}
diff --git a/packages/table/src/core/row.ts b/packages/table/src/core/row.ts
new file mode 100644
index 0000000..50458f3
--- /dev/null
+++ b/packages/table/src/core/row.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Cell, Row, Table } from "../types";
+import { initCell } from "./cell";
+
+export type BaseRow = {
+ getAllCells: () => Cell[];
+ id: string;
+ data: TData;
+};
+
+export function initRow(
+ table: Table,
+ id: string,
+ data: TData
+) {
+ let row: BaseRow = {
+ id,
+ data,
+ getAllCells: () =>
+ table
+ .getAllColumns()
+ .map((column) => initCell(table, column, row as Row)),
+ };
+
+ for (const feature of table.features) {
+ feature.initRow?.(table, row as Row);
+ }
+
+ return row;
+}
diff --git a/packages/table/src/core/table.ts b/packages/table/src/core/table.ts
new file mode 100644
index 0000000..4a3000a
--- /dev/null
+++ b/packages/table/src/core/table.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Table, TableOptions, TableResolvedOptions } from "../types";
+import { functionalUpdate } from "../utils/functional-update";
+import { pagination } from "../features/pagination";
+import { initColumn } from "./column";
+import { columnVisibility } from "../features/column-visibility";
+import { initRow } from "./row";
+import { columnFiltering } from "../features/column-filtering";
+import { sorting } from "../features/sorting";
+import { rowSelection } from "../features/row-selection";
+import { columnPinning } from "../features/column-pinning";
+
+const features = [
+ pagination,
+ columnVisibility,
+ columnFiltering,
+ sorting,
+ rowSelection,
+ columnPinning,
+];
+export function initTable(
+ options: TableOptions
+): Table {
+ let initialState = options?.initialState ?? {};
+ features.forEach((feature) => {
+ initialState = feature.getInitialState?.(initialState) ?? initialState;
+ });
+
+ let table = { features } as Table;
+
+ const defaultOptions = features.reduce(
+ (obj, feature) => Object.assign(obj, feature.getDefaultOptions?.(table)),
+ {} as TableResolvedOptions
+ );
+
+ let instance = {
+ options: {
+ ...defaultOptions,
+ ...options,
+ },
+ initialState,
+ setOptions: (updater) => {
+ table.options = functionalUpdate(updater, table.options);
+ },
+ getState: () => table.options.state,
+ setState: (updater) => {
+ table.options.onStateChange?.(updater);
+ },
+ getAllColumns: () =>
+ table.options.columns?.map((column) => initColumn(table, column)) ?? [],
+ getRows: () =>
+ table.options.data?.map((data, index) =>
+ initRow(table, table.options.getRowId?.(data) ?? index.toString(), data)
+ ),
+ } as Table;
+
+ Object.assign(table, instance);
+
+ features.forEach((feature) => feature.init(table));
+
+ return table;
+}
diff --git a/packages/table/src/features/column-filtering.ts b/packages/table/src/features/column-filtering.ts
new file mode 100644
index 0000000..27a517b
--- /dev/null
+++ b/packages/table/src/features/column-filtering.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { TableFeature } from "../types";
+import { functionalUpdate } from "../utils/functional-update";
+
+export type ColumnFilteringState = Record;
+
+export type ColumnFilteringTableState = {
+ columnFilters: ColumnFilteringState;
+};
+
+export type ColumnFilteringOptions = {
+ onColumnFiltersChange: (
+ updater: React.SetStateAction
+ ) => void;
+ enableColumnFiltering?: boolean;
+};
+
+export type ColumnFilteringColumnDef = {
+ enableColumnFiltering?: boolean;
+};
+
+export type ColumnFilteringColumn = {
+ getFilterValue: () => unknown;
+ setFilter: (value: unknown) => void;
+ canFilter: () => boolean;
+};
+
+export type ColumnFilteringInstance = {
+ setColumnFilters: (
+ updater: React.SetStateAction
+ ) => void;
+};
+
+export const columnFiltering: TableFeature = {
+ getDefaultOptions: (table) => ({
+ onColumnFiltersChange: (updater) =>
+ table.setState((prev) => ({
+ ...prev,
+ columnFilters: functionalUpdate(updater, prev.columnFilters),
+ })),
+ }),
+ getInitialState: (state) => ({
+ columnFilters: {},
+ ...state,
+ }),
+ init: (table) => {
+ table.setColumnFilters = (updater) =>
+ table.options.onColumnFiltersChange?.(updater);
+ },
+ initColumn: (table, column) => {
+ column.getFilterValue = () => table.getState().columnFilters?.[column.id];
+ column.setFilter = (value) =>
+ table.setColumnFilters({
+ ...table.getState().columnFilters,
+ [column.id]: value,
+ });
+ column.canFilter = () =>
+ (column.columnDef.enableColumnFiltering ?? true) &&
+ (table.options.enableColumnFiltering ?? true);
+ },
+};
diff --git a/packages/table/src/features/column-pinning.ts b/packages/table/src/features/column-pinning.ts
new file mode 100644
index 0000000..8551ddb
--- /dev/null
+++ b/packages/table/src/features/column-pinning.ts
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Cell, Column, TableFeature } from "../types";
+import { functionalUpdate } from "../utils/functional-update";
+
+export type ColumnPinningState = Record;
+
+export type ColumnPinningTableState = {
+ columnPinning: ColumnPinningState;
+};
+
+export type ColumnPinningOptions = {
+ onColumnPinningChange: (
+ updater: React.SetStateAction
+ ) => void;
+};
+
+export type ColumnPinningInstance = {
+ setColumnPinning: (updater: React.SetStateAction) => void;
+ getAllPinnedColumns: () => Column[];
+ getVisiblePinnedColumns: () => Column[];
+ getVisibleUnpinnedColumns: () => Column[];
+};
+
+export type ColumnPinningColumn = {
+ isPinned: () => boolean;
+ pin: (value?: boolean) => void;
+};
+
+export type ColumnPinningRow = {
+ getAllPinnedCells: () => Cell[];
+ getVisiblePinnedCells: () => Cell[];
+ getVisibleUnpinnedCells: () => Cell[];
+};
+
+export const columnPinning: TableFeature = {
+ getDefaultOptions: (table) => ({
+ onColumnPinningChange: (updater) =>
+ table.setState((prev) => ({
+ ...prev,
+ columnPinning: functionalUpdate(updater, prev.columnPinning),
+ })),
+ }),
+ getInitialState: (state) => ({
+ columnPinning: {},
+ ...state,
+ }),
+ init: (table) => {
+ table.setColumnPinning = (updater) =>
+ table.options.onColumnPinningChange?.(updater);
+ table.getAllPinnedColumns = () =>
+ table.getAllColumns().filter((column) => column.isPinned());
+ table.getVisiblePinnedColumns = () =>
+ table.getVisibleColumns().filter((column) => column.isPinned());
+ table.getVisibleUnpinnedColumns = () =>
+ table.getVisibleColumns().filter((column) => !column.isPinned());
+ },
+ initColumn: (table, column) => {
+ column.isPinned = () => table.getState().columnPinning[column.id] ?? false;
+ column.pin = (value) =>
+ table.setColumnPinning((prev) => ({
+ ...prev,
+ [column.id]: value ?? !prev[column.id],
+ }));
+ },
+ initRow: (table, row) => {
+ row.getAllPinnedCells = () =>
+ row.getAllCells().filter((cell) => cell.column.isPinned());
+ row.getVisiblePinnedCells = () =>
+ row.getVisibleCells().filter((cell) => cell.column.isPinned());
+ row.getVisibleUnpinnedCells = () =>
+ row.getVisibleCells().filter((cell) => !cell.column.isPinned());
+ },
+};
diff --git a/packages/table/src/features/column-visibility.ts b/packages/table/src/features/column-visibility.ts
new file mode 100644
index 0000000..cb30eb9
--- /dev/null
+++ b/packages/table/src/features/column-visibility.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Cell, Column, TableFeature } from "../types";
+import { functionalUpdate } from "../utils/functional-update";
+
+export type ColumnVisibilityState = Record;
+
+export type ColumnVisibilityTableState = {
+ columnVisibility: ColumnVisibilityState;
+};
+
+export type ColumnVisibilityOptions = {
+ onColumnVisibilityChange: (
+ updater: React.SetStateAction
+ ) => void;
+};
+
+export type ColumnVisibilityInstance = {
+ setColumnVisibility: (
+ updater: React.SetStateAction
+ ) => void;
+ getVisibleColumns: () => Column[];
+};
+
+export type ColumnVisibilityColumn = {
+ isVisible: () => boolean;
+ toggleVisibility: (value?: boolean) => void;
+};
+
+export type ColumnVisibilityRow = {
+ getVisibleCells: () => Cell[];
+};
+
+export const columnVisibility: TableFeature = {
+ getDefaultOptions: (table) => ({
+ onColumnVisibilityChange: (updater) =>
+ table.setState((prev) => ({
+ ...prev,
+ columnVisibility: functionalUpdate(updater, prev.columnVisibility),
+ })),
+ }),
+ getInitialState: (state) => ({
+ columnVisibility: {},
+ ...state,
+ }),
+ init: (table) => {
+ table.setColumnVisibility = (updater) =>
+ table.options.onColumnVisibilityChange?.(updater);
+ table.getVisibleColumns = () =>
+ table.getAllColumns().filter((column) => column.isVisible());
+ },
+ initColumn: (table, column) => {
+ column.isVisible = () =>
+ table.getState().columnVisibility?.[column.id] ?? true;
+ column.toggleVisibility = (value) =>
+ table.setColumnVisibility((prev) => ({
+ ...prev,
+ [column.id]: value ?? !column.isVisible(),
+ }));
+ },
+ initRow: (table, row) => {
+ row.getVisibleCells = () =>
+ row.getAllCells().filter((cell) => cell.column.isVisible());
+ },
+};
diff --git a/packages/table/src/features/pagination.ts b/packages/table/src/features/pagination.ts
new file mode 100644
index 0000000..15b1645
--- /dev/null
+++ b/packages/table/src/features/pagination.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// pagination is currently manual only
+
+import * as React from "react";
+import { TableFeature } from "../types";
+import { functionalUpdate } from "../utils/functional-update";
+
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_INDEX = 0;
+
+export type PaginationState = {
+ pageSize: number;
+ pageIndex: number;
+};
+
+export type PaginationTableState = {
+ pagination: PaginationState;
+};
+
+export type PaginationOptions = {
+ onPaginationChange: (updater: React.SetStateAction) => void;
+ pageCount?: number;
+ rowCount?: number;
+};
+
+export type PaginationInstance = {
+ setPagination: (updater: React.SetStateAction) => void;
+ setPageIndex: (updater: React.SetStateAction) => void;
+ setPageSize: (updater: React.SetStateAction) => void;
+ getPageCount: () => number;
+ getRowCount: () => number;
+ nextPage: () => void;
+ previousPage: () => void;
+};
+
+const getDefaultPaginationState = (): PaginationState => ({
+ pageIndex: DEFAULT_PAGE_INDEX,
+ pageSize: DEFAULT_PAGE_SIZE,
+});
+
+export const pagination: TableFeature = {
+ getDefaultOptions: (table) => ({
+ onPaginationChange: (updater) =>
+ table.setState((prev) => ({
+ ...prev,
+ pagination: functionalUpdate(updater, prev.pagination),
+ })),
+ }),
+ getInitialState: (state) => ({
+ ...state,
+ pagination: {
+ ...getDefaultPaginationState(),
+ ...state?.pagination,
+ },
+ }),
+ init: (table) => {
+ table.setPagination = (updater) =>
+ table.options.onPaginationChange?.(updater);
+ table.setPageIndex = (updater) =>
+ table.setPagination((prev) => {
+ return {
+ ...prev,
+ pageIndex: functionalUpdate(updater, prev.pageIndex),
+ };
+ });
+ table.nextPage = () => table.setPageIndex((prev) => prev + 1);
+ table.previousPage = () =>
+ table.setPageIndex((prev) => Math.max(prev - 1, 0));
+ table.setPageSize = (updater) =>
+ table.setPagination((prev) => {
+ return { ...prev, pageSize: functionalUpdate(updater, prev.pageSize) };
+ });
+ table.getPageCount = () =>
+ table.options.pageCount ??
+ Math.ceil(table.getRowCount() / table.getState().pagination.pageSize);
+ table.getRowCount = () => table.options.rowCount ?? 0;
+ },
+};
diff --git a/packages/table/src/features/row-selection.ts b/packages/table/src/features/row-selection.ts
new file mode 100644
index 0000000..c7b9cbe
--- /dev/null
+++ b/packages/table/src/features/row-selection.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Row, TableFeature } from "../types";
+import { functionalUpdate } from "../utils/functional-update";
+
+export type RowSelectionState = Record;
+
+export type RowSelectionTableState = {
+ rowSelection: RowSelectionState;
+};
+
+export type RowSelectionOptions = {
+ onRowSelectionChange: (
+ updater: React.SetStateAction
+ ) => void;
+ enableRowSelection?: boolean;
+};
+
+export type RowSelectionInstance = {
+ setRowSelection: (updater: React.SetStateAction) => void;
+ getSelectedRows: () => Row[];
+};
+
+export type RowSelectionRow = {
+ isSelected: () => boolean;
+ toggleRowSelection: (value?: boolean) => void;
+ canSelect: () => boolean;
+};
+
+export const rowSelection: TableFeature = {
+ getDefaultOptions: (table) => ({
+ onRowSelectionChange: (updater) =>
+ table.setState((prev) => ({
+ ...prev,
+ rowSelection: functionalUpdate(updater, prev.rowSelection),
+ })),
+ }),
+ getInitialState: (state) => ({
+ rowSelection: {},
+ ...state,
+ }),
+ init: (table) => {
+ table.setRowSelection = (updater) =>
+ table.options.onRowSelectionChange?.(updater);
+ table.getSelectedRows = () =>
+ table.getRows().filter((row) => row.isSelected());
+ },
+ initRow: (table, row) => {
+ row.toggleRowSelection = (value) =>
+ table.setRowSelection((prev) => ({
+ ...prev,
+ [row.id]: value ?? !prev[row.id],
+ }));
+ row.isSelected = () => table.getState().rowSelection[row.id] ?? false;
+ row.canSelect = () => table.options.enableRowSelection ?? true;
+ },
+};
diff --git a/packages/table/src/features/sorting.ts b/packages/table/src/features/sorting.ts
new file mode 100644
index 0000000..28c85fc
--- /dev/null
+++ b/packages/table/src/features/sorting.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { TableFeature } from "../types";
+import { functionalUpdate } from "../utils/functional-update";
+import pre from "@changesets/cli/dist/declarations/src/commands/pre";
+
+export type Sort = "asc" | "desc" | undefined;
+export type SortingState = Record;
+
+export type SortTableState = {
+ sorting: SortingState;
+};
+
+export type SortingOptions = {
+ onSortingChange: (updater: React.SetStateAction) => void;
+ enableSorting?: boolean;
+};
+
+export type SortingColumnDef = {
+ enableSorting?: boolean;
+};
+
+export type SortingColumn = {
+ getSortingValue: () => Sort;
+ canSort: () => boolean;
+ setSort: (value: Sort) => void;
+};
+
+export type SortingInstance = {
+ setSorting: (updater: React.SetStateAction) => void;
+};
+
+export const sorting: TableFeature = {
+ getDefaultOptions: (table) => ({
+ onSortingChange: (updater) =>
+ table.setState((prev) => ({
+ ...prev,
+ sorting: functionalUpdate(updater, prev.sorting),
+ })),
+ }),
+ getInitialState: (state) => ({
+ sorting: {},
+ ...state,
+ }),
+ init: (table) => {
+ table.setSorting = (updater) => table.options.onSortingChange?.(updater);
+ },
+ initColumn: (table, column) => {
+ column.canSort = () =>
+ (column.columnDef.enableSorting ?? true) &&
+ (table.options.enableSorting ?? true);
+ column.getSortingValue = () => table.getState().sorting?.[column.id];
+ column.setSort = (value) => {
+ if (column.canSort())
+ table.setSorting((prevState) => ({
+ ...prevState,
+ [column.id]: value,
+ }));
+ };
+ },
+};
diff --git a/packages/table/src/hooks/index.ts b/packages/table/src/hooks/index.ts
deleted file mode 100644
index f30d0fa..0000000
--- a/packages/table/src/hooks/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from "./useTable";
diff --git a/packages/table/src/hooks/usePagination.ts b/packages/table/src/hooks/usePagination.ts
deleted file mode 100644
index 02df54a..0000000
--- a/packages/table/src/hooks/usePagination.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useMemo } from "react";
-
-const range = (start: number, end: number) => {
- let length = end - start + 1;
- return Array.from({ length }, (_, idx) => idx + start);
-};
-
-const usePagination = ({
- totalCount,
- pageSize,
- siblingCount = 3,
- currentPage = 0,
-}: {
- totalCount: number;
- pageSize: number;
- siblingCount?: number;
- currentPage: number;
-}) => {
- return useMemo(() => {
- const totalPageCount = Math.ceil(totalCount / pageSize);
-
- // first page
- if (currentPage < siblingCount) {
- const firstItem = Math.min(0, currentPage);
- const lastItem = Math.min(siblingCount * 2, totalPageCount);
- return { pageCount: totalPageCount, pages: range(firstItem, lastItem) };
- }
-
- // last pages
- if (totalPageCount - currentPage <= siblingCount) {
- const firstItem = Math.min(
- totalPageCount - siblingCount * 2,
- currentPage
- );
- return {
- pageCount: totalPageCount,
- pages: range(firstItem, totalPageCount - 1),
- };
- }
-
- const lastItem = Math.min(currentPage + siblingCount, totalPageCount);
- return {
- pageCount: totalPageCount,
- pages: range(currentPage - siblingCount, lastItem),
- };
- }, [totalCount, pageSize, siblingCount, currentPage]);
-};
-
-export default usePagination;
diff --git a/packages/table/src/hooks/useTable/index.ts b/packages/table/src/hooks/useTable/index.ts
deleted file mode 100644
index 5745c07..0000000
--- a/packages/table/src/hooks/useTable/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export { default as useTable } from "./useTable";
-export * from "./useTable.types";
diff --git a/packages/table/src/hooks/useTable/useTable.ts b/packages/table/src/hooks/useTable/useTable.ts
deleted file mode 100644
index 2402588..0000000
--- a/packages/table/src/hooks/useTable/useTable.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useReducer, useState } from "react";
-import usePagination from "../usePagination";
-import type { TableColumn, TableFilter, TableSort } from "../../types";
-import type {
- IPaginationConfig,
- ISortConfig,
- IUseTableConfig,
- IUseTableData,
- TableState,
- UseTableAction,
-} from "./useTable.types";
-import { default as availableFilters } from "../../constants/filters";
-
-function tableReducer(state: TableState, action: UseTableAction) {
- const { type, payload } = action;
-
- switch (type) {
- case "updateCurrentPage":
- return { ...state, currentPage: payload };
- case "updatePageSize":
- return { ...state, pageSize: payload };
- case "toggleVisibleItem":
- return {
- ...state,
- visibleColumns: state.visibleColumns.includes(payload)
- ? state.visibleColumns.filter((c) => c !== payload)
- : [...state.visibleColumns, payload],
- };
- case "toggleMultipleVisibleItems":
- return {
- ...state,
- visibleColumns: payload.filter((c) => !c.hidden).map((c) => c.id),
- };
- case "toggleAllVisibleItems":
- return {
- ...state,
- visibleColumns: payload?.every((c) =>
- state.visibleColumns.includes(c.id)
- )
- ? []
- : payload?.map((c) => c.id),
- };
- case "setFilters":
- return {
- ...state,
- filters: payload,
- // reset expanded rows when filters change
- expandedRows: {},
- };
- case "resetAllFilters":
- return {
- ...state,
- filters: state.initialFilters ?? [],
- };
- case "setSort":
- return {
- ...state,
- sort: payload,
- };
- case "setExpandedRows":
- return {
- ...state,
- expandedRows: {
- ...state.expandedRows,
- [payload]: !state.expandedRows[payload],
- },
- };
-
- case "refresh":
- return { ...state, ...payload };
- default:
- return state;
- }
-}
-
-function useTable<
- P extends IPaginationConfig | undefined,
- S extends ISortConfig | undefined,
- E extends boolean
->(config: IUseTableConfig | null): IUseTableData {
- const { pagination, columns, initialFilters, sorting, expandable } =
- config ?? {};
- const [prevConfig, setPrevConfig] = useState(config ?? null);
- const [
- { currentPage, pageSize, visibleColumns, filters, sort, expandedRows },
- dispatch,
- ] = useReducer(tableReducer, {
- currentPage: pagination?.initialPage || 0,
- pageSize: pagination?.pageSize || 10,
- visibleColumns: columns?.filter((c) => !c.hidden).map((c) => c.id) ?? [],
- filters: initialFilters ?? [],
- initialFilters: initialFilters ?? [],
- sort: sorting?.default ?? [],
- expandedRows: {},
- });
-
- if (JSON.stringify(config) !== JSON.stringify(prevConfig)) {
- setPrevConfig(config);
- dispatch({
- type: "refresh",
- payload: {
- pageSize: config?.pagination?.pageSize ?? 10,
- currentPage: config?.pagination?.initialPage ?? 0,
- visibleColumns:
- config?.columns?.filter((c) => !c.hidden).map((c) => c.id) ?? [],
- sort: [],
- },
- });
- }
-
- const { pages, pageCount } = usePagination({
- totalCount: pagination?.totalCount ?? 0,
- pageSize,
- currentPage,
- });
-
- let data = {};
-
- if (pagination) {
- data = {
- ...data,
- goToPage: (page: number) => {
- dispatch({ type: "updateCurrentPage", payload: page });
- pagination.onChange?.(page);
- },
- setPageSize: (size: number) =>
- dispatch({ type: "updatePageSize", payload: size }),
- pageCount,
- pages,
- pageSize,
- currentPage,
- paginationType: pagination.type,
- totalCount: pagination?.totalCount ?? 0,
- };
- }
-
- if (columns) {
- data = {
- ...data,
- filters,
- allColumns: columns.map((c) => ({
- ...c,
- toggleHide: () =>
- dispatch({ type: "toggleVisibleItem", payload: c.id }),
- hidden: !visibleColumns.includes(c.id),
- availableFilterOperators:
- c?.availableFilterOperators ??
- (c?.type && availableFilters?.[c.type]),
- })),
- toggleHide: (columns: TableColumn[]) =>
- dispatch({ type: "toggleMultipleVisibleItems", payload: columns }),
- toggleHideAll: () =>
- dispatch({ type: "toggleAllVisibleItems", payload: columns }),
- columns: columns
- .filter((c) => visibleColumns.includes(c.id))
- .map((column) => ({ ...column, sortable: column?.sortable ?? true })),
- setFilters: (filters: TableFilter[]) =>
- dispatch({ type: "setFilters", payload: filters }),
- resetAllFilters: () =>
- dispatch({ type: "resetAllFilters", payload: undefined }),
- };
-
- if (sorting) {
- data = {
- ...data,
- sort,
- sortable: !!config?.sorting?.sortable,
- setSort: (sort: TableSort[]) => dispatch({ type: "setSort", payload: sort }),
- sortType: sorting.type,
- };
- }
-
- if (expandable) {
- data = {
- ...data,
- expandedRows,
- onExpandRow: (id: number) =>
- dispatch({ type: "setExpandedRows", payload: id }),
- };
- }
- }
-
- return { tableProps: data, ...data } as IUseTableData;
-}
-
-export default useTable;
diff --git a/packages/table/src/hooks/useTable/useTable.types.ts b/packages/table/src/hooks/useTable/useTable.types.ts
deleted file mode 100644
index 8609c6e..0000000
--- a/packages/table/src/hooks/useTable/useTable.types.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { TableColumn, TableExpandedState, TableFilter, TableSort } from "../../types";
-
-type AllColumns = Array<
- TableColumn & {
- toggleHide: () => void;
- hidden: boolean;
- }
->;
-
-type IPaginationConfig = {
- initialPage?: number;
- pageSize?: number;
- totalCount: number;
- siblingCount?: number;
- onChange?: (page: number) => void;
- type?: "custom";
-};
-
-type ISortConfig = { default?: TableSort[]; sortable?: boolean; type?: "custom" };
-
-interface IUseTableConfig {
- pagination?: Pagination;
- columns: TableColumn[];
- sorting?: ISortConfig;
- expandable?: Expandable;
- initialFilters?: TableFilter[];
-}
-
-interface IPaginationData {
- goToPage: (page: number) => void;
- setPageSize: (size: number) => void;
- pageSize: number;
- pageCount: number;
- pages: number[];
- currentPage: number;
- paginationType?: "custom";
- totalCount?: number;
-}
-
-type IColumnsData = {
- allColumns: AllColumns;
- toggleHideAll: () => void;
- toggleHide: (columns: TableColumn[]) => void;
- columns: Array>;
- resetAllFilters: () => void;
- setFilters: (filters: TableFilter[]) => void;
- filters: Array;
-};
-
-type ISortData = {
- sort: TableSort[];
- setSort: (sort: TableSort[]) => void;
- sortable: boolean;
- sortType?: "custom";
-};
-
-type IExpandableData = {
- expandedRows: TableExpandedState;
-};
-
-type IUseTableResult =
- (Pagination extends undefined ? undefined : IPaginationData) &
- (TableSort extends undefined ? undefined : ISortData) &
- (Expandable extends true ? IExpandableData : undefined) &
- IColumnsData;
-
-type IUseTableForwardedProps = IUseTableResult<
- Pagination,
- TableSort,
- Expandable
-> & {
- onExpandRow?: (index: number) => void;
-};
-
-type IUseTableData = {
- tableProps: IUseTableForwardedProps;
-} & IUseTableResult;
-
-type TableState = {
- currentPage: number;
- pageSize: number;
- visibleColumns: string[];
- filters: TableFilter[];
- sort: TableSort[];
- expandedRows: TableExpandedState;
- initialFilters: TableFilter[];
-};
-
-type UseTableAction =
- | {
- type: "updateCurrentPage" | "updatePageSize";
- payload: number;
- }
- | { type: "toggleVisibleItem"; payload: string }
- | { type: "toggleMultipleVisibleItems"; payload: TableColumn[] }
- | { type: "toggleAllVisibleItems"; payload: TableColumn[] }
- | { type: "refresh"; payload: Partial }
- | { type: "setFilters"; payload: TableFilter[] }
- | { type: "resetAllFilters"; payload: undefined }
- | { type: "setSort"; payload: TableSort[] }
- | { type: "setExpandedRows"; payload: number };
-
-export {
- IUseTableData,
- IUseTableConfig,
- IPaginationData,
- IPaginationConfig,
- ISortConfig,
- ISortData,
- TableState,
- UseTableAction,
- AllColumns,
- IUseTableForwardedProps,
-};
diff --git a/packages/table/src/index.ts b/packages/table/src/index.ts
index da0ad36..19a42c5 100644
--- a/packages/table/src/index.ts
+++ b/packages/table/src/index.ts
@@ -1,11 +1,11 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
+/*
+ * Copyright 2024 Arkemis S.r.l.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
- * http://www.apache.org/licenses/LICENSE-2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
@@ -14,6 +14,12 @@
* limitations under the License.
*/
-export * from "./components";
-export * from "./hooks";
+export * from "./use-table";
+
+export * from "./features/column-filtering";
+export * from "./features/column-visibility";
+export * from "./features/pagination";
+export * from "./features/row-selection";
+export * from "./features/sorting";
+
export * from "./types";
diff --git a/packages/table/src/types.ts b/packages/table/src/types.ts
new file mode 100644
index 0000000..f67f3e8
--- /dev/null
+++ b/packages/table/src/types.ts
@@ -0,0 +1,147 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import {
+ PaginationInstance,
+ PaginationOptions,
+ PaginationTableState,
+} from "./features/pagination";
+import {
+ ColumnVisibilityColumn,
+ ColumnVisibilityInstance,
+ ColumnVisibilityOptions,
+ ColumnVisibilityRow,
+ ColumnVisibilityTableState,
+} from "./features/column-visibility";
+import { BaseRow } from "./core/row";
+import { BaseCell } from "./core/cell";
+import {
+ ColumnFilteringColumn,
+ ColumnFilteringColumnDef,
+ ColumnFilteringInstance,
+ ColumnFilteringOptions,
+ ColumnFilteringTableState,
+} from "./features/column-filtering";
+import {
+ SortingColumn,
+ SortingColumnDef,
+ SortingInstance,
+ SortingOptions,
+ SortTableState,
+} from "./features/sorting";
+import {
+ RowSelectionInstance,
+ RowSelectionOptions,
+ RowSelectionRow,
+ RowSelectionTableState,
+} from "./features/row-selection";
+import {
+ ColumnPinningColumn,
+ ColumnPinningInstance,
+ ColumnPinningOptions,
+ ColumnPinningRow,
+ ColumnPinningTableState,
+} from "./features/column-pinning";
+import { BaseColumn } from "./core/column";
+
+export type TableState = PaginationTableState &
+ ColumnVisibilityTableState &
+ ColumnFilteringTableState &
+ SortTableState &
+ RowSelectionTableState &
+ ColumnPinningTableState;
+
+export type TableBaseOptions = {
+ columns: ColumnDef[];
+ state: Partial;
+ onStateChange: React.Dispatch>;
+ initialState?: Partial;
+ data: TData[];
+ getRowId?: (data: TData) => string;
+};
+
+export type TableResolvedOptions = TableBaseOptions &
+ PaginationOptions &
+ ColumnVisibilityOptions &
+ ColumnFilteringOptions &
+ SortingOptions &
+ RowSelectionOptions &
+ ColumnPinningOptions;
+
+export type TableOptions = Partial<
+ TableResolvedOptions
+>;
+
+export type TableBaseInstance = {
+ features: TableFeature[];
+ setOptions: React.Dispatch>>;
+ options: TableOptions;
+ initialState: TableState;
+ getState: () => TableState;
+ setState: React.Dispatch>;
+ getAllColumns: () => Column[];
+ getRows: () => Row[];
+};
+
+export type Table = TableBaseInstance &
+ PaginationInstance &
+ ColumnVisibilityInstance &
+ ColumnFilteringInstance &
+ SortingInstance &
+ RowSelectionInstance &
+ ColumnPinningInstance;
+
+export type ColumnConfig = Record;
+
+export type ColumnDef = SortingColumnDef &
+ ColumnFilteringColumnDef & {
+ id: string;
+ header?: string;
+ cell?: {
+ renderValue?: (value: TData) => React.ReactNode;
+ };
+ config?: ColumnConfig;
+ };
+
+export type Row = BaseRow &
+ ColumnVisibilityRow &
+ RowSelectionRow &
+ ColumnPinningRow;
+
+export type Cell = BaseCell;
+
+export type Column = BaseColumn &
+ ColumnVisibilityColumn &
+ ColumnFilteringColumn &
+ SortingColumn &
+ ColumnPinningColumn;
+
+export type TableFeature = {
+ getInitialState?: (state?: Partial) => Partial;
+ init: (table: Table) => void;
+ getDefaultOptions?: (
+ table: Table
+ ) => Partial>;
+ initColumn?: (table: Table, column: Column) => void;
+ initRow?: (table: Table, row: Row) => void;
+ initCell?: (
+ table: Table,
+ cell: Cell,
+ column: Column,
+ row: Row
+ ) => void;
+};
diff --git a/packages/table/src/types/action.ts b/packages/table/src/types/action.ts
deleted file mode 100644
index 23db141..0000000
--- a/packages/table/src/types/action.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { ReactNode } from "react";
-
-type Action = {
- content: ((data: Record) => ReactNode) | ReactNode;
- onClick?: (data: Record) => void;
-};
-
-export type { Action };
diff --git a/packages/table/src/types/column.ts b/packages/table/src/types/column.ts
deleted file mode 100644
index 4de0cd2..0000000
--- a/packages/table/src/types/column.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { CSSProperties, ReactNode } from "react";
-import { FilterOperator } from "./filters";
-
-export type TableColumn = {
- id: string;
- label: string;
- renderHeader?: () => string | number | ReactNode;
- render?: (
- data: Record,
- actions: { handleExpandRow: () => void }
- ) => string | number | ReactNode;
- className?: string;
- style?: CSSProperties;
- type?:
- | "boolean"
- | "date"
- | "datetime"
- | "float"
- | "integer"
- | "string"
- | "time";
- availableFilterOperators?: Array;
- sortable?: boolean;
- hidden?: boolean;
-};
diff --git a/packages/table/src/types/components.ts b/packages/table/src/types/components.ts
deleted file mode 100644
index 7575db3..0000000
--- a/packages/table/src/types/components.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { TableColumn } from "./column";
-import * as React from "react";
-
-type TableComponents = Partial<
- Record<
- string,
- (
- value: any,
- rowData: Record,
- column: TableColumn
- ) => React.ReactElement
- >
-> & {
- ExpandedRow?: (rowData: Record) => React.ReactElement;
- Table?: (props: React.HTMLAttributes) => JSX.Element | null;
- TableHeader?: (
- props: React.HTMLAttributes
- ) => JSX.Element | null;
- TableBody?: (
- props: React.HTMLAttributes
- ) => JSX.Element | null;
- TableRow?: (
- props: React.HTMLAttributes
- ) => JSX.Element | null;
- TableHead?: (
- props: React.ThHTMLAttributes
- ) => JSX.Element | null;
- TableCell?: (
- props: React.TdHTMLAttributes
- ) => JSX.Element | null;
- TableFooter?: (
- props: React.HTMLAttributes
- ) => JSX.Element | null;
-};
-
-export type { TableComponents };
diff --git a/packages/table/src/types/expandable.ts b/packages/table/src/types/expandable.ts
deleted file mode 100644
index 6afcefa..0000000
--- a/packages/table/src/types/expandable.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-type TableExpandedState = Record;
-
-export type { TableExpandedState };
diff --git a/packages/table/src/types/filters.ts b/packages/table/src/types/filters.ts
deleted file mode 100644
index 175ec56..0000000
--- a/packages/table/src/types/filters.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export enum FilterOperator {
- EQ = "eq",
- LE = "le",
- LT = "lt",
- GT = "gt",
- GE = "ge",
- NE = "ne",
- CONTAINS = "contains",
- ICONTAINS = "icontains",
- STARTSWITH = "startswith",
- ISTARTSWITH = "istartswith",
- ENDSWITH = "endswith",
- IENDSWITH = "iendswith",
- IN = "in",
- BETWEEN = "between",
-}
-
-export type TableFilter = {
- key: string;
- operator: FilterOperator;
- value: string | number;
-};
diff --git a/packages/table/src/types/index.ts b/packages/table/src/types/index.ts
deleted file mode 100644
index 99f7378..0000000
--- a/packages/table/src/types/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from "./action";
-export * from "./column";
-export * from "./components";
-export * from "./expandable";
-export * from "./filters";
-export * from "./sort";
-export * from "./table";
diff --git a/packages/table/src/types/sort.ts b/packages/table/src/types/sort.ts
deleted file mode 100644
index aed5c1c..0000000
--- a/packages/table/src/types/sort.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-type TableSort = {
- type: "asc" | "desc";
- key: string;
-};
-
-export { TableSort };
diff --git a/packages/table/src/types/table.ts b/packages/table/src/types/table.ts
deleted file mode 100644
index 7923711..0000000
--- a/packages/table/src/types/table.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { CSSProperties, ReactNode } from "react";
-import { TableColumn } from "./column";
-import { TableComponents } from "./components";
-import { IUseTableForwardedProps } from "../hooks";
-import { Action } from "./action";
-
-type ITableProps = {
- /**
- * Table Columns
- */
- columns: Omit[];
- data: Record[];
- actions?: ActionsConfig;
- noResult?: ReactNode;
- renderHeader?: (column: TableColumn) => ReactNode;
- components?: TableComponents;
-} & Partial>;
-
-type ActionsConfig = {
- label: string | ReactNode;
- position?: "start" | "end";
- className?: string;
- style?: CSSProperties;
- actions: Array;
-};
-
-export { ITableProps };
diff --git a/packages/table/src/use-table.tsx b/packages/table/src/use-table.tsx
new file mode 100644
index 0000000..894ea0a
--- /dev/null
+++ b/packages/table/src/use-table.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { TableOptions } from "./types";
+import { initTable } from "./core/table";
+
+export function useTable(options: TableOptions) {
+ const [table] = React.useState(() =>
+ initTable({
+ state: {},
+ onStateChange: () => {},
+ ...options,
+ })
+ );
+
+ const [state, setState] = React.useState(() => table.initialState);
+
+ table.setOptions((prev) => ({
+ ...prev,
+ ...options,
+ state: {
+ ...state,
+ ...options.state,
+ },
+ onStateChange: (state) => {
+ setState(state);
+ options.onStateChange?.(state);
+ },
+ }));
+
+ return table;
+}
diff --git a/packages/table/src/components/Pagination/Pagination.types.ts b/packages/table/src/utils/functional-update.ts
similarity index 63%
rename from packages/table/src/components/Pagination/Pagination.types.ts
rename to packages/table/src/utils/functional-update.ts
index e3e5064..09708aa 100644
--- a/packages/table/src/components/Pagination/Pagination.types.ts
+++ b/packages/table/src/utils/functional-update.ts
@@ -1,11 +1,11 @@
-/**
- * Copyright 2023 Arkemis S.r.l.
+/*
+ * Copyright 2024 Arkemis S.r.l.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
- * http://www.apache.org/licenses/LICENSE-2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
@@ -14,11 +14,12 @@
* limitations under the License.
*/
-interface IPaginationProps {
- pageCount: number;
- pages: number[];
- currentPage: number;
- onChange: (page: number) => void;
+import * as React from "react";
+export function functionalUpdate(
+ updater: React.SetStateAction,
+ input: T
+): T {
+ return typeof updater === "function"
+ ? (updater as (input: T) => T)(input)
+ : updater;
}
-
-export { IPaginationProps };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3ece02..35452bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,7 +25,7 @@ importers:
version: 2.26.2
'@turbo/gen':
specifier: ^1.9.7
- version: 1.9.7(@types/node@17.0.12)(typescript@5.1.6)
+ version: 1.9.7(@types/node@18.16.19)(typescript@5.1.6)
eslint:
specifier: ^8.41.0
version: 8.41.0
@@ -141,6 +141,9 @@ importers:
'@arkejs/table':
specifier: workspace:table
version: link:../../packages/table
+ class-variance-authority:
+ specifier: ^0.7.0
+ version: 0.7.0
clsx:
specifier: ^2.1.0
version: 2.1.0
@@ -228,7 +231,7 @@ importers:
version: 5.1.6
vite:
specifier: ^4.4.0
- version: 4.4.4(@types/node@17.0.12)
+ version: 4.4.4(@types/node@18.16.19)
packages/table:
dependencies:
@@ -2743,7 +2746,7 @@ packages:
magic-string: 0.27.0
react-docgen-typescript: 2.2.2(typescript@5.1.6)
typescript: 5.1.6
- vite: 4.4.4(@types/node@17.0.12)
+ vite: 4.4.4(@types/node@18.16.19)
dev: true
/@jridgewell/gen-mapping@0.3.3:
@@ -4139,7 +4142,7 @@ packages:
magic-string: 0.30.1
rollup: 3.26.2
typescript: 5.1.6
- vite: 4.4.4(@types/node@17.0.12)
+ vite: 4.4.4(@types/node@18.16.19)
transitivePeerDependencies:
- encoding
- supports-color
@@ -4616,7 +4619,7 @@ packages:
react: 18.2.0
react-docgen: 7.0.3
react-dom: 18.2.0(react@18.2.0)
- vite: 4.4.4(@types/node@17.0.12)
+ vite: 4.4.4(@types/node@18.16.19)
transitivePeerDependencies:
- '@preact/preset-vite'
- encoding
@@ -4821,7 +4824,7 @@ packages:
resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
dev: false
- /@turbo/gen@1.9.7(@types/node@17.0.12)(typescript@5.1.6):
+ /@turbo/gen@1.9.7(@types/node@18.16.19)(typescript@5.1.6):
resolution: {integrity: sha512-mjenROdRNvYxZixNfamJY/XxwKMT+01PuQby8+qdRUUa5ZLBPOv4rw11n+II1O8ZnpFpBJIGGFJcnRNY+lCddw==}
hasBin: true
dependencies:
@@ -4832,7 +4835,7 @@ packages:
minimatch: 9.0.3
node-plop: 0.26.3
semver: 7.5.4
- ts-node: 10.9.1(@types/node@17.0.12)(typescript@5.1.6)
+ ts-node: 10.9.1(@types/node@18.16.19)(typescript@5.1.6)
update-check: 1.5.4
validate-npm-package-name: 5.0.0
transitivePeerDependencies:
@@ -5384,7 +5387,7 @@ packages:
'@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.9)
magic-string: 0.27.0
react-refresh: 0.14.0
- vite: 4.4.4(@types/node@17.0.12)
+ vite: 4.4.4(@types/node@18.16.19)
transitivePeerDependencies:
- supports-color
dev: true
@@ -5399,7 +5402,7 @@ packages:
'@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.22.9)
'@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.9)
react-refresh: 0.14.0
- vite: 4.4.4(@types/node@17.0.12)
+ vite: 4.4.4(@types/node@18.16.19)
transitivePeerDependencies:
- supports-color
dev: true
@@ -6337,6 +6340,12 @@ packages:
resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==}
engines: {node: '>=8'}
+ /class-variance-authority@0.7.0:
+ resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+ dependencies:
+ clsx: 2.0.0
+ dev: false
+
/clean-stack@2.2.0:
resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
engines: {node: '>=6'}
@@ -6407,6 +6416,11 @@ packages:
resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
engines: {node: '>=0.8'}
+ /clsx@2.0.0:
+ resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+ engines: {node: '>=6'}
+ dev: false
+
/clsx@2.1.0:
resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
engines: {node: '>=6'}
@@ -9266,7 +9280,7 @@ packages:
resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
engines: {node: '>= 10.13.0'}
dependencies:
- '@types/node': 17.0.12
+ '@types/node': 18.16.19
merge-stream: 2.0.0
supports-color: 8.1.1
dev: true
@@ -11155,6 +11169,22 @@ packages:
camelcase-css: 2.0.1
postcss: 8.4.35
+ /postcss-load-config@3.1.4:
+ resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+ engines: {node: '>= 10'}
+ peerDependencies:
+ postcss: '>=8.0.9'
+ ts-node: '>=9.0.0'
+ peerDependenciesMeta:
+ postcss:
+ optional: true
+ ts-node:
+ optional: true
+ dependencies:
+ lilconfig: 2.1.0
+ yaml: 1.10.2
+ dev: true
+
/postcss-load-config@3.1.4(postcss@8.4.21):
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
engines: {node: '>= 10'}
@@ -12909,7 +12939,7 @@ packages:
/ts-interface-checker@0.1.13:
resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
- /ts-node@10.9.1(@types/node@17.0.12)(typescript@5.1.6):
+ /ts-node@10.9.1(@types/node@18.16.19)(typescript@5.1.6):
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
hasBin: true
peerDependencies:
@@ -12928,7 +12958,7 @@ packages:
'@tsconfig/node12': 1.0.11
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4
- '@types/node': 17.0.12
+ '@types/node': 18.16.19
acorn: 8.10.0
acorn-walk: 8.2.0
arg: 4.1.3
@@ -12983,7 +13013,7 @@ packages:
execa: 5.1.1
globby: 11.1.0
joycon: 3.1.1
- postcss-load-config: 3.1.4(postcss@8.4.21)
+ postcss-load-config: 3.1.4
resolve-from: 5.0.0
rollup: 3.26.2
source-map: 0.8.0-beta.0
@@ -13567,7 +13597,7 @@ packages:
vfile-message: 3.1.4
dev: false
- /vite@4.4.4(@types/node@17.0.12):
+ /vite@4.4.4(@types/node@18.16.19):
resolution: {integrity: sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
@@ -13595,7 +13625,7 @@ packages:
terser:
optional: true
dependencies:
- '@types/node': 17.0.12
+ '@types/node': 18.16.19
esbuild: 0.18.11
postcss: 8.4.35
rollup: 3.26.2