React-table: How to add custom pagination icons?

[nullhook]

Can I replace the current pagination buttons for Prev and Next to custom arrow icons?

[tannerlinsley]

Absolutely! Just use your own component for the NextComponent and
PreviousComponent props
On Mon, Apr 17, 2017 at 10:06 PM Taher [e-mail] wrote:

Can I replace the current pagination buttons for Prev and Next to custom
arrow icons?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/205, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AFUmCTFqCtxAg2FKorJGve2_5OrUqWP3ks5rxDapgaJpZM4M_2LG
.

[nullhook]

I'm trying to use my own component below here but I can't see the component render. Am I doing something wrong here?

class NextIcon extends Component {
  render() {
    return <button><img src="../assets/scroll-arrow-right.svg"/></button>;
  }
}

class PrevIcon extends Component {
  render() {
    return <button><img src="../assets/scroll-arrow-left.svg"/></button>;
  }
}

Object.assign(ReactTableDefaults, {
  PreviousComponent: <PrevIcon/>,
  NextComponent: <NextIcon/>
});

[tannerlinsley]

Try PreviousComponent: PrevIcon
On Mon, Apr 17, 2017 at 10:54 PM Taher [e-mail] wrote:

I'm trying to use my own component below here but I can't see the
component render. Am I doing something wrong here?

class NextIcon extends Component {
render() {
return ;
}
}

class PrevIcon extends Component {
render() {
return ;
}
}

Object.assign(ReactTableDefaults, {
PreviousComponent: ,
NextComponent:
});

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/205#issuecomment-294677360,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCQhSiDDAGcLO0KGa6KrqhRiXUzuTks5rxEIBgaJpZM4M_2LG
.

[nullhook]

Now it renders but doesn't paginate.

[tannerlinsley]

Include all props on the button like this: needs to use the onClick that is provided in the props at the very least.
On Mon, Apr 17, 2017 at 10:58 PM Taher [e-mail] wrote:

Now it renders but doesn't paginate.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/205#issuecomment-294677749,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCda7Afwx5SgpchdhWoEbf1hz9PoGks5rxELfgaJpZM4M_2LG
.

[nullhook]

it works now. thanks.

[tannerlinsley]

You bet!

[perpetualgrimace]

In case anyone else gets stumped by this:

PreviousComponent={props => <CustomButton {...props} />}