ferns-ui 0.45.2 → 0.45.4

package/dist/Common.d.ts

@@ -1139,6 +1139,26 @@ export interface TableProps {
      * If true, alternate rows will have a light gray background. Defaults to true.
      */
     alternateRowBackground?: boolean;
+    /**
+     * Control sort outside of the Table
+     */
+    sort?: ColumnSortInterface;
+    /**
+     * Set the page outside of the Table
+     */
+    page?: number;
+    /**
+     * Set the page outside of the Table
+     */
+    setPage?: (page: number) => void;
+    /**
+     * If true, the table will render a next page button. Defaults to true.
+     */
+    more?: boolean;
+    /**
+     * Extra controls to render below the table next to pagination
+     */
+    extraControls?: React.ReactElement;
 }
 export interface TableHeaderProps {
     /**
@@ -1188,6 +1208,11 @@ export interface TableRowProps {
      */
     color?: BoxColor;
 }
+export type TableFilters = Record<string, string[]>;
+export type TableSearch = {
+    search: string;
+    field: string;
+};
 export interface TableContextType {
     columns: Array<number | string>;
     hasDrawerContents: boolean;

package/dist/Pagination.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+interface PaginationControlProps {
+    shouldDisableBackButton: boolean;
+    shouldDisableNextButton: boolean;
+    page: number;
+    setPage: (page: number) => void;
+}
+export declare const PaginationControl: ({ shouldDisableBackButton, shouldDisableNextButton, page, setPage, }: PaginationControlProps) => ReactElement;
+export {};

package/dist/Pagination.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Box } from "./Box";
+import { Button } from "./Button";
+import { Text } from "./Text";
+export const PaginationControl = ({ shouldDisableBackButton, shouldDisableNextButton, page, setPage, }) => {
+    return (React.createElement(Box, { direction: "row", paddingY: 2 },
+        React.createElement(Box, null,
+            React.createElement(Button, { color: "blue", disabled: shouldDisableBackButton, text: "Prev Page", onClick: () => setPage(Number(page) - 1) })),
+        React.createElement(Box, { justifyContent: "center", paddingX: 4 },
+            React.createElement(Text, null,
+                "Page: ",
+                page)),
+        React.createElement(Box, null,
+            React.createElement(Button, { color: "blue", disabled: shouldDisableNextButton, text: "Next Page", onClick: () => setPage(Number(page) + 1) }))));
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../src/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAS5B,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,uBAAuB,EACvB,uBAAuB,EACvB,IAAI,EACJ,OAAO,GACgB,EAAgB,EAAE;IACzC,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC;QAC9B,oBAAC,GAAG;YACF,oBAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,uBAAuB,EACjC,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,GAAS,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAC9C,CACE;QACN,oBAAC,GAAG,IAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC;YACtC,oBAAC,IAAI;;gBAAQ,IAAI,CAAQ,CACrB;QACN,oBAAC,GAAG;YACF,oBAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,uBAAuB,EACjC,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,GAAS,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAC9C,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Table.d.ts

@@ -1,3 +1,3 @@
 import React, { ReactElement } from "react";
 import { TableProps } from "./Common";
-export declare const Table: ({ children, columns, borderStyle, alternateRowBackground, maxHeight, stickyHeader, }: TableProps) => React.ReactElement;
+export declare const Table: ({ children, columns, borderStyle, alternateRowBackground, maxHeight, stickyHeader, sort, page: propsPage, setPage: propsSetPage, more, extraControls, }: TableProps) => React.ReactElement;

package/dist/Table.js

@@ -1,9 +1,14 @@
-import React, { Children } from "react";
-import { ScrollView } from "./ScrollView";
+import React, { Children, useEffect } from "react";
+import { ScrollView } from "react-native";
+import { Box } from "./Box";
+import { PaginationControl } from "./Pagination";
 import { TableContextProvider } from "./tableContext";
-export const Table = ({ children, columns, borderStyle, alternateRowBackground = true, maxHeight, stickyHeader = true, }) => {
+export const Table = ({ children, columns, borderStyle, alternateRowBackground = true, maxHeight, stickyHeader = true, sort, page: propsPage, setPage: propsSetPage, more, extraControls, }) => {
     const arrayChildren = Children.toArray(children);
-    const [sortColumn, setSortColumn] = React.useState(undefined);
+    // Check if any of the rows below have a drawerContents prop to see if we need to render space
+    // for the caret.
+    const [sortColumn, setSortColumn] = React.useState(sort);
+    const [page, setPage] = React.useState(propsPage !== null && propsPage !== void 0 ? propsPage : 1);
     // Check if any of the rows below have a drawerContents prop to see if we need to render space
     // for the caret.
     const hasDrawerContents = arrayChildren.some((child) => {
@@ -24,10 +29,23 @@ export const Table = ({ children, columns, borderStyle, alternateRowBackground =
     else {
         width = "100%";
     }
-    return (React.createElement(TableContextProvider, { alternateRowBackground: alternateRowBackground, borderStyle: borderStyle, columns: columns, hasDrawerContents: hasDrawerContents, setSortColumn: setSortColumn, sortColumn: sortColumn, stickyHeader: stickyHeader },
-        React.createElement(ScrollView, { horizontal: true, style: { width, maxWidth: "100%" } },
-            React.createElement(ScrollView, { stickyHeaderIndices: stickyHeader ? [0] : undefined, style: { width, maxWidth: "100%", flex: 1, maxHeight } }, Children.map(children, (child, index) => React.cloneElement(child, {
-                color: index % 2 === 1 && alternateRowBackground ? "lightGray" : "white",
-            }))))));
+    // If propsPage changes in the parent, update the local page state.
+    useEffect(() => {
+        if (propsPage && propsPage !== page) {
+            setPage(propsPage);
+        }
+    }, [page, propsPage]);
+    const shouldPaginate = more || page > 1;
+    return (React.createElement(TableContextProvider, { alternateRowBackground: alternateRowBackground, borderStyle: borderStyle, columns: columns, hasDrawerContents: hasDrawerContents, page: page, setSortColumn: setSortColumn, sortColumn: sortColumn, stickyHeader: stickyHeader },
+        React.createElement(React.Fragment, null,
+            React.createElement(Box, { flex: "grow", maxWidth: "100%", width: width },
+                React.createElement(ScrollView, { horizontal: true, style: { width, maxWidth: "100%" } },
+                    React.createElement(ScrollView, { stickyHeaderIndices: stickyHeader ? [0] : undefined, style: { width, maxWidth: "100%", flex: 1, maxHeight } }, Children.map(children, (child, index) => Boolean(child) &&
+                        React.cloneElement(child, {
+                            color: index % 2 === 1 && alternateRowBackground ? "lightGray" : "white",
+                        }))))),
+            Boolean(shouldPaginate) && (React.createElement(Box, { alignItems: "center", borderTop: "gray", direction: "row", height: 60, paddingX: 8 },
+                React.createElement(PaginationControl, { page: propsPage !== null && propsPage !== void 0 ? propsPage : page, setPage: propsSetPage !== null && propsSetPage !== void 0 ? propsSetPage : setPage, shouldDisableBackButton: (propsPage !== null && propsPage !== void 0 ? propsPage : page) <= 1, shouldDisableNextButton: !more }),
+                Boolean(extraControls) && extraControls)))));
 };
 //# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAe,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAsB,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AAEzE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,sBAAsB,GAAG,IAAI,EAC7B,SAAS,EACT,YAAY,GAAG,IAAI,GACR,EAAsB,EAAE;IACnC,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkC,SAAS,CAAC,CAAC;IAE/F,8FAA8F;IAC9F,iBAAiB;IACjB,MAAM,iBAAiB,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;;QACrD,OAAO,MAAC,KAAsB,CAAC,KAAK,0CAAE,cAAc,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,2FAA2F;IAC3F,6BAA6B;IAC7B,IAAI,KAAqB,CAAC;IAC1B,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,EAAE,CAAC;QAC1D,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACnC,OAAQ,GAAc,GAAI,IAAe,CAAC;QAC5C,CAAC,EAAE,CAAC,CAAW,CAAC;QAChB,IAAI,iBAAiB,EAAE,CAAC;YACtB,KAAK,GAAI,KAAgB,GAAG,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,MAAM,CAAC;IACjB,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,IACnB,sBAAsB,EAAE,sBAAsB,EAC9C,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY;QAE1B,oBAAC,UAAU,IAAC,UAAU,QAAC,KAAK,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAC;YACrD,oBAAC,UAAU,IACT,mBAAmB,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACnD,KAAK,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,IAEnD,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACvC,KAAK,CAAC,YAAY,CAAC,KAAY,EAAE;gBAC/B,KAAK,EAAE,KAAK,GAAG,CAAC,KAAK,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;aACzE,CAAC,CACH,CACU,CACF,CACQ,CACxB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export * from "./Spinner";
 export * from "./SplitPage";
 export * from "./Switch";
 export * from "./Table";
+export * from "./tableContext";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";
 export * from "./TableRow";

package/dist/index.js

@@ -48,6 +48,7 @@ export * from "./Spinner";
 export * from "./SplitPage";
 export * from "./Switch";
 export * from "./Table";
+export * from "./tableContext";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";
 export * from "./TableRow";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC"}

package/dist/tableContext.d.ts

@@ -1,21 +1,5 @@
 import React from "react";
-export interface ColumnSortInterface {
-    column: number | undefined;
-    direction: "asc" | "desc" | undefined;
-}
-interface TableContextType {
-    columns: Array<number | string>;
-    hasDrawerContents: boolean;
-    sortColumn?: ColumnSortInterface | undefined;
-    setSortColumn?: (sort: ColumnSortInterface | undefined) => void;
-    stickyHeader?: boolean;
-    borderStyle?: "sm" | "none";
-    alternateRowBackground?: boolean;
-}
-interface Props extends TableContextType {
-    children: React.ReactElement;
-}
+import { TableContextProviderProps, TableContextType } from "./Common";
 export declare const Provider: React.Provider<TableContextType>;
-export declare const TableContextProvider: ({ children, columns, hasDrawerContents, sortColumn, setSortColumn, stickyHeader, borderStyle, alternateRowBackground, }: Props) => React.ReactElement<typeof Provider>;
+export declare const TableContextProvider: ({ children, columns, hasDrawerContents, sortColumn, setSortColumn, stickyHeader, borderStyle, alternateRowBackground, page, }: TableContextProviderProps) => React.ReactElement<typeof Provider>;
 export declare function useTableContext(): TableContextType;
-export {};

package/dist/tableContext.js

@@ -7,9 +7,10 @@ const TableContext = createContext({
     stickyHeader: true,
     borderStyle: "sm",
     alternateRowBackground: true,
+    page: 1,
 });
 export const { Provider } = TableContext;
-export const TableContextProvider = ({ children, columns, hasDrawerContents, sortColumn, setSortColumn, stickyHeader, borderStyle, alternateRowBackground, }) => {
+export const TableContextProvider = ({ children, columns, hasDrawerContents, sortColumn, setSortColumn, stickyHeader, borderStyle, alternateRowBackground, page, }) => {
     return (React.createElement(Provider, { value: {
             columns,
             alternateRowBackground,
@@ -18,6 +19,7 @@ export const TableContextProvider = ({ children, columns, hasDrawerContents, sor
             sortColumn,
             setSortColumn,
             stickyHeader,
+            page,
         } }, children));
 };
 export function useTableContext() {

package/dist/tableContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableContext.js","sourceRoot":"","sources":["../src/tableContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAU,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAqBhE,MAAM,YAAY,GAA8B,aAAa,CAAmB;IAC9E,OAAO,EAAE,EAAE;IACX,iBAAiB,EAAE,KAAK;IACxB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,sBAAsB,EAAE,IAAI;CAC7B,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,YAAY,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,WAAW,EACX,sBAAsB,GAChB,EAAuC,EAAE;IAC/C,OAAO,CACL,oBAAC,QAAQ,IACP,KAAK,EAAE;YACL,OAAO;YACP,sBAAsB;YACtB,WAAW;YACX,iBAAiB;YACjB,UAAU;YACV,aAAa;YACb,YAAY;SACb,IAEA,QAAQ,CACA,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe;IAC7B,MAAM,EACJ,OAAO,EACP,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,WAAW,GACZ,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7B,OAAO;QACL,OAAO;QACP,iBAAiB;QACjB,aAAa;QACb,UAAU;QACV,YAAY;QACZ,sBAAsB;QACtB,WAAW;KACZ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"tableContext.js","sourceRoot":"","sources":["../src/tableContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAU,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAIhE,MAAM,YAAY,GAA8B,aAAa,CAAmB;IAC9E,OAAO,EAAE,EAAE;IACX,iBAAiB,EAAE,KAAK;IACxB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,sBAAsB,EAAE,IAAI;IAC5B,IAAI,EAAE,CAAC;CACR,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,YAAY,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,IAAI,GACsB,EAAuC,EAAE;IACnE,OAAO,CACL,oBAAC,QAAQ,IACP,KAAK,EAAE;YACL,OAAO;YACP,sBAAsB;YACtB,WAAW;YACX,iBAAiB;YACjB,UAAU;YACV,aAAa;YACb,YAAY;YACZ,IAAI;SACL,IAEA,QAAQ,CACA,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe;IAC7B,MAAM,EACJ,OAAO,EACP,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,WAAW,GACZ,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7B,OAAO;QACL,OAAO;QACP,iBAAiB;QACjB,aAAa;QACb,UAAU;QACV,YAAY;QACZ,sBAAsB;QACtB,WAAW;KACZ,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.45.2",
+  "version": "0.45.4",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/Common.ts

@@ -2945,6 +2945,27 @@ export interface TableProps {
    * If true, alternate rows will have a light gray background. Defaults to true.
    */
   alternateRowBackground?: boolean;
+
+  /**
+   * Control sort outside of the Table
+   */
+  sort?: ColumnSortInterface;
+  /**
+   * Set the page outside of the Table
+   */
+  page?: number;
+  /**
+   * Set the page outside of the Table
+   */
+  setPage?: (page: number) => void;
+  /**
+   * If true, the table will render a next page button. Defaults to true.
+   */
+  more?: boolean;
+  /**
+   * Extra controls to render below the table next to pagination
+   */
+  extraControls?: React.ReactElement;
 }
 
 export interface TableHeaderProps {
@@ -2998,6 +3019,10 @@ export interface TableRowProps {
   color?: BoxColor;
 }
 
+export type TableFilters = Record<string, string[]>;
+
+export type TableSearch = {search: string; field: string};
+
 export interface TableContextType {
   columns: Array<number | string>;
   hasDrawerContents: boolean;

package/src/Pagination.tsx

@@ -0,0 +1,43 @@
+import React, {ReactElement} from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {Text} from "./Text";
+
+interface PaginationControlProps {
+  shouldDisableBackButton: boolean;
+  shouldDisableNextButton: boolean;
+  page: number;
+  setPage: (page: number) => void;
+}
+
+export const PaginationControl = ({
+  shouldDisableBackButton,
+  shouldDisableNextButton,
+  page,
+  setPage,
+}: PaginationControlProps): ReactElement => {
+  return (
+    <Box direction="row" paddingY={2}>
+      <Box>
+        <Button
+          color="blue"
+          disabled={shouldDisableBackButton}
+          text="Prev Page"
+          onClick={(): void => setPage(Number(page) - 1)}
+        />
+      </Box>
+      <Box justifyContent="center" paddingX={4}>
+        <Text>Page: {page}</Text>
+      </Box>
+      <Box>
+        <Button
+          color="blue"
+          disabled={shouldDisableNextButton}
+          text="Next Page"
+          onClick={(): void => setPage(Number(page) + 1)}
+        />
+      </Box>
+    </Box>
+  );
+};

package/src/Table.tsx

@@ -1,9 +1,11 @@
-import React, {Children, ReactElement} from "react";
+import React, {Children, ReactElement, useEffect} from "react";
+import {ScrollView} from "react-native";
 import {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
 
-import {TableProps} from "./Common";
-import {ScrollView} from "./ScrollView";
-import {ColumnSortInterface, TableContextProvider} from "./tableContext";
+import {Box} from "./Box";
+import {ColumnSortInterface, TableProps} from "./Common";
+import {PaginationControl} from "./Pagination";
+import {TableContextProvider} from "./tableContext";
 
 export const Table = ({
   children,
@@ -12,10 +14,18 @@ export const Table = ({
   alternateRowBackground = true,
   maxHeight,
   stickyHeader = true,
+  sort,
+  page: propsPage,
+  setPage: propsSetPage,
+  more,
+  extraControls,
 }: TableProps): React.ReactElement => {
   const arrayChildren = Children.toArray(children);
-  const [sortColumn, setSortColumn] = React.useState<ColumnSortInterface | undefined>(undefined);
 
+  // Check if any of the rows below have a drawerContents prop to see if we need to render space
+  // for the caret.
+  const [sortColumn, setSortColumn] = React.useState<ColumnSortInterface | undefined>(sort);
+  const [page, setPage] = React.useState<number>(propsPage ?? 1);
   // Check if any of the rows below have a drawerContents prop to see if we need to render space
   // for the caret.
   const hasDrawerContents = arrayChildren.some((child) => {
@@ -36,28 +46,56 @@ export const Table = ({
     width = "100%";
   }
 
+  // If propsPage changes in the parent, update the local page state.
+  useEffect(() => {
+    if (propsPage && propsPage !== page) {
+      setPage(propsPage);
+    }
+  }, [page, propsPage]);
+
+  const shouldPaginate = more || page > 1;
+
   return (
     <TableContextProvider
       alternateRowBackground={alternateRowBackground}
       borderStyle={borderStyle}
       columns={columns}
       hasDrawerContents={hasDrawerContents}
+      page={page}
       setSortColumn={setSortColumn}
       sortColumn={sortColumn}
       stickyHeader={stickyHeader}
     >
-      <ScrollView horizontal style={{width, maxWidth: "100%"}}>
-        <ScrollView
-          stickyHeaderIndices={stickyHeader ? [0] : undefined}
-          style={{width, maxWidth: "100%", flex: 1, maxHeight}}
-        >
-          {Children.map(children, (child, index) =>
-            React.cloneElement(child as any, {
-              color: index % 2 === 1 && alternateRowBackground ? "lightGray" : "white",
-            })
-          )}
-        </ScrollView>
-      </ScrollView>
+      <>
+        <Box flex="grow" maxWidth="100%" width={width}>
+          <ScrollView horizontal style={{width, maxWidth: "100%"}}>
+            <ScrollView
+              stickyHeaderIndices={stickyHeader ? [0] : undefined}
+              style={{width, maxWidth: "100%", flex: 1, maxHeight}}
+            >
+              {Children.map(
+                children,
+                (child, index) =>
+                  Boolean(child) &&
+                  React.cloneElement(child as any, {
+                    color: index % 2 === 1 && alternateRowBackground ? "lightGray" : "white",
+                  })
+              )}
+            </ScrollView>
+          </ScrollView>
+        </Box>
+        {Boolean(shouldPaginate) && (
+          <Box alignItems="center" borderTop="gray" direction="row" height={60} paddingX={8}>
+            <PaginationControl
+              page={propsPage ?? page}
+              setPage={propsSetPage ?? setPage}
+              shouldDisableBackButton={(propsPage ?? page) <= 1}
+              shouldDisableNextButton={!more}
+            />
+            {Boolean(extraControls) && extraControls}
+          </Box>
+        )}
+      </>
     </TableContextProvider>
   );
 };

package/src/index.tsx

@@ -48,6 +48,7 @@ export * from "./Spinner";
 export * from "./SplitPage";
 export * from "./Switch";
 export * from "./Table";
+export * from "./tableContext";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";
 export * from "./TableRow";

package/src/tableContext.tsx

@@ -1,23 +1,6 @@
 import React, {Context, createContext, useContext} from "react";
 
-export interface ColumnSortInterface {
-  column: number | undefined;
-  direction: "asc" | "desc" | undefined;
-}
-
-interface TableContextType {
-  columns: Array<number | string>;
-  hasDrawerContents: boolean;
-  sortColumn?: ColumnSortInterface | undefined;
-  setSortColumn?: (sort: ColumnSortInterface | undefined) => void;
-  stickyHeader?: boolean;
-  borderStyle?: "sm" | "none";
-  alternateRowBackground?: boolean;
-}
-
-interface Props extends TableContextType {
-  children: React.ReactElement;
-}
+import {TableContextProviderProps, TableContextType} from "./Common";
 
 const TableContext: Context<TableContextType> = createContext<TableContextType>({
   columns: [],
@@ -27,6 +10,7 @@ const TableContext: Context<TableContextType> = createContext<TableContextType>(
   stickyHeader: true,
   borderStyle: "sm",
   alternateRowBackground: true,
+  page: 1,
 });
 
 export const {Provider} = TableContext;
@@ -40,7 +24,8 @@ export const TableContextProvider = ({
   stickyHeader,
   borderStyle,
   alternateRowBackground,
-}: Props): React.ReactElement<typeof Provider> => {
+  page,
+}: TableContextProviderProps): React.ReactElement<typeof Provider> => {
   return (
     <Provider
       value={{
@@ -51,6 +36,7 @@ export const TableContextProvider = ({
         sortColumn,
         setSortColumn,
         stickyHeader,
+        page,
       }}
     >
       {children}