@orbe-agro/client-core 5.5.82 → 5.6.0

package/lib/@ecme/views/ui-components/data-display/Table/Sorting.tsx

@@ -1,173 +1,173 @@
-import { useState } from 'react'
-import Table from '@/components/ui/Table'
-import {
-    flexRender,
-    getCoreRowModel,
-    getSortedRowModel,
-    useReactTable,
-} from '@tanstack/react-table'
-import type { ColumnDef, ColumnSort } from '@tanstack/react-table'
-
-type Person = {
-    firstName: string
-    lastName: string
-    age: number
-    visits: number
-    progress: number
-    status: string
-}
-
-const columns: ColumnDef<Person>[] = [
-    {
-        header: 'First Name',
-        accessorKey: 'firstName',
-    },
-    {
-        header: 'Last Name',
-        accessorKey: 'lastName',
-    },
-    {
-        header: 'Age',
-        accessorKey: 'age',
-    },
-    {
-        header: 'Visits',
-        accessorKey: 'visits',
-    },
-    {
-        header: 'Status',
-        accessorKey: 'status',
-    },
-    {
-        header: 'Profile Progress',
-        accessorKey: 'progress',
-    },
-]
-
-const data = [
-    {
-        firstName: 'Maria',
-        lastName: 'Anders',
-        age: 24,
-        visits: 28,
-        progress: 56,
-        status: 'complicated',
-    },
-    {
-        firstName: 'Francisco',
-        lastName: 'Chang',
-        age: 9,
-        visits: 90,
-        progress: 77,
-        status: 'single',
-    },
-    {
-        firstName: 'Roland',
-        lastName: 'Mendel',
-        age: 1,
-        visits: 16,
-        progress: 56,
-        status: 'single',
-    },
-    {
-        firstName: 'Helen',
-        lastName: 'Bennett',
-        age: 43,
-        visits: 94,
-        progress: 53,
-        status: 'single',
-    },
-    {
-        firstName: 'Yoshi ',
-        lastName: 'Tannamuri',
-        age: 37,
-        visits: 85,
-        progress: 28,
-        status: 'single',
-    },
-]
-
-const { Tr, Th, Td, THead, TBody, Sorter } = Table
-
-const Sorting = () => {
-    const [sorting, setSorting] = useState<ColumnSort[]>([])
-
-    const table = useReactTable({
-        data,
-        columns,
-        state: {
-            sorting,
-        },
-        onSortingChange: setSorting,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-    })
-
-    return (
-        <>
-            <Table>
-                <THead>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                        <Tr key={headerGroup.id}>
-                            {headerGroup.headers.map((header) => {
-                                return (
-                                    <Th
-                                        key={header.id}
-                                        colSpan={header.colSpan}
-                                    >
-                                        {header.isPlaceholder ? null : (
-                                            <div
-                                                {...{
-                                                    className:
-                                                        header.column.getCanSort()
-                                                            ? 'cursor-pointer select-none'
-                                                            : '',
-                                                    onClick:
-                                                        header.column.getToggleSortingHandler(),
-                                                }}
-                                            >
-                                                {flexRender(
-                                                    header.column.columnDef
-                                                        .header,
-                                                    header.getContext(),
-                                                )}
-                                                {
-                                                    <Sorter
-                                                        sort={header.column.getIsSorted()}
-                                                    />
-                                                }
-                                            </div>
-                                        )}
-                                    </Th>
-                                )
-                            })}
-                        </Tr>
-                    ))}
-                </THead>
-                <TBody>
-                    {table
-                        .getRowModel()
-                        .rows.slice(0, 10)
-                        .map((row) => {
-                            return (
-                                <Tr key={row.id}>
-                                    {row.getVisibleCells().map((cell) => {
-                                        return (
-                                            <Td key={cell.id}>
-                                                {flexRender(
-                                                    cell.column.columnDef.cell,
-                                                    cell.getContext(),
-                                                )}
-                                            </Td>
-                                        )
-                                    })}
-                                </Tr>
-                            )
-                        })}
-                </TBody>
-            </Table>
-        </>
-    )
-}
-
-export default Sorting
+import { useState } from 'react'
+import Table from '@/components/ui/Table'
+import {
+    flexRender,
+    getCoreRowModel,
+    getSortedRowModel,
+    useReactTable,
+} from '@tanstack/react-table'
+import type { ColumnDef, ColumnSort } from '@tanstack/react-table'
+
+type Person = {
+    firstName: string
+    lastName: string
+    age: number
+    visits: number
+    progress: number
+    status: string
+}
+
+const columns: ColumnDef<Person>[] = [
+    {
+        header: 'First Name',
+        accessorKey: 'firstName',
+    },
+    {
+        header: 'Last Name',
+        accessorKey: 'lastName',
+    },
+    {
+        header: 'Age',
+        accessorKey: 'age',
+    },
+    {
+        header: 'Visits',
+        accessorKey: 'visits',
+    },
+    {
+        header: 'Status',
+        accessorKey: 'status',
+    },
+    {
+        header: 'Profile Progress',
+        accessorKey: 'progress',
+    },
+]
+
+const data = [
+    {
+        firstName: 'Maria',
+        lastName: 'Anders',
+        age: 24,
+        visits: 28,
+        progress: 56,
+        status: 'complicated',
+    },
+    {
+        firstName: 'Francisco',
+        lastName: 'Chang',
+        age: 9,
+        visits: 90,
+        progress: 77,
+        status: 'single',
+    },
+    {
+        firstName: 'Roland',
+        lastName: 'Mendel',
+        age: 1,
+        visits: 16,
+        progress: 56,
+        status: 'single',
+    },
+    {
+        firstName: 'Helen',
+        lastName: 'Bennett',
+        age: 43,
+        visits: 94,
+        progress: 53,
+        status: 'single',
+    },
+    {
+        firstName: 'Yoshi ',
+        lastName: 'Tannamuri',
+        age: 37,
+        visits: 85,
+        progress: 28,
+        status: 'single',
+    },
+]
+
+const { Tr, Th, Td, THead, TBody, Sorter } = Table
+
+const Sorting = () => {
+    const [sorting, setSorting] = useState<ColumnSort[]>([])
+
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+        },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+    })
+
+    return (
+        <>
+            <Table>
+                <THead>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <Tr key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <Th
+                                        key={header.id}
+                                        colSpan={header.colSpan}
+                                    >
+                                        {header.isPlaceholder ? null : (
+                                            <div
+                                                {...{
+                                                    className:
+                                                        header.column.getCanSort()
+                                                            ? 'cursor-pointer select-none'
+                                                            : '',
+                                                    onClick:
+                                                        header.column.getToggleSortingHandler(),
+                                                }}
+                                            >
+                                                {flexRender(
+                                                    header.column.columnDef
+                                                        .header,
+                                                    header.getContext(),
+                                                )}
+                                                {
+                                                    <Sorter
+                                                        sort={header.column.getIsSorted()}
+                                                    />
+                                                }
+                                            </div>
+                                        )}
+                                    </Th>
+                                )
+                            })}
+                        </Tr>
+                    ))}
+                </THead>
+                <TBody>
+                    {table
+                        .getRowModel()
+                        .rows.slice(0, 10)
+                        .map((row) => {
+                            return (
+                                <Tr key={row.id}>
+                                    {row.getVisibleCells().map((cell) => {
+                                        return (
+                                            <Td key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext(),
+                                                )}
+                                            </Td>
+                                        )
+                                    })}
+                                </Tr>
+                            )
+                        })}
+                </TBody>
+            </Table>
+        </>
+    )
+}
+
+export default Sorting

package/lib/@ecme/views/ui-components/data-display/Table/SubComponent.tsx

@@ -1,164 +1,164 @@
-import { useMemo, Fragment } from 'react'
-import Table from '@/components/ui/Table'
-import {
-    useReactTable,
-    getCoreRowModel,
-    getExpandedRowModel,
-    flexRender,
-} from '@tanstack/react-table'
-import { dataWithSubRows } from './data'
-import { HiOutlineChevronRight, HiOutlineChevronDown } from 'react-icons/hi'
-import type { PersonWithSubRow } from './data'
-import type { ColumnDef, Row } from '@tanstack/react-table'
-import type { ReactElement } from 'react'
-
-type ReactTableProps<T> = {
-    renderRowSubComponent: (props: { row: Row<T> }) => ReactElement
-    getRowCanExpand: (row: Row<T>) => boolean
-}
-
-const { Tr, Th, Td, THead, TBody } = Table
-
-function ReactTable({
-    renderRowSubComponent,
-    getRowCanExpand,
-}: ReactTableProps<PersonWithSubRow>) {
-    const columns = useMemo<ColumnDef<PersonWithSubRow>[]>(
-        () => [
-            {
-                // Make an expander cell
-                header: () => null, // No header
-                id: 'expander', // It needs an ID
-                cell: ({ row }) => (
-                    <>
-                        {row.getCanExpand() ? (
-                            <button
-                                className="text-lg"
-                                {...{ onClick: row.getToggleExpandedHandler() }}
-                            >
-                                {row.getIsExpanded() ? (
-                                    <HiOutlineChevronDown />
-                                ) : (
-                                    <HiOutlineChevronRight />
-                                )}
-                            </button>
-                        ) : null}
-                    </>
-                ),
-                // We can override the cell renderer with a SubCell to be used with an expanded row
-                subCell: () => null, // No expander on an expanded row
-            },
-            {
-                header: 'First Name',
-                accessorKey: 'firstName',
-            },
-            {
-                header: 'Last Name',
-                accessorKey: 'lastName',
-            },
-            {
-                header: 'Age',
-                accessorKey: 'age',
-            },
-            {
-                header: 'Visits',
-                accessorKey: 'visits',
-            },
-            {
-                header: 'Status',
-                accessorKey: 'status',
-            },
-            {
-                header: 'Profile Progress',
-                accessorKey: 'progress',
-            },
-        ],
-        [],
-    )
-
-    const table = useReactTable({
-        data: dataWithSubRows,
-        columns,
-        getRowCanExpand,
-        getCoreRowModel: getCoreRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-    })
-
-    return (
-        <>
-            <Table>
-                <THead>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                        <Tr key={headerGroup.id}>
-                            {headerGroup.headers.map((header) => {
-                                return (
-                                    <Th
-                                        key={header.id}
-                                        colSpan={header.colSpan}
-                                    >
-                                        {flexRender(
-                                            header.column.columnDef.header,
-                                            header.getContext(),
-                                        )}
-                                    </Th>
-                                )
-                            })}
-                        </Tr>
-                    ))}
-                </THead>
-                <TBody>
-                    {table.getRowModel().rows.map((row) => {
-                        return (
-                            <Fragment key={row.id}>
-                                <Tr>
-                                    {/* first row is a normal row */}
-                                    {row.getVisibleCells().map((cell) => {
-                                        return (
-                                            <td key={cell.id}>
-                                                {flexRender(
-                                                    cell.column.columnDef.cell,
-                                                    cell.getContext(),
-                                                )}
-                                            </td>
-                                        )
-                                    })}
-                                </Tr>
-                                {row.getIsExpanded() && (
-                                    <Tr>
-                                        {/* 2nd row is a custom 1 cell row */}
-                                        <Td
-                                            colSpan={
-                                                row.getVisibleCells().length
-                                            }
-                                        >
-                                            {renderRowSubComponent({ row })}
-                                        </Td>
-                                    </Tr>
-                                )}
-                            </Fragment>
-                        )
-                    })}
-                </TBody>
-            </Table>
-        </>
-    )
-}
-
-const renderSubComponent = ({ row }: { row: Row<PersonWithSubRow> }) => {
-    return (
-        <pre style={{ fontSize: '10px' }}>
-            <code>{JSON.stringify(row.original, null, 2)}</code>
-        </pre>
-    )
-}
-
-const SubComponent = () => {
-    return (
-        <ReactTable
-            renderRowSubComponent={renderSubComponent}
-            getRowCanExpand={() => true}
-        />
-    )
-}
-
-export default SubComponent
+import { useMemo, Fragment } from 'react'
+import Table from '@/components/ui/Table'
+import {
+    useReactTable,
+    getCoreRowModel,
+    getExpandedRowModel,
+    flexRender,
+} from '@tanstack/react-table'
+import { dataWithSubRows } from './data'
+import { HiOutlineChevronRight, HiOutlineChevronDown } from 'react-icons/hi'
+import type { PersonWithSubRow } from './data'
+import type { ColumnDef, Row } from '@tanstack/react-table'
+import type { ReactElement } from 'react'
+
+type ReactTableProps<T> = {
+    renderRowSubComponent: (props: { row: Row<T> }) => ReactElement
+    getRowCanExpand: (row: Row<T>) => boolean
+}
+
+const { Tr, Th, Td, THead, TBody } = Table
+
+function ReactTable({
+    renderRowSubComponent,
+    getRowCanExpand,
+}: ReactTableProps<PersonWithSubRow>) {
+    const columns = useMemo<ColumnDef<PersonWithSubRow>[]>(
+        () => [
+            {
+                // Make an expander cell
+                header: () => null, // No header
+                id: 'expander', // It needs an ID
+                cell: ({ row }) => (
+                    <>
+                        {row.getCanExpand() ? (
+                            <button
+                                className="text-lg"
+                                {...{ onClick: row.getToggleExpandedHandler() }}
+                            >
+                                {row.getIsExpanded() ? (
+                                    <HiOutlineChevronDown />
+                                ) : (
+                                    <HiOutlineChevronRight />
+                                )}
+                            </button>
+                        ) : null}
+                    </>
+                ),
+                // We can override the cell renderer with a SubCell to be used with an expanded row
+                subCell: () => null, // No expander on an expanded row
+            },
+            {
+                header: 'First Name',
+                accessorKey: 'firstName',
+            },
+            {
+                header: 'Last Name',
+                accessorKey: 'lastName',
+            },
+            {
+                header: 'Age',
+                accessorKey: 'age',
+            },
+            {
+                header: 'Visits',
+                accessorKey: 'visits',
+            },
+            {
+                header: 'Status',
+                accessorKey: 'status',
+            },
+            {
+                header: 'Profile Progress',
+                accessorKey: 'progress',
+            },
+        ],
+        [],
+    )
+
+    const table = useReactTable({
+        data: dataWithSubRows,
+        columns,
+        getRowCanExpand,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+    })
+
+    return (
+        <>
+            <Table>
+                <THead>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <Tr key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <Th
+                                        key={header.id}
+                                        colSpan={header.colSpan}
+                                    >
+                                        {flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext(),
+                                        )}
+                                    </Th>
+                                )
+                            })}
+                        </Tr>
+                    ))}
+                </THead>
+                <TBody>
+                    {table.getRowModel().rows.map((row) => {
+                        return (
+                            <Fragment key={row.id}>
+                                <Tr>
+                                    {/* first row is a normal row */}
+                                    {row.getVisibleCells().map((cell) => {
+                                        return (
+                                            <td key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext(),
+                                                )}
+                                            </td>
+                                        )
+                                    })}
+                                </Tr>
+                                {row.getIsExpanded() && (
+                                    <Tr>
+                                        {/* 2nd row is a custom 1 cell row */}
+                                        <Td
+                                            colSpan={
+                                                row.getVisibleCells().length
+                                            }
+                                        >
+                                            {renderRowSubComponent({ row })}
+                                        </Td>
+                                    </Tr>
+                                )}
+                            </Fragment>
+                        )
+                    })}
+                </TBody>
+            </Table>
+        </>
+    )
+}
+
+const renderSubComponent = ({ row }: { row: Row<PersonWithSubRow> }) => {
+    return (
+        <pre style={{ fontSize: '10px' }}>
+            <code>{JSON.stringify(row.original, null, 2)}</code>
+        </pre>
+    )
+}
+
+const SubComponent = () => {
+    return (
+        <ReactTable
+            renderRowSubComponent={renderSubComponent}
+            getRowCanExpand={() => true}
+        />
+    )
+}
+
+export default SubComponent