() => {
  const pageSizes = [2, 3, 4];
  const itemText = (pageSize) => pageSize + ' لكل صفحة';
  const status = (category, first, last, total) =>
    first + '–' + last + ' من ' + total + ' ' + category;
  const pageLabel = (isCurrentPage, isLastPage, page) =>
    page + (isCurrentPage ? ', الصفحه الحاليه' : '') + (isLastPage ? ', آخر صفحة' : '');
  const messages = {
    category: 'المعادن',
    label: 'ترقيم الصفحات',
    pages: { pageLabel, next: 'التالى', previous: 'سابق' },
    pageJumper: { label: 'اذهب الى الصفحة', placeholder: 'صفحة #' },
    pageSizer: { status, itemText }
  };

  class PaginatedTable extends Component {
    constructor(props) {
      super(props);

      this.state = {
        currentPage: 1,
        pageSize: pageSizes[1]
      };

      this.handlePageChange = this.handlePageChange.bind(this);
      this.handlePageSizeChange = this.handlePageSizeChange.bind(this);
    }

    handlePageChange(currentPage) {
      this.setState({ currentPage });
    }

    handlePageSizeChange(pageSize) {
      this.setState({ pageSize });
    }

    render() {
      const { currentPage, pageSize } = this.state;
      const firstRow = (currentPage - 1) * pageSize;
      const lastRow = (currentPage - 1) * pageSize + pageSize;
      const slicedData = this.props.data.slice(firstRow, lastRow);

      return (
        <div dir="rtl">
          <ThemeProvider theme={{ direction: 'rtl' }}>
            <DemoLayout>
              <Table
                data={slicedData}
                rowKey="اسم"
                columns={columns}
                title="المعادن"
                hideTitle
              />
              <Pagination
                rtl
                messages={messages}
                currentPage={currentPage}
                onPageSizeChange={this.handlePageSizeChange}
                onPageChange={this.handlePageChange}
                showPageJumper
                showPageSizer
                pageSize={pageSize}
                pageSizes={pageSizes}
                totalCount={data.length}
              />
            </DemoLayout>
          </ThemeProvider>
        </div>
      );
    }
  }

  return <PaginatedTable data={data} />;
}