@propellerads/table 4.2.0 → 4.3.2

package/dist/types.d.ts

@@ -26,7 +26,7 @@ export declare type PaginationProps = {
     gotoPage: (page: number) => void;
 };
 export declare type ControlledPagination = {
-    paginationAmount: string | ReactNode | ReactElement;
+    paginationAmount?: string | ReactNode | ReactElement;
     pageSize: number;
     pageIndex: number;
     pageCount: number;
@@ -61,6 +61,7 @@ export declare type TableProps = {
     getFooterGroupProps?: ElementGetter;
     showLoadingState?: boolean;
     LoadingCellComponent?: FunctionComponent<DefaultObject>;
+    noDataMessage?: string | ReactElement;
 };
 export declare type TableOptions = {
     columns: Array<Column<DefaultObject>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propellerads/table",
-  "version": "4.2.0",
+  "version": "4.3.2",
   "repository": "https://github.com/propellerads/ui-components",
   "author": "i.pasyuk@propellerads.net",
   "license": "MIT",
@@ -41,5 +41,5 @@
     "@types/react-table": "^7.7.12",
     "react-table": "^7.8.0"
   },
-  "gitHead": "c091a2a2bbecfaac3f7f75fdfc234d0023e7433a"
+  "gitHead": "258e659f14a8f803795b18b0f2771c04e0a7d2e6"
 }

package/src/index.tsx

@@ -9,7 +9,7 @@ import {
   useTable,
   useRowSelect,
   usePagination,
-  useBlockLayout,
+  useFlexLayout,
   Column,
 } from 'react-table';
 
@@ -76,6 +76,7 @@ export const defaultProps = {
   showLoadingState: false,
   LoadingCellComponent: EmptyStateCell,
   getRowPreProps: () => ({}),
+  noDataMessage: '',
 };
 
 type DefaultProps = Readonly<typeof defaultProps>;
@@ -147,6 +148,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     getFooterProps,
     getFooterGroupProps,
     showLoadingState,
+    noDataMessage,
   } = props;
 
   const memoColumns = useMemo(() => columns, [columns]);
@@ -245,7 +247,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     ...rest
   } = useTable(
     options,
-    useBlockLayout,
+    useFlexLayout,
     useSortBy,
     usePagination,
     useRowSelect,
@@ -355,7 +357,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
     delete headerProps?.style;
 
-    if (hasManualSortBy && !column.canSort && headerProps) {
+    if (hasManualSortBy && column.canSort && headerProps) {
       headerProps.onClick = () => {
         onSortedChange?.(column.id, Boolean(column.isSortedDesc));
         setSortBy([{
@@ -371,25 +373,26 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
   const tBodyTr = (hasControlledPagination || hasDefaultPagination) ? page : rows;
 
   return (
-    <TableRoot>
-      <TableLoading isLoading={!showLoadingState && isLoading}>
+    <TableRoot className="table-root">
+      <TableLoading isLoading={!showLoadingState && isLoading} className="table-loading">
         <TableLoadingInner>
           {loadingMessage}
         </TableLoadingInner>
       </TableLoading>
-      <TableWrapper ref={tableWrapperRef}>
-        <TableContent id={tableContentId}>
+      <TableWrapper ref={tableWrapperRef} className="table-wrapper">
+        <TableContent id={tableContentId} className="table-content">
           <TableCore {..._getTableProps(getTableBodyProps(getTableProps))} ref={tableRef}>
-            <THead>
+            <THead className="table-head">
               {headerGroups.map((headerGroup) => (
                 <TR {...headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))}>
                   {headerGroup.headers.map((column) => {
                     const headerProps = extendSortByProps(column) as DefaultObject;
 
                     return (
-                      <TH {...column.getHeaderProps(getTableElementInternalProps(
-                        headerProps, getHeaderProps, mainCellGetter,
-                      ))}
+                      <TH
+                        {...column.getHeaderProps(getTableElementInternalProps(
+                          headerProps, getHeaderProps, mainCellGetter,
+                        ))}
                       >
                         {getHeadContent(column)}
                       </TH>
@@ -399,7 +402,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
               ))}
             </THead>
             {footerPlacement.includes(FOOTER_PLACEMENT.TOP) && (
-              <TFoot>
+              <TFoot className="table-footer-top">
                 {footerGroups.map((group) => (
                   <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
                     {group.headers.map((column) => (
@@ -411,7 +414,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
                 ))}
               </TFoot>
             )}
-            <TBody>
+            <TBody className="table-body">
               {tBodyTr.map((row: StandardRow) => {
                 prepareRow(row);
                 const {isDelimiterTd} = getRowPreProps(row);
@@ -445,7 +448,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
               })}
             </TBody>
             {footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && (
-              <TFoot>
+              <TFoot className="table-footer-bottom">
                 {footerGroups.map((group) => (
                   <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
                     {group.headers.map((column) => (
@@ -460,6 +463,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
           </TableCore>
         </TableContent>
       </TableWrapper>
+      {!isLoading && !data.length && noDataMessage}
       {pagination}
     </TableRoot>
   );

package/src/style.tsx

@@ -121,7 +121,6 @@ export const TableCore = styled.div`
   flex-direction: column;
   align-items: stretch; 
   border-collapse: collapse;
-  width: max-content;
 `;
 
 export const HeadCell = styled.div`
@@ -180,11 +179,11 @@ export const TRGroup = styled.div`
   display: flex;
   flex: 1 0 auto;
   box-shadow: inset 0 -1px 0 0 ${gray95};
+  min-width: 100%;
+  width: max-content;
 `;
 
 export const TR = styled.div`
-  flex: 1 0 auto;
-  display: inline-flex;
   padding: 0;
   -webkit-box-align: center;
   align-items: center;
@@ -193,6 +192,8 @@ export const TR = styled.div`
 export const TBody = styled.div`
   border-top: 1px solid ${gray80};
   margin-top: ${spacing * 2}px;
+  min-width: 100%;
+  width: max-content;
 `;
 
 export const TFoot = styled.div`

package/src/types.tsx

@@ -51,7 +51,7 @@ export type PaginationProps = {
 }
 
 export type ControlledPagination = {
-    paginationAmount: string | ReactNode | ReactElement,
+    paginationAmount?: string | ReactNode | ReactElement,
     pageSize: number,
     pageIndex: number,
     pageCount: number,
@@ -83,7 +83,8 @@ export type TableProps = {
     getFooterProps?: ElementGetter,
     getFooterGroupProps?: ElementGetter,
     showLoadingState?: boolean,
-    LoadingCellComponent?: FunctionComponent<DefaultObject>
+    LoadingCellComponent?: FunctionComponent<DefaultObject>,
+    noDataMessage?: string | ReactElement
 }
 
 export type TableOptions = {

package/src/useLoadingState.tsx

@@ -1,4 +1,4 @@
-import {FunctionComponent, useMemo} from 'react';
+import React, {FunctionComponent, useMemo} from 'react';
 import {Column} from 'react-table';
 import {DefaultObject, LoadingState} from './types';
 
@@ -12,7 +12,7 @@ const useLoadingState = (
   const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(() => (showLoadingState && loading ? columns
     .map(({maxWidth, width, Header}: Column, key: number) => {
       const column: Column<DefaultObject> = {
-        Cell: LoadingCellComponent,
+        Cell: () => <LoadingCellComponent />,
         accessor: `empty_${key}`,
       };
       if (maxWidth) {