-
+
- {headerGroups.map((headerGroup, index) => (
-
);
-};
+}
export default CheckTable;
+const columnHelper = createColumnHelper();
diff --git a/src/views/admin/default/components/ComplexTable.jsx b/src/views/admin/default/components/ComplexTable.jsx
index 03bbed4..3f20a44 100644
--- a/src/views/admin/default/components/ComplexTable.jsx
+++ b/src/views/admin/default/components/ComplexTable.jsx
@@ -1,125 +1,159 @@
+import React from "react";
import CardMenu from "components/card/CardMenu";
import Card from "components/card";
-import {
- useGlobalFilter,
- usePagination,
- useSortBy,
- useTable,
-} from "react-table";
-import { MdCheckCircle, MdCancel, MdOutlineError } from "react-icons/md";
-import { useMemo } from "react";
import Progress from "components/progress";
-const ComplexTable = (props) => {
- const { columnsData, tableData } = props;
-
- const columns = useMemo(() => columnsData, [columnsData]);
- const data = useMemo(() => tableData, [tableData]);
+import { MdCancel, MdCheckCircle, MdOutlineError } from "react-icons/md";
- const tableInstance = useTable(
- {
- columns,
- data,
- },
- useGlobalFilter,
- useSortBy,
- usePagination
- );
+import {
+ createColumnHelper,
+ flexRender,
+ getCoreRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
- const {
- getTableProps,
- getTableBodyProps,
- headerGroups,
- page,
- prepareRow,
- initialState,
- } = tableInstance;
- initialState.pageSize = 5;
+const columnHelper = createColumnHelper();
+// const columns = columnsDataCheck;
+export default function ComplexTable(props) {
+ const { tableData } = props;
+ const [sorting, setSorting] = React.useState([]);
+ let defaultData = tableData;
+ const columns = [
+ columnHelper.accessor("name", {
+ id: "name",
+ header: () => (
+
-
|
-
- {column.render("Header")}
-
- |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } - return ( -- {data} - | - ); - })} -
NAME
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("status", { + id: "status", + header: () => ( ++ STATUS +
+ ), + cell: (info) => ( +
+ {info.getValue() === "Approved" ? (
+
+ ),
+ }),
+ columnHelper.accessor("date", {
+ id: "date",
+ header: () => (
+ + {info.getValue()} +
+DATE
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("progress", { + id: "progress", + header: () => ( ++ PROGRESS +
+ ), + cell: (info) => ( +
+
+
+ ),
+ }),
+ ]; // eslint-disable-next-line
+ const [data, setData] = React.useState(() => [...defaultData]);
+ const table = useReactTable({
+ data,
+ columns,
+ state: {
+ sorting,
+ },
+ onSortingChange: setSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ debugTable: true,
+ });
return (
-
+
+
-
Complex Table
-
+
- {/* Top Creator Header */}
-
|
- - {column.render("Header")} - - |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } else if (cell.column.Header === "DATE") { - data = ( -- {data} - | - ); - })} -
NAME
+ ), + cell: (info) => ( +
+
+ ),
+ }),
+ columnHelper.accessor("artworks", {
+ id: "artworks",
+ header: () => (
+
+ [1]})
+
+ + {info.getValue()[0]} +
++ ARTWORKS +
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("rating", { + id: "rating", + header: () => ( ++ RATING +
+ ), + cell: (info) => ( +
+
+
+ ),
+ }),
+ ]; // eslint-disable-next-line
+ const [data, setData] = React.useState(() => [...defaultData]);
+ const table = useReactTable({
+ data,
+ columns,
+ state: {
+ sorting,
},
- useGlobalFilter,
- useSortBy,
- usePagination
- );
-
- const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow } =
- tableInstance;
-
+ onSortingChange: setSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ debugTable: true,
+ });
return (
-
-
+
- {/* Top Creator Heading */}
- - Top Creators -
-
-
+
-
+
+
|
-
- {column.render("Header")}
-
- |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } - return ( -- {data} - | - ); - })} -
NAME
+ ), + cell: (info) => ( +
+
+ ),
+ }),
+ columnHelper.accessor("progress", {
+ id: "progress",
+ header: () => (
+ + {info.getValue()[0]} +
++ PROGRESS +
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("quantity", { + id: "quantity", + header: () => ( ++ QUANTITY +
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("date", { + id: "date", + header: () => ( +DATE
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + ]; // eslint-disable-next-line + const [data, setData] = React.useState(() => [...defaultData]); + const table = useReactTable({ + data, + columns, + state: { + sorting, }, - useGlobalFilter, - useSortBy, - usePagination - ); - - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState, - } = tableInstance; - initialState.pageSize = 11; - + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true, + }); return ( -
Check Table
@@ -47,86 +95,63 @@ const CheckTable = (props) => {
-
+
- {headerGroups.map((headerGroup, index) => (
-
);
-};
+}
export default CheckTable;
+const columnHelper = createColumnHelper();
diff --git a/src/views/admin/tables/components/ColumnsTable.jsx b/src/views/admin/tables/components/ColumnsTable.jsx
index ccd4a90..475d55f 100644
--- a/src/views/admin/tables/components/ColumnsTable.jsx
+++ b/src/views/admin/tables/components/ColumnsTable.jsx
@@ -1,39 +1,81 @@
+import React from "react";
import CardMenu from "components/card/CardMenu";
import Card from "components/card";
-import React, { useMemo } from "react";
-import {
- useGlobalFilter,
- usePagination,
- useSortBy,
- useTable,
-} from "react-table";
-
-const ColumnsTable = (props) => {
- const { columnsData, tableData } = props;
- const columns = useMemo(() => columnsData, [columnsData]);
- const data = useMemo(() => tableData, [tableData]);
+import {
+ createColumnHelper,
+ flexRender,
+ getCoreRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
- const tableInstance = useTable(
- {
- columns,
- data,
+function ColumnsTable(props) {
+ const { tableData } = props;
+ const [sorting, setSorting] = React.useState([]);
+ let defaultData = tableData;
+ const columns = [
+ columnHelper.accessor("name", {
+ id: "name",
+ header: () => (
+
@@ -44,74 +86,63 @@ const ColumnsTable = (props) => {
|
-
- {column.render("Header")}
-
- |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } - return ( -- {data} - | - ); - })} -
NAME
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("progress", { + id: "progress", + header: () => ( ++ PROGRESS +
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("quantity", { + id: "quantity", + header: () => ( ++ QUANTITY +
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("date", { + id: "date", + header: () => ( +DATE
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + ]; // eslint-disable-next-line + const [data, setData] = React.useState(() => [...defaultData]); + const table = useReactTable({ + data, + columns, + state: { + sorting, }, - useGlobalFilter, - useSortBy, - usePagination - ); - - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState, - } = tableInstance; - initialState.pageSize = 5; - + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true, + }); return (
-
+
- {headerGroups.map((headerGroup, index) => (
-
);
-};
+}
export default ColumnsTable;
+const columnHelper = createColumnHelper();
diff --git a/src/views/admin/tables/components/ComplexTable.jsx b/src/views/admin/tables/components/ComplexTable.jsx
index 90ce148..3f20a44 100644
--- a/src/views/admin/tables/components/ComplexTable.jsx
+++ b/src/views/admin/tables/components/ComplexTable.jsx
@@ -1,125 +1,159 @@
+import React from "react";
import CardMenu from "components/card/CardMenu";
import Card from "components/card";
-import {
- useGlobalFilter,
- usePagination,
- useSortBy,
- useTable,
-} from "react-table";
-import { MdCheckCircle, MdCancel, MdOutlineError } from "react-icons/md";
-import { useMemo } from "react";
import Progress from "components/progress";
-const ComplexTable = (props) => {
- const { columnsData, tableData } = props;
-
- const columns = useMemo(() => columnsData, [columnsData]);
- const data = useMemo(() => tableData, [tableData]);
+import { MdCancel, MdCheckCircle, MdOutlineError } from "react-icons/md";
- const tableInstance = useTable(
- {
- columns,
- data,
- },
- useGlobalFilter,
- useSortBy,
- usePagination
- );
+import {
+ createColumnHelper,
+ flexRender,
+ getCoreRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
- const {
- getTableProps,
- getTableBodyProps,
- headerGroups,
- page,
- prepareRow,
- initialState,
- } = tableInstance;
- initialState.pageSize = 5;
+const columnHelper = createColumnHelper();
+// const columns = columnsDataCheck;
+export default function ComplexTable(props) {
+ const { tableData } = props;
+ const [sorting, setSorting] = React.useState([]);
+ let defaultData = tableData;
+ const columns = [
+ columnHelper.accessor("name", {
+ id: "name",
+ header: () => (
+
-
|
-
- {column.render("Header")}
-
- |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } - return ( -- {data} - | - ); - })} -
NAME
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("status", { + id: "status", + header: () => ( ++ STATUS +
+ ), + cell: (info) => ( +
+ {info.getValue() === "Approved" ? (
+
+ ),
+ }),
+ columnHelper.accessor("date", {
+ id: "date",
+ header: () => (
+ + {info.getValue()} +
+DATE
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("progress", { + id: "progress", + header: () => ( ++ PROGRESS +
+ ), + cell: (info) => ( +
+
+
+ ),
+ }),
+ ]; // eslint-disable-next-line
+ const [data, setData] = React.useState(() => [...defaultData]);
+ const table = useReactTable({
+ data,
+ columns,
+ state: {
+ sorting,
+ },
+ onSortingChange: setSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ debugTable: true,
+ });
return (
-
-
+
+
+
-
Complex Table
-
+
-
|
- - {column.render("Header")} - - |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } else if (cell.column.Header === "DATE") { - data = ( -- {data} - | - ); - })} -
NAME
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("tech", { + id: "tech", + header: () => ( +TECH
+ ), + cell: (info) => ( +
+ {info.getValue().map((item, key) => {
+ if (item === "apple") {
+ return (
+
+ ),
+ }),
+ columnHelper.accessor("progress", {
+ id: "progress",
+ header: () => (
+
+
+ );
+ } else if (item === "android") {
+ return (
+
+
+ );
+ } else if (item === "windows") {
+ return (
+
+
+ );
+ } else return null;
+ })}
+ + PROGRESS +
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("date", { + id: "date", + header: () => ( +DATE
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("progress", { + id: "quantity", + header: () => ( ++ QUANTITY +
+ ), + cell: (info) => ( +
+
+ ),
+ }),
+ ]; // eslint-disable-next-line
+ const [data, setData] = React.useState(() => [...defaultData]);
+ const table = useReactTable({
+ data,
+ columns,
+ state: {
+ sorting,
},
- useGlobalFilter,
- useSortBy,
- usePagination
- );
-
- const {
- getTableProps,
- getTableBodyProps,
- headerGroups,
- page,
- prepareRow,
- initialState,
- } = tableInstance;
- initialState.pageSize = 11;
-
+ onSortingChange: setSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ debugTable: true,
+ });
return (
- + {info.getValue()}% +
+ +
-
- Development Table
+
+
+
+
-
+ Check Table
+
-
+
@@ -47,86 +95,63 @@ const CheckTable = (props) => {
|
-
- {column.render("Header")}
-
- |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } else if (cell.column.Header === "DATE") { - data = ( -- {data} - | - ); - })} -
NAME
+ ), + cell: (info) => ( +
+
+ ),
+ }),
+ columnHelper.accessor("progress", {
+ id: "progress",
+ header: () => (
+ + {info.getValue()[0]} +
++ PROGRESS +
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("quantity", { + id: "quantity", + header: () => ( ++ QUANTITY +
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("date", { + id: "date", + header: () => ( +DATE
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + ]; // eslint-disable-next-line + const [data, setData] = React.useState(() => [...defaultData]); + const table = useReactTable({ + data, + columns, + state: { + sorting, }, - useGlobalFilter, - useSortBy, - usePagination - ); - - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState, - } = tableInstance; - initialState.pageSize = 11; - + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true, + }); return (
-
+
- {headerGroups.map((headerGroup, index) => (
-
);
-};
+}
export default CheckTable;
+const columnHelper = createColumnHelper();
diff --git a/src/views/rtl/default/components/ComplexTable.jsx b/src/views/rtl/default/components/ComplexTable.jsx
index 250b7ce..3f20a44 100644
--- a/src/views/rtl/default/components/ComplexTable.jsx
+++ b/src/views/rtl/default/components/ComplexTable.jsx
@@ -1,125 +1,159 @@
+import React from "react";
import CardMenu from "components/card/CardMenu";
import Card from "components/card";
-import {
- useGlobalFilter,
- usePagination,
- useSortBy,
- useTable,
-} from "react-table";
-import { MdCheckCircle, MdCancel, MdOutlineError } from "react-icons/md";
-import { useMemo } from "react";
import Progress from "components/progress";
-const ComplexTable = (props) => {
- const { columnsData, tableData } = props;
-
- const columns = useMemo(() => columnsData, [columnsData]);
- const data = useMemo(() => tableData, [tableData]);
+import { MdCancel, MdCheckCircle, MdOutlineError } from "react-icons/md";
- const tableInstance = useTable(
- {
- columns,
- data,
- },
- useGlobalFilter,
- useSortBy,
- usePagination
- );
+import {
+ createColumnHelper,
+ flexRender,
+ getCoreRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
- const {
- getTableProps,
- getTableBodyProps,
- headerGroups,
- page,
- prepareRow,
- initialState,
- } = tableInstance;
- initialState.pageSize = 5;
+const columnHelper = createColumnHelper();
+// const columns = columnsDataCheck;
+export default function ComplexTable(props) {
+ const { tableData } = props;
+ const [sorting, setSorting] = React.useState([]);
+ let defaultData = tableData;
+ const columns = [
+ columnHelper.accessor("name", {
+ id: "name",
+ header: () => (
+
-
|
-
- {column.render("Header")}
-
- |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } - return ( -- {data} - | - ); - })} -
NAME
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("status", { + id: "status", + header: () => ( ++ STATUS +
+ ), + cell: (info) => ( +
+ {info.getValue() === "Approved" ? (
+
+ ),
+ }),
+ columnHelper.accessor("date", {
+ id: "date",
+ header: () => (
+ + {info.getValue()} +
+DATE
+ ), + cell: (info) => ( ++ {info.getValue()} +
+ ), + }), + columnHelper.accessor("progress", { + id: "progress", + header: () => ( ++ PROGRESS +
+ ), + cell: (info) => ( +
+
+
+ ),
+ }),
+ ]; // eslint-disable-next-line
+ const [data, setData] = React.useState(() => [...defaultData]);
+ const table = useReactTable({
+ data,
+ columns,
+ state: {
+ sorting,
+ },
+ onSortingChange: setSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ debugTable: true,
+ });
return (
-
+
+
-
Complex Table
-
+
|
- - {column.render("Header")} - - |
- ))}
+ {table.getHeaderGroups().map((headerGroup) => (
+ |
|---|---|
|
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {{
+ asc: "",
+ desc: "",
+ }[header.column.getIsSorted()] ?? null}
+
+ |
+ );
+ })}
|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | ); - } else if (cell.column.Header === "DATE") { - data = ( -- {data} - | - ); - })} -