react-bootstrap-table-ng-example 4.19.0 → 4.19.2

package/src/stories/Remote.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-anonymous-default-export */
-import PropTypes from "prop-types";
+
 import React from "react";
 
 import BootstrapTable from "../../../react-bootstrap-table-ng";
@@ -8,9 +8,13 @@ import filterFactory, {
   LIKE,
   textFilter,
 } from "../../../react-bootstrap-table-ng-filter";
-import paginationFactory from "../../../react-bootstrap-table-ng-paginator";
+import overlayFactory from "../../../react-bootstrap-table-ng-overlay";
+import paginationFactory, {
+  PaginationProvider, PaginationListStandalone,
+  PaginationTotalStandalone, SizePerPageDropdownStandalone
+} from "../../../react-bootstrap-table-ng-paginator";
 import ToolkitProvider, {
-  Search,
+  Search, CSVExport
 } from "../../../react-bootstrap-table-ng-toolkit";
 import Code from "../components/common/code-block";
 import { productsGenerator } from "../utils/common";
@@ -117,7 +121,12 @@ class Container extends React.Component {
 }
 `;
 
-const RemoteSort = (props: any) => (
+interface RemoteSortProps {
+  data: any[];
+  onTableChange: (type: any, context: any) => void;
+}
+
+const RemoteSort = (props: RemoteSortProps) => (
   <div>
     <BootstrapTable
       remote={{ sort: true }}
@@ -130,10 +139,6 @@ const RemoteSort = (props: any) => (
   </div>
 );
 
-RemoteSort.propTypes = {
-  data: PropTypes.array.isRequired,
-  onTableChange: PropTypes.func.isRequired,
-};
 
 interface RemoteSortState {
   data: any;
@@ -278,7 +283,12 @@ class Container extends React.Component {
 }
 `;
 
-const RemoteFilter = (props: any) => (
+interface RemoteFilterProps {
+  data: any[];
+  onTableChange: (type: any, context: any) => void;
+}
+
+const RemoteFilter = (props: RemoteFilterProps) => (
   <div>
     <BootstrapTable
       remote={{ filter: true }}
@@ -292,10 +302,6 @@ const RemoteFilter = (props: any) => (
   </div>
 );
 
-RemoteFilter.propTypes = {
-  data: PropTypes.array.isRequired,
-  onTableChange: PropTypes.func.isRequired,
-};
 
 interface RemoteFilterState {
   data: any;
@@ -399,13 +405,21 @@ class Container extends React.Component {
 }
 `;
 
+interface RemotePaginationProps {
+  data: any[];
+  page: number;
+  totalSize: number;
+  sizePerPage: number;
+  onTableChange: (type: any, context: any) => void;
+}
+
 const RemotePagination = ({
   data,
   page,
   sizePerPage,
   onTableChange,
   totalSize,
-}: any) => (
+}: RemotePaginationProps) => (
   <div>
     <BootstrapTable
       remote
@@ -432,13 +446,6 @@ const RemotePagination = ({
   </div>
 );
 
-RemotePagination.propTypes = {
-  data: PropTypes.array.isRequired,
-  page: PropTypes.number.isRequired,
-  totalSize: PropTypes.number.isRequired,
-  sizePerPage: PropTypes.number.isRequired,
-  onTableChange: PropTypes.func.isRequired,
-};
 
 interface RemotePaginationState {
   data: any;
@@ -585,7 +592,12 @@ class Container extends React.Component {
 }
 `;
 
-const RemoteSearch = (props: any) => (
+interface RemoteSearchProps {
+  data: any[];
+  onTableChange: (type: any, context: any) => void;
+}
+
+const RemoteSearch = (props: RemoteSearchProps) => (
   <div>
     <ToolkitProvider
       keyField="id"
@@ -608,10 +620,6 @@ const RemoteSearch = (props: any) => (
   </div>
 );
 
-RemoteSearch.propTypes = {
-  data: PropTypes.array.isRequired,
-  onTableChange: PropTypes.func.isRequired,
-};
 
 interface RemoteSearchState {
   data: any;
@@ -729,7 +737,13 @@ class Container extends React.Component {
 }
 `;
 
-const RemoteCellEdit = (props: any) => {
+interface RemoteCellEditProps {
+  data: any[];
+  onTableChange: (type: any, context: any) => void;
+  errorMessage: string;
+}
+
+const RemoteCellEdit = (props: RemoteCellEditProps) => {
   const cellEdit = {
     mode: "click",
     errorMessage: props.errorMessage,
@@ -763,11 +777,6 @@ const RemoteCellEdit = (props: any) => {
   );
 };
 
-RemoteCellEdit.propTypes = {
-  data: PropTypes.array.isRequired,
-  onTableChange: PropTypes.func.isRequired,
-  errorMessage: PropTypes.string.isRequired,
-};
 
 interface RemoteCellEditState {
   data: any;
@@ -872,13 +881,6 @@ const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
   </div>
 );
 
-RemoteAll.propTypes = {
-  data: PropTypes.array.isRequired,
-  page: PropTypes.number.isRequired,
-  totalSize: PropTypes.number.isRequired,
-  sizePerPage: PropTypes.number.isRequired,
-  onTableChange: PropTypes.func.isRequired
-};
 
 class Container extends React.Component {
   constructor(props) {
@@ -970,13 +972,21 @@ class Container extends React.Component {
 }
 `;
 
+interface RemoteAllProps {
+  data: any[];
+  page: number;
+  totalSize: number;
+  sizePerPage: number;
+  onTableChange: (type: any, context: any) => void;
+}
+
 const RemoteAll = ({
   data,
   page,
   sizePerPage,
   onTableChange,
   totalSize,
-}: any) => (
+}: RemoteAllProps) => (
   <div>
     <h3>
       When <code>remote.pagination</code> is enabled, the filtering, sorting and
@@ -1024,14 +1034,6 @@ const RemoteAll = ({
   </div>
 );
 
-RemoteAll.propTypes = {
-  data: PropTypes.array.isRequired,
-  page: PropTypes.number.isRequired,
-  totalSize: PropTypes.number.isRequired,
-  sizePerPage: PropTypes.number.isRequired,
-  onTableChange: PropTypes.func.isRequired,
-};
-
 let products = productsGenerator(87);
 
 interface RemoteAllState {
@@ -1132,6 +1134,473 @@ class RemoteAllComponent extends React.Component<{}, RemoteAllState> {
   }
 }
 
+
+const remoteAllExportSourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-ng';
+import cellEditFactory from 'react-bootstrap-table-ng-editor';
+import filterFactory, {
+  LIKE,
+  textFilter,
+} from 'react-bootstrap-table-ng-filter';
+import paginationFactory, { 
+  PaginationProvider, PaginationListStandalone, PaginationTotalStandalone, SizePerPageDropdownStandalone
+} from 'react-bootstrap-table-ng-paginator';
+import ToolkitProvider, {
+  Search, CSVExport 
+} from 'react-bootstrap-table-ng-toolkit';
+// import ... 
+
+const productColumns = [
+  {
+    dataField: "id",
+    text: "Product ID",
+    sort: true,
+  },
+  {
+    dataField: "name",
+    text: "Product Name",
+    filter: textFilter(),
+    sort: true,
+  },
+  {
+    dataField: "price",
+    text: "Product Price",
+    filter: textFilter(),
+    sort: true,
+    hidden: true,
+  },
+];
+
+const { ExportCSVButton } = CSVExport;
+
+//leslint-disable-next-line react/proprtypes
+const CustomToggleList = ({ columns, onColumnToggle, toggles }) => (
+  <div className="btn-group btn-group-toggle" data-toggle="buttons" style={{ marginBottom: '10px' }}>
+    {columns
+      .filter(column => !(column.toggleHidden === true))
+      .map(column => ({
+        ...column,
+        toggle: toggles[column.dataField]
+      }))
+      .map(column => (
+        <button
+          type="button"
+          key={column.dataField}
+          className={\`btn \${column.toggle ? 'btn-primary' : 'btn-default'}\`}
+          data-toggle="button"
+          aria-pressed={column.toggle ? 'true' : 'false'}
+          onClick={() => onColumnToggle(column.dataField)}
+        >
+          {column.text}
+        </button>
+      ))}
+  </div>
+);
+
+const customPaginationTotal = (from: number, to: number, totalSize: number) => (
+  <span className="react-bootstrap-table-pagination-total">
+    {from} to {to} of {totalSize} rows
+  </span>
+);
+
+
+const allExportProducts = productsGenerator(487);
+
+class RemoteAllExportComponent extends React.Component {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: allExportProducts.slice(0, 10),
+      totalSize: allExportProducts.length,
+      sizePerPage: 10,
+      allData: allExportProducts,
+    };
+    this.handleTableChange = this.handleTableChange.bind(this);
+  }
+
+  handleTableChange = (
+    type: any,
+    { page, sizePerPage, filters, sortField, sortOrder, cellEdit }: any
+  ) => {
+    setTimeout(() => {
+      // Handle cell editing
+      if (type === "cellEdit") {
+        const { rowId, dataField, newValue } = cellEdit;
+        products = products.map((row: any) => {
+          if (row.id === rowId) {
+            const newRow = { ...row };
+            newRow[dataField] = newValue;
+            return newRow;
+          }
+          return row;
+        });
+      }
+      let result = allExportProducts;
+      // Handle column filters
+      result = result.filter((row: any) => {
+        let valid = true;
+        for (const dataField in filters) {
+          const { filterVal, filterType, comparator } = filters[dataField];
+
+          if (filterType === "TEXT") {
+            if (comparator === LIKE) {
+              valid = row[dataField].toString().indexOf(filterVal) > -1;
+            } else {
+              valid = row[dataField] === filterVal;
+            }
+          }
+          if (!valid) break;
+        }
+        return valid;
+      });
+      // Handle column sort
+      if (sortOrder === "asc") {
+        result = result.sort((a: any, b: any) => {
+          if (a[sortField] > b[sortField]) {
+            return 1;
+          } else if (b[sortField] > a[sortField]) {
+            return -1;
+          }
+          return 0;
+        });
+      } else {
+        result = result.sort((a: any, b: any) => {
+          if (a[sortField] > b[sortField]) {
+            return -1;
+          } else if (b[sortField] > a[sortField]) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+      this.setState(() => ({
+        page: page,
+        data: result.slice((page - 1) * sizePerPage, page * sizePerPage),
+        totalSize: result.length,
+        sizePerPage: sizePerPage,
+        allData: result,
+      }));
+    }, 2000);
+  };
+
+  handleExport = (onExport: any) => (e: any) => {
+    onExport((this.state as any).allData);
+  };
+
+  render() {
+    return (
+      <ToolkitProvider
+        keyField="id"
+        data={this.state.data}
+        columns={productColumns}
+        search
+        columnToggle
+        exportCSV={{
+          fileName: 'products-export.csv',
+          noAutoBOM: false,
+          blobType: 'text/csv;charset=ansi',
+          data: this.state.allData
+        }}
+      >
+        {props => (
+          <PaginationProvider
+            pagination={paginationFactory({
+              custom: true,
+              page: this.state.page,
+              sizePerPage: this.state.sizePerPage,
+              totalSize: this.state.totalSize,
+              sizePerPageList: [10, 25, 50, 100],
+              showSizePerPage: true,
+              showTotal: true,
+              paginationTotalRenderer: customPaginationTotal,
+            })}
+          >
+            {({ paginationProps, paginationTableProps }) => (
+              <div>
+                <CustomToggleList {...props.columnToggleProps} />
+                <div>
+                  <SizePerPageDropdownStandalone {...paginationProps} />
+                  <PaginationTotalStandalone {...paginationProps} />
+                  <ExportCSVButton {...props.csvProps}
+                    className="btn-warning"
+                    style={{ marginLeft: '20px' }}
+                    onClick={this.handleExport(props.csvProps.onExport)}
+                  >Export CSV</ExportCSVButton>
+                  <PaginationListStandalone {...paginationProps} />
+                </div>
+                <BootstrapTable
+                  remote
+                  striped
+                  hover
+                  condensed
+                  defaultSorted={[
+                    {
+                      dataField: "name",
+                      order: "desc",
+                    },
+                  ]}
+                  {...props.baseProps}
+                  filter={filterFactory()}
+                  overlay={overlayFactory({ spinner: true })}
+                  onTableChange={this.handleTableChange}
+                  cellEdit={cellEditFactory({
+                    mode: "click",
+                  })}
+                  {...paginationTableProps}
+                />
+                <div style={{ marginBottom: '20px' }}>
+                  <SizePerPageDropdownStandalone {...paginationProps} />
+                  <PaginationTotalStandalone {...paginationProps} />
+                  <ExportCSVButton {...props.csvProps}
+                    className="btn-warning"
+                    style={{ marginLeft: '20px' }}
+                    onClick={this.handleExport(props.csvProps.onExport)}
+                  >Export CSV</ExportCSVButton>
+                  <PaginationListStandalone {...paginationProps} />
+                </div>
+                <Code>{remoteAllExportSourceCode}</Code>
+              </div>
+            )}
+          </PaginationProvider>
+        )}
+      </ToolkitProvider>
+    );
+  }
+}
+`;
+
+const productColumns = [
+  {
+    dataField: "id",
+    text: "Product ID",
+    filter: textFilter(),
+    sort: true,
+  },
+  {
+    dataField: "name",
+    text: "Product Name",
+    filter: textFilter(),
+    sort: true,
+  },
+  {
+    dataField: "price",
+    text: "Product Price",
+    filter: textFilter(),
+    sort: true,
+    hidden: true,
+  },
+];
+
+const { ExportCSVButton } = CSVExport;
+
+//leslint-disable-next-line react/proprtypes
+interface CustomToggleListProps {
+  columns: any[];
+  onColumnToggle: (dataField: string) => void;
+  toggles: any;
+}
+
+const CustomToggleList = ({
+  columns,
+  onColumnToggle,
+  toggles,
+}: CustomToggleListProps) => (
+
+  <div className="btn-group btn-group-toggle" data-toggle="buttons" style={{ marginBottom: '10px' }}>
+    {columns
+      .filter(column => !(column.toggleHidden === true))
+      .map(column => ({
+        ...column,
+        toggle: toggles[column.dataField]
+      }))
+      .map(column => (
+        <button
+          type="button"
+          key={column.dataField}
+          className={`btn ${column.toggle ? 'btn-primary' : 'btn-default'}`}
+          data-toggle="button"
+          aria-pressed={column.toggle ? 'true' : 'false'}
+          onClick={() => onColumnToggle(column.dataField)}
+        >
+          {column.text}
+        </button>
+      ))}
+  </div>
+);
+
+const customPaginationTotal = (from: number, to: number, totalSize: number) => (
+  <span className="react-bootstrap-table-pagination-total" style={{ marginLeft: '10px' }}>
+    {from} to {to} of {totalSize} rows
+  </span>
+);
+
+
+const allExportProducts = productsGenerator(487);
+
+class RemoteAllCustomComponent extends React.Component {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: allExportProducts.slice(0, 10),
+      totalSize: allExportProducts.length,
+      sizePerPage: 10,
+      allData: allExportProducts,
+    };
+    this.handleTableChange = this.handleTableChange.bind(this);
+  }
+
+  handleTableChange = (
+    type: any,
+    { page, sizePerPage, filters, sortField, sortOrder, cellEdit }: any
+  ) => {
+    setTimeout(() => {
+      // Handle cell editing
+      if (type === "cellEdit") {
+        const { rowId, dataField, newValue } = cellEdit;
+        products = products.map((row: any) => {
+          if (row.id === rowId) {
+            const newRow = { ...row };
+            newRow[dataField] = newValue;
+            return newRow;
+          }
+          return row;
+        });
+      }
+      let result = allExportProducts;
+      // Handle column filters
+      result = result.filter((row: any) => {
+        let valid = true;
+        for (const dataField in filters) {
+          const { filterVal, filterType, comparator } = filters[dataField];
+
+          if (filterType === "TEXT") {
+            if (comparator === LIKE) {
+              valid = row[dataField].toString().indexOf(filterVal) > -1;
+            } else {
+              valid = row[dataField] === filterVal;
+            }
+          }
+          if (!valid) break;
+        }
+        return valid;
+      });
+      // Handle column sort
+      if (sortOrder === "asc") {
+        result = result.sort((a: any, b: any) => {
+          if (a[sortField] > b[sortField]) {
+            return 1;
+          } else if (b[sortField] > a[sortField]) {
+            return -1;
+          }
+          return 0;
+        });
+      } else {
+        result = result.sort((a: any, b: any) => {
+          if (a[sortField] > b[sortField]) {
+            return -1;
+          } else if (b[sortField] > a[sortField]) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+      this.setState(() => ({
+        page: page * sizePerPage < result.length ? page : Math.ceil(result.length / sizePerPage),
+        data: result.slice((page - 1) * sizePerPage, page * sizePerPage),
+        totalSize: result.length,
+        sizePerPage: sizePerPage,
+        allData: result,
+      }));
+    }, 2000);
+  };
+
+  handleExport = onExport => e => {
+    onExport(this.state.allData);
+  };
+
+  render() {
+    return (
+      <ToolkitProvider
+        keyField="id"
+        data={this.state.data}
+        columns={productColumns}
+        search
+        columnToggle
+        exportCSV={{
+          fileName: 'products-export.csv',
+          noAutoBOM: false,
+          blobType: 'text/csv;charset=ansi',
+          data: this.state.allData
+        }}
+      >
+        {props => (
+          <PaginationProvider
+            pagination={paginationFactory({
+              custom: true,
+              page: this.state.page,
+              sizePerPage: this.state.sizePerPage,
+              totalSize: this.state.totalSize,
+              sizePerPageList: [10, 25, 50, 100],
+              showSizePerPage: true,
+              showTotal: true,
+              paginationTotalRenderer: customPaginationTotal,
+            })}
+          >
+            {({ paginationProps, paginationTableProps }) => (
+              <div>
+                <CustomToggleList {...props.columnToggleProps} />
+                <div>
+                  <SizePerPageDropdownStandalone {...paginationProps} />
+                  <PaginationTotalStandalone {...paginationProps} />
+                  <ExportCSVButton {...props.csvProps}
+                    className="btn-warning"
+                    style={{ marginLeft: '20px' }}
+                    onClick={this.handleExport(props.csvProps.onExport)}
+                  >Export CSV</ExportCSVButton>
+                  <PaginationListStandalone {...paginationProps} />
+                </div>
+                <BootstrapTable
+                  remote
+                  striped
+                  hover
+                  condensed
+                  defaultSorted={[
+                    {
+                      dataField: "name",
+                      order: "desc",
+                    },
+                  ]}
+                  {...props.baseProps}
+                  filter={filterFactory()}
+                  overlay={overlayFactory({ spinner: true })}
+                  onTableChange={this.handleTableChange}
+                  cellEdit={cellEditFactory({
+                    mode: "click",
+                  })}
+                  {...paginationTableProps}
+                />
+                <div style={{ marginBottom: '20px' }}>
+                  <SizePerPageDropdownStandalone {...paginationProps} />
+                  <PaginationTotalStandalone {...paginationProps} />
+                  <ExportCSVButton {...props.csvProps}
+                    className="btn-warning"
+                    style={{ marginLeft: '20px' }}
+                    onClick={this.handleExport(props.csvProps.onExport)}
+                  >Export CSV</ExportCSVButton>
+                  <PaginationListStandalone {...paginationProps} />
+                </div>
+                <Code>{remoteAllExportSourceCode}</Code>
+              </div>
+            )}
+          </PaginationProvider>
+        )}
+      </ToolkitProvider>
+    );
+  }
+}
+
 interface RemoteMainProps {
   mode?: any;
 }
@@ -1150,5 +1619,7 @@ export default ({ mode }: RemoteMainProps) => {
       return <RemoteCellEditComponent />;
     case "all":
       return <RemoteAllComponent />;
+    case "all-custom":
+      return <RemoteAllCustomComponent />;
   }
 };

package/src/stories/RowExpand.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 // import bootstrap style by given version

package/src/stories/RowSelection.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 // import bootstrap style by given version
 import cellEditFactory from '../../../react-bootstrap-table-ng-editor';

package/src/stories/SortTable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 // import bootstrap style by given version