PagingTable

PagingTableは、ページネーション機能を備えたテーブルのコンポーネントです。

pnpm add @yamada-ui/table

Copied!

@yamada-ui/tableは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。

インポート

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

Copied!

使い方

テーブルを構成するためにcolumnsとdataを設定します。

PagingTableは、内部的にTableを使用しています。columnsとdataについては、こちらをご覧ください。

編集可能な例

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!

バリアントを変更する

編集可能な例

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!

サイズを変更する

編集可能な例

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!

カラースキーマを変更する

編集可能な例

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!

デフォルトのページを設定する

デフォルトのページを設定する場合は、defaultPageIndexに数値を設定します。デフォルトでは、0が設定されています。

ページの変更をハンドルしたい場合は、onChangePageIndexを使用します。

編集可能な例

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!

手動のページネーションを使う

手動のページネーションを使う場合は、manualPaginationをtrueに設定します。これは、サーバー側でページネーションを行う場合に便利です。

編集可能な例

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!

デフォルトのページサイズを設定する

デフォルトのページサイズを設定する場合は、defaultPageSizeに数値を設定します。デフォルトでは、20が設定されています。

ページサイズの変更をハンドルしたい場合は、onChangePageSizeを使用します。

もし、defaultPageSizeがページサイズリスト(デフォルトでは、[20, 50, 100]が設定されています。)に存在しない場合は、ページサイズリストへ自動的に挿入されます。

編集可能な例

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!

ページサイズリストを変更する

ページサイズリストを変更する場合は、pageSizeListに数値の配列を設定します。

もし、カスタマイズしたページサイズリストにデフォルトで設定されている20(defaultPageSize)が存在しない場合は、カスタマイズしたページサイズリストに合わせるために別途設定する必要があります。

編集可能な例

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!

ページサイズリストのラベルを変更する

ページサイズリストのラベルを変更する場合は、formatPageSizeLabelを使います。

編集可能な例

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!

ページネーションのスタイリングをカスタマイズする

編集可能な例

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!

制御する

編集可能な例

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!

編集可能な例

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!

GitHubでこのページを編集する

前Table 次NativeTable