react-bootstrap-table-ng-example 4.19.2 → 5.19.0-beta2

package/src/stories/Bootstrap5.stories.tsx

@@ -0,0 +1,271 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+// import bootstrap style by given version
+import paginationFactory from "../../../react-bootstrap-table-ng-paginator";
+import { columns, productsGenerator, sortColumns } from '../utils/common';
+import BootstrapTable from './Bootstrap5';
+import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Bootstrap 5',
+  component: BootstrapTable as any,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    mode: { control: 'text', description: 'mode' },
+    data: { control: 'object', description: 'table data' },
+    columns: { control: 'object', description: 'table columns' },
+    sourceCode: { control: 'text', description: 'source code of the table' },
+    defaultSorted: { control: 'object', description: 'default sorted data field' },
+    selectRow: { control: 'object', description: 'table select row' },
+    pagination: { control: 'object', description: 'table pagination' },
+  },
+  decorators: [
+    (Story: any) => bootstrapStyle(BOOTSTRAP_VERSION.FIVE)(Story),
+  ],
+} satisfies Meta<typeof BootstrapTable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+export const SortTableWithBootstrap5: Story = {
+  name: "Sort table with Bootstrap 5",
+  args: {
+    columns: sortColumns,
+    data: productsGenerator(),
+    sourceCode: `\
+    import BootstrapTable from 'react-bootstrap-table-ng';
+
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID',
+      sort: true
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      sort: true
+    }, {
+      dataField: 'price',
+      text: 'Product Price',
+      sort: true
+    }];
+
+    const defaultSorted = [{
+      dataField: 'name',
+      order: 'desc'
+    }];
+
+    <BootstrapTable
+      bootstrap5
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      defaultSorted={ defaultSorted }
+    />
+    `,
+    defaultSorted: defaultSorted,
+  }
+};
+
+export const TableCaptionBootstrap5: Story = {
+  name: "Table caption Bootstrap 5",
+  args: {
+    mode: "caption",
+    columns: columns,
+    data: productsGenerator(),
+    sourceCode: `\
+    import BootstrapTable from 'react-bootstrap-table-ng';
+
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+
+    const CaptionElement = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
+
+    <BootstrapTable bootstrap5 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+
+    <BootstrapTable bootstrap5 keyField="id" data={ products } caption={<CaptionElement />} columns={ columns } />
+    `,
+  }
+};
+
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true
+};
+
+export const RowSelectionTableWithBootstrap5: Story = {
+  name: "Row selection table with Bootstrap 5",
+  args: {
+    columns: columns,
+    data: productsGenerator(),
+    sourceCode: `\
+    import BootstrapTable from 'react-bootstrap-table-ng';
+
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+
+    const selectRow = {
+      mode: 'radio',
+      clickToSelect: true
+    };
+
+    <BootstrapTable
+      bootstrap5
+      keyField='id'
+      data={ products }
+      columns={ columns }
+      selectRow={ selectRow }
+    />
+    `,
+    selectRow: selectRow,
+  }
+};
+
+export const PaginationTableWithBootstrap5: Story = {
+  name: "Pagination table with Bootstrap 5",
+  args: {
+    columns: columns,
+    data: productsGenerator(87),
+    sourceCode: `\
+    import BootstrapTable from 'react-bootstrap-table-ng';
+    import paginationFactory from 'react-bootstrap-table-ng-paginator';
+
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+
+    <BootstrapTable bootstrap5 keyField='id' data={ products } columns={ columns } pagination={ paginationFactory() } />
+    `,
+    pagination: paginationFactory(),
+  }
+};
+
+export const ColumnToggleWithBootstrap5: Story = {
+  name: "Columns toggle with Bootstrap 5",
+  args: {
+    mode: "toggle",
+    columns: columns,
+    data: productsGenerator(),
+    sourceCode: `\
+    import BootstrapTable from 'react-bootstrap-table-ng';
+    import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table-ng-toolkit';
+
+    const { ToggleList } = ColumnToggle;
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+
+    <ToolkitProvider
+      bootstrap5
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <ToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    `,
+  }
+};
+
+export const ToolkitsTableBootstrap5: Story = {
+  name: "Toolkits table Bootstrap 5",
+  args: {
+    mode: "toolkits",
+    columns: columns,
+    data: productsGenerator(),
+    sourceCode: `\
+    import BootstrapTable from 'react-bootstrap-table-ng';
+    import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table-ng-toolkit';
+
+    const { SearchBar, ClearSearchButton } = Search;
+    const { ExportCSVButton } = CSVExport;
+
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+
+    <ToolkitProvider
+      bootstrap5
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <ClearSearchButton { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    `,
+  }
+};

package/src/stories/Bootstrap5.tsx

@@ -0,0 +1,132 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+
+import BootstrapTable from "../../../react-bootstrap-table-ng";
+import ToolkitProvider, {
+  CSVExport,
+  ColumnToggle,
+  Search,
+} from "../../../react-bootstrap-table-ng-toolkit";
+import Code from "../components/common/code-block";
+
+import "../../../react-bootstrap-table-ng-filter/style/react-bootstrap-table-ng-filter.scss";
+import "../../../react-bootstrap-table-ng-paginator/style/react-bootstrap-table-ng-paginator.scss";
+import "../../../react-bootstrap-table-ng-toolkit/style/react-bootstrap-table-ng-toolkit.scss";
+import "../../../react-bootstrap-table-ng/style/react-bootstrap-table-ng.scss";
+import "./stylesheet/storybook.scss";
+import "./stylesheet/tomorrow.min.css";
+
+interface Bootstrap5Props {
+  mode?: any;
+  data?: any;
+  columns?: any;
+  sourceCode?: any;
+  defaultSorted?: any;
+  selectRow?: any;
+  pagination?: any;
+}
+
+export default ({
+  mode,
+  data,
+  columns,
+  sourceCode,
+  defaultSorted,
+  selectRow,
+  pagination,
+}: Bootstrap5Props) => {
+  switch (mode) {
+    case "caption":
+      const Caption = () => (
+        <h3
+          style={{
+            borderRadius: "0.25em",
+            textAlign: "center",
+            color: "purple",
+            border: "1px solid purple",
+            padding: "0.5em",
+          }}
+        >
+          Component as Header
+        </h3>
+      );
+      return (
+        <div>
+          <BootstrapTable
+            bootstrap5
+            keyField="id"
+            data={data}
+            caption="Plain text header"
+            columns={columns}
+          />
+          <BootstrapTable
+            bootstrap5
+            keyField="id"
+            data={data}
+            caption={<Caption />}
+            columns={columns}
+          />
+          <Code>{sourceCode}</Code>
+        </div>
+      );
+    case "toggle":
+      const { ToggleList } = ColumnToggle;
+      return (
+        <div>
+          <ToolkitProvider
+            bootstrap5
+            keyField="id"
+            data={data}
+            columns={columns}
+            columnToggle
+          >
+            {(props: any) => (
+              <div>
+                <ToggleList {...props.columnToggleProps} />
+                <hr />
+                <BootstrapTable {...props.baseProps} />
+              </div>
+            )}
+          </ToolkitProvider>
+          <Code>{sourceCode}</Code>
+        </div>
+      );
+    case "toolkits":
+      const { SearchBar, ClearSearchButton } = Search;
+      const { ExportCSVButton } = CSVExport;
+      return (
+        <div>
+          <ToolkitProvider bootstrap5 keyField="id" data={data} columns={columns} search>
+            {(props: any) => (
+              <div>
+                <h3>Input something at below input field:</h3>
+                <SearchBar {...props.searchProps} />
+                <ClearSearchButton {...props.searchProps} />
+                <hr />
+                <BootstrapTable {...props.baseProps} />
+                <ExportCSVButton {...props.csvProps}>
+                  Export CSV!!
+                </ExportCSVButton>
+              </div>
+            )}
+          </ToolkitProvider>
+          <Code>{sourceCode}</Code>
+        </div>
+      );
+    default:
+      return (
+        <div>
+          <BootstrapTable
+            bootstrap5
+            keyField="id"
+            data={data}
+            columns={columns}
+            defaultSorted={defaultSorted}
+            selectRow={selectRow}
+            pagination={pagination}
+          />
+          <Code>{sourceCode}</Code>
+        </div>
+      );
+  }
+};

package/src/stories/bootstrap-style.tsx

@@ -12,6 +12,7 @@ interface WithBootstrapStyleState {
 }
 
 export const BOOTSTRAP_VERSION = {
+  FIVE: "5.3.8",
   FOUR: "4.6.2",
   THREE: "3.4.1",
 };