Prop onPageChange from CDataTable trigger two times.

[gandarain]

Hello, I am new in core ui. I try to use CDataTable and prop onPageChange. When I click other page, the prop onPageChange will trigger two times.

Here is my code

<CDataTable
      items={this.state.consultant}
      fields={fields}
      itemsPerPage={10}
      pagination
      onPageChange={(page) => console.log('Page ', page)}
      loading={true}
/>

[woothu]

This is a bug which is already detected and queued to fix, but it probably doesn't cause any problems, so you can just ignore that :)

[gandarain]

Oh oke thank you. But I just found a solution like this.

<CDataTable
     items={this.state.consultant}
     fields={fields}
     itemsPerPage={10}
     loading={this.state.progress === 100 ? false : true}
     responsive={true}
/>
<CPagination
     activePage={this.state.page}
     pages={this.state.totalPage}
     onActivePageChange={(page) => {
         if (page > 0) {
            this.nextPage(page)
         }
     }}
/>

[vinaydoddapaneni]

Hello coreui-react friends I'm out of this conversation but I tried so many times to change the sidebar color from #3c4b64 to white and please check the below images once.

i) This's the CoreUI-react sidebar I'm working on :

ii) This is my own Sidebar:

Overview I want to change the colors from my Sidebar and also i tried to change to the SCSS: _variables.scss `$white: #fff !default; $black: #000015 !default;

$gray-base: #3c4b64 !default; //Sidebar color $gray-100: #ebedef !default; //Body color component $gray-200: #d8e0db !default; //Line color for below header $gray-300: #d0c9c4 !default; //Unknow or not used $gray-400: #b1b7c1 !default; //Unknow or not used $gray-500: #9da5b1 !default; //Unknow or not used $gray-600: #8a93a2 !default; //Unknow or not used $gray-700: #927676 !default; //Text color $gray-800: #836363 !default; //Unknow or not used $gray-900: #69734f !default; //Unknow or not used

$grays: () !default; // stylelint-disable-next-line scss/dollar-variable-default $grays: map-merge( ( "100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900 ), $grays );

$primary-base: #fff !default; $primary-100: #eae9fb !default; $primary-200: #d6d2fb !default; $primary-300: #c1bcf4 !default; $primary-400: #ada5f1 !default; $primary-500: #988fed !default; $primary-600: #8478ea !default; $primary-700: #6f62e6 !default; $primary-800: #5b4ce2 !default; $primary-900: #4635df !default;

$primary-dark: #1f1498 !default; $primary: #321fdb !default; //Active in the Sidebar $primary-50: #988fed !default; $primary-25: #ccc7f6 !default;

$secondary-base: #3c4b64 !default;

$secondary-100: #ebedef !default; $secondary-200: #d8dbe0 !default; $secondary-300: #c4c9d0 !default; $secondary-400: #b1b7c1 !default; $secondary-500: #9da5b1 !default; $secondary-600: #8a93a2 !default; $secondary-700: #768192 !default; $secondary-800: #636f83 !default; $secondary-900: #4f5d73 !default;

$secondary-dark: #212233 !default; $secondary: #3c4b64 !default; $secondary-50: #9da5b1 !default; $secondary-25: #ced2d8 !default;

$danger-dark: #d93737 !default; $danger: #e55353 !default; $danger-50: #f2a9a9 !default; $danger-25: #f9d4d4 !default;

$info-dark: #2982cc !default; $info: #39f !default; $info-50: #80c6ff !default; $info-25: #c0e6ff !default;

$success-dark: #1b9e3e !default; $success: #2eb85c !default; $success-50: #96dbad !default; $success-25: #cbedd6 !default;

$warning-dark: #f6960b !default; $warning: #f9b115 !default; $warning-50: #fcd88a !default; $warning-25: #feecc5 !default;

$light: $gray-100 !default; $dark: $gray-800 !default;

$pink: #e83e8c !default;

$theme-colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary-25, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ), $theme-colors );

// Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default;

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. $yiq-contrasted-threshold: 150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function. $yiq-text-dark: $gray-900 !default; $yiq-text-light: $white !default;

$yiq-theme-map: () !default; // stylelint-disable-next-line scss/dollar-variable-default $yiq-theme-map: map-merge( ( default: ( "yiq-text-dark": $yiq-text-dark, "yiq-text-light": $yiq-text-light ) ), $yiq-theme-map );

// TODO: Move to better place // Characters which are escaped by the escape-svg function $escaped-characters: ( ("<","%3c"), (">","%3e"), ("#","%23"), ("(","%28"), (")","%29"), ) !default;`

and also

In the _nav.js like i want to give custom className to make it as my previous side bar _nav.js: { _tag: 'CSidebarNavItem', name: 'Dashboard', to: '/', icon: { name: 'cil-speedometer', className: 'text-warning' }, className: 'text-warning' },

I'm sorry to take your time and Thank you for advance Take Care.

[woothu]

In fact, it turned out to be a React intended behavior, onPageChange is called only once after React.StrictMode in src/index.js is disabled.

https://github.com/facebook/react/issues/15074#issuecomment-471197572

---

@vinaydoddapaneni add colorScheme="light" to CSidebar component for white sidebar

[dzakiafif]

Oh oke thank you. But I just found a solution like this.

<CDataTable
     items={this.state.consultant}
     fields={fields}
     itemsPerPage={10}
     loading={this.state.progress === 100 ? false : true}
     responsive={true}
/>
<CPagination
     activePage={this.state.page}
     pages={this.state.totalPage}
     onActivePageChange={(page) => {
         if (page > 0) {
            this.nextPage(page)
         }
     }}
/>

hello, i just want ask something. so in this example code, you use cpagination inside datatable or u make an object in props pagination cdatatable?