PagingTable

PagingTable is a table component with pagination functionality.

pnpm add @yamada-ui/table

Copied!

@yamada-ui/table is not included in @yamada-ui/react, so it needs to be installed separately.

Import

import { PagingTable } from "@yamada-ui/table"

Copied!

Usage

Set columns and data to configure the table.

PagingTable internally uses Table. For columns and data, please check here.

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return <PagingTable columns={columns} data={data} />

Copied!

Change Variant

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <VStack>
    <PagingTable variant="simple" columns={columns} data={data} />
    <PagingTable variant="striped" columns={columns} data={data} />
  </VStack>
)

Copied!

Change Size

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <VStack>
    <PagingTable size="sm" columns={columns} data={data} />
    <PagingTable size="md" columns={columns} data={data} />
    <PagingTable size="lg" columns={columns} data={data} />
    <PagingTable size="xl" columns={columns} data={data} />
  </VStack>
)

Copied!

Change Color Scheme

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <VStack>
    <PagingTable
      variant="striped"
      colorScheme="secondary"
      columns={columns}
      data={data}
    />
    <PagingTable
      variant="striped"
      colorScheme="green"
      columns={columns}
      data={data}
    />
  </VStack>
)

Copied!

Set Default Page

To set the default page, assign a number to defaultPageIndex. By default, 0 is set.

If you want to handle page changes, use onChangePageIndex.

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <PagingTable
    columns={columns}
    data={data}
    defaultPageIndex={2}
    onChangePageIndex={(pageIndex) => {
      console.log("pageIndex", pageIndex)
    }}
  />
)

Copied!

Use Manual Pagination

To use manual pagination, set manualPagination to true. This is useful when performing pagination on the server side.

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 20; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return <PagingTable columns={columns} data={data} manualPagination />

Copied!

Set Default Page Size

To set the default page size, assign a number to defaultPageSize. By default, 20 is set.

If you want to handle changes in page size, use onChangePageSize.

If defaultPageSize is not in the page size list (by default, [20, 50, 100] is set), it will be automatically inserted into the page size list.

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <PagingTable
    columns={columns}
    data={data}
    defaultPageSize={10}
    onChangePageSize={(pageSize) => {
      console.log("pageSize", pageSize)
    }}
  />
)

Copied!

Change Page Size List

To change the page size list, set pageSizeList to an array of numbers.

If the default 20 (defaultPageSize) is not present in the customized page size list, you will need to set it separately to match the customized page size list.

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <PagingTable
    columns={columns}
    data={data}
    defaultPageSize={30}
    pageSizeList={[30, 60, 90]}
    onChangePageSize={(pageSize) => {
      console.log("pageSize", pageSize)
    }}
  />
)

Copied!

Change Page Size List Label

To change the label of the page size list, use formatPageSizeLabel.

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <PagingTable
    columns={columns}
    data={data}
    formatPageSizeLabel={(pageSize) => `${pageSize} Page`}
  />
)

Copied!

Customize Pagination Styling

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <VStack>
    <PagingTable
      columns={columns}
      data={data}
      defaultPageSize={5}
      containerProps={{ flexDirection: "column-reverse" }}
    />

    <PagingTable
      columns={columns}
      data={data}
      defaultPageSize={5}
      pagingControlProps={{ py: 4, bg: ["green.200", "green.700"] }}
    />

    <PagingTable
      columns={columns}
      data={data}
      defaultPageSize={5}
      paginationProps={{ variant: "outline", colorScheme: "pink" }}
    />

    <PagingTable
      columns={columns}
      data={data}
      defaultPageSize={5}
      selectProps={{ variant: "flushed" }}
    />
  </VStack>
)

Copied!

Control

Editable example

const [pageSize, onChangePageSize] = useState<number>(20)

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <PagingTable
    columns={columns}
    data={data}
    pageSize={pageSize}
    onChangePageSize={onChangePageSize}
  />
)

Copied!

Editable example

const columns = useMemo<Column<Data>[]>(
  () => [
    {
      header: "First Name",
      accessorKey: "firstName",
    },
    {
      header: "Last Name",
      accessorKey: "lastName",
    },
    {
      header: "Age",
      accessorKey: "age",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
  ],
  [],
)

const data = useMemo<Data[]>(() => {
  let resultData: Data[] = []

  for (let i = 0; i < 100; i++) {
    resultData.push({
      id: faker.string.uuid(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      age: faker.number.int(75),
      email: faker.internet.email(),
    })
  }

  return resultData
}, [])

return (
  <PagingTable columns={columns} data={data} defaultPageSize={10}>
    {({
      pageIndex,
      pageSize,
      totalPage,
      getCanNextPage,
      getCanPreviousPage,
      setPageIndex,
      previousPage,
      nextPage,
      setPageSize,
    }) => {
      return (
        <VStack gap="md" alignItems="center">
          <Text flex="1">
            Page {pageIndex + 1} of {totalPage}
          </Text>

          <HStack>
            <IconButton
              size="sm"
              icon={<ChevronLeftIcon fontSize="lg" />}
              isDisabled={!getCanPreviousPage()}
              onClick={previousPage}
            />

            <NumberInput
              size="sm"
              w="24"
              min={1}
              max={totalPage}
              value={pageIndex + 1}
              onChange={(_, page) => setPageIndex(page - 1)}
            />

            <IconButton
              size="sm"
              icon={<ChevronRightIcon fontSize="lg" />}
              isDisabled={!getCanNextPage()}
              onClick={nextPage}
            />

            <Select
              size="sm"
              w="24"
              value={String(pageSize)}
              onChange={(pageSize) => setPageSize(Number(pageSize))}
              items={[
                { label: "10", value: "10" },
                { label: "20", value: "20" },
                { label: "30", value: "30" },
              ]}
            />
          </HStack>
        </VStack>
      )
    }}
  </PagingTable>
)

Copied!

Edit this page on GitHub

PreviousTable NextNativeTable