{"componentChunkName":"component---src-pages-components-pagination-usage-mdx","path":"/components/pagination/usage/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Pagination","description":"Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/pagination/usage.mdx","titleType":"prepend","MdxNode":{"id":"eb431533-1aea-55db-9ae4-64df28cdfe78","children":[],"parent":"798ac87d-526e-51ec-94d9-e110d1d0c78f","internal":{"content":"---\ntitle: Pagination\ndescription: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Pagination_ is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.\n\nGenerally, pagination is used if there are more than 25 items displayed in one view. The default number displayed will vary depending on the context.\n\n## Best practices\n\n#### Identify the current page\n\nClearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.\n\n#### Provide various options for navigating\n\n_Previous_ and _next_ chevrons or links are the most useful way for the user to move forward or backward through pages of data. Provide an [inline select](/components/select/code) in which users can choose the page they wish to navigate to.\n\n<Row>\n<Column colLg={8}>\n\n![Example of pagination controls on data table](images/pagination-usage-1.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of pagination controls on data table](images/pagination-usage-1.png)\n\n</Column>\n</Row>\n\n#### Items per page\n\nUse an inline select within the pagination bar so the user can change the amount of data displayed per page.\n\n<Row>\n<Column colLg={8}>\n\n![Example of items per page on data table](images/pagination-usage-2.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"1a141068629adaf023adccf3f8e8f780","counter":1333,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Pagination","description":"Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Pagination\ndescription: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Pagination_ is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.\n\nGenerally, pagination is used if there are more than 25 items displayed in one view. The default number displayed will vary depending on the context.\n\n## Best practices\n\n#### Identify the current page\n\nClearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.\n\n#### Provide various options for navigating\n\n_Previous_ and _next_ chevrons or links are the most useful way for the user to move forward or backward through pages of data. Provide an [inline select](/components/select/code) in which users can choose the page they wish to navigate to.\n\n<Row>\n<Column colLg={8}>\n\n![Example of pagination controls on data table](images/pagination-usage-1.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of pagination controls on data table](images/pagination-usage-1.png)\n\n</Column>\n</Row>\n\n#### Items per page\n\nUse an inline select within the pagination bar so the user can change the amount of data displayed per page.\n\n<Row>\n<Column colLg={8}>\n\n![Example of items per page on data table](images/pagination-usage-2.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/pagination/usage.mdx"}}}}