title: Table Pagination with Semantic UI React Table
body: <p>I have a <a href="https://react.semantic-ui.com/collections/table/" rel="nofollow noreferrer"><code>&lt;Table&gt;</code></a> component from <code>semantic-ui-react</code> that I use to render fetched data from a mocked api call. I could potentially have <code>X</code> amount of rows, so I'm looking into adding pagination. I have found some solutions but they look entirely too bulky.</p>
  
  <p>Can anyone give some suggestions on how to approach handling simple pagination? Let's say I only want to render 5 rows of data on every page. How can I achieve this?</p>
  
  <p>I have a <a href="https://codesandbox.io/s/objective-thunder-9ilbp" rel="nofollow noreferrer">codesandbox here</a>. </p>
  
  <pre><code>class PaginationExample extends Component {
    constructor(props) {
      super(props);
  
      this.state = { tableData: [], activePage: 1 };
    }
  
    async componentDidMount() {
      await this.getData();
    }
  
    getData = async () =&gt; {
      const { data } = await axios.get("/slotInfo");
      console.log(data);
      const tableData = data.data.slotInfo;
      this.setState({ tableData: tableData });
    };
  
    //change handlers for pagination
  
    handlePageClick = (e, { name }) =&gt; this.setState({ activePage: name });
  
    render() {
      const { tableData, activePage } = this.state;
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Table Pagination w/ SUI-React Component&lt;/h1&gt;
          &lt;Table style={{ marginTop: "5em" }} inverted celled&gt;
            &lt;Table.Header fullWidth&gt;
              &lt;Table.Row&gt;
                &lt;Table.HeaderCell&gt;Slot Id&lt;/Table.HeaderCell&gt;
                &lt;Table.HeaderCell&gt;deviceId&lt;/Table.HeaderCell&gt;
                &lt;Table.HeaderCell&gt;Initialized&lt;/Table.HeaderCell&gt;
                &lt;Table.HeaderCell&gt;Label&lt;/Table.HeaderCell&gt;
              &lt;/Table.Row&gt;
            &lt;/Table.Header&gt;
  
            &lt;Table.Body&gt;
              {Object.values(tableData).map(
                ({ slotId, deviceId, initialized, label }) =&gt; {
                  return (
                    &lt;Table.Row&gt;
                      &lt;Table.Cell&gt;{slotId}&lt;/Table.Cell&gt;
                      &lt;Table.Cell&gt;{deviceId}&lt;/Table.Cell&gt;
                      &lt;Table.Cell&gt;{initialized}&lt;/Table.Cell&gt;
                      &lt;Table.Cell&gt;{label}&lt;/Table.Cell&gt;
                    &lt;/Table.Row&gt;
                  );
                }
              )}
            &lt;/Table.Body&gt;
  
            &lt;Table.Footer&gt;
              &lt;Table.Row&gt;
                &lt;Table.HeaderCell colSpan="4"&gt;
                  &lt;Menu floated="right" pagination&gt;
                    &lt;Menu.Item as="a" icon&gt;
                      &lt;Icon name="chevron left" /&gt;
                    &lt;/Menu.Item&gt;
                    &lt;Menu.Item
                      name="1"
                      active={activePage === "1"}
                      onClick={this.handlePageClick}
                    /&gt;
                    &lt;Menu.Item
                      name="2"
                      active={activePage === "2"}
                      onClick={this.handlePageClick}
                    /&gt;
                    &lt;Menu.Item
                      name="3"
                      active={activePage === "3"}
                      onClick={this.handlePageClick}
                    /&gt;
                    &lt;Menu.Item
                      name="4"
                      active={activePage === "4"}
                      onClick={this.handlePageClick}
                    /&gt;
                    &lt;Menu.Item as="a" icon&gt;
                      &lt;Icon name="chevron right" /&gt;
                    &lt;/Menu.Item&gt;
                  &lt;/Menu&gt;
                &lt;/Table.HeaderCell&gt;
              &lt;/Table.Row&gt;
            &lt;/Table.Footer&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>