Jadual TanStack Dijelaskan: Semua yang Anda Perlu Tahu

pengenalan

Dalam dunia pembangunan web moden, memaparkan data dengan berkesan dan cekap adalah cabaran biasa. Sama ada senarai ringkas pengguna atau laporan kewangan yang kompleks, jadual adalah penting. Walaupun terdapat banyak perpustakaan yang tersedia untuk mengendalikan jadual dalam React, hanya sedikit yang menawarkan fleksibiliti, prestasi dan kemudahan penggunaan seperti yang dilakukan oleh TanStack Table.

TanStack Table, sebelum ini dikenali sebagai React Table, telah menjadi penyelesaian yang cepat untuk pembangun yang memerlukan komponen jadual yang berkuasa dan boleh disesuaikan. TanStack bukan sahaja serasi dengan React tetapi ia juga menyokong Angular, Lit, Qwik, Solid, Svelte, Vue dan juga JavaScript/TypeScript Vanilla.

Dalam catatan blog ini, kami akan menyelami perkara yang menjadikan TanStack Table menonjol, meneroka ciri terasnya dan memberikan contoh praktikal untuk membantu anda bermula.

Apakah Jadual TanStack?

TanStack Table ialah UI yang ringan, sangat disesuaikan dan tanpa kepala untuk membina jadual & grid data yang berkuasa. Dengan "tanpa kepala," kami maksudkan ia datang dengan semua fungsi teras dan logik untuk operasi jadual tanpa sebarang antara muka pengguna. Ini memberi kami kawalan penuh ke atas penampilan meja kami sambil memanfaatkan kefungsian terbina dalam.

Mengapa memilih jadual TanStack?

Memilih perpustakaan jadual untuk projek anda boleh mengelirukan kerana begitu banyak pilihan tersedia dalam talian. Inilah sebabnya TanStack Table mungkin paling sesuai untuk projek anda yang seterusnya:

1. Prestasi

Apabila set data kami besar, pengurusan yang cekap menjadi penting kerana kami juga perlu mengambil kira prestasi. TanStack menggunakan ciri seperti Virtualisasi dan Tree shaking yang merupakan kaedah untuk mengoptimumkan prestasi. Ia juga mengoptimumkan pemaparan untuk memastikan walaupun terdapat puluhan ribu baris prestasinya lancar.

Gegar pokok ialah proses pengoptimuman semasa penggabungan javascript akhir, ia mengalih keluar semua kod mati atau kod yang tidak digunakan daripada berkas.

Virtualisasi atau Tetingkap ialah teknik untuk meningkatkan prestasi dengan hanya memaparkan item yang sedang dilihat.

2. Kebolehsuaian

Jadual TanStack menyokong seni bina tanpa kepala yang membolehkan kami bebas daripada sebarang UI terbina dalam. Kebolehubahsuaiannya yang tinggi membolehkan kami menyepadukannya dengan mana-mana rangka kerja atau tema CSS. Fleksibiliti ini amat berguna apabila perubahan reka bentuk diperlukan untuk hampir setiap projek.

3. Ciri Lanjutan

Jadual TanStack menyokong pelbagai senarai ciri seperti:

• Isih dengan fungsi isihan yang boleh disesuaikan.

• Penapis terbina dalam atau logik penapis tersuai.

• Sembunyikan atau nyahsembunyikan mana-mana lajur.

• Logik penomboran terbina dalam.

• Kumpulkan baris mengikut mana-mana kriteria.

• Saiz semula dinamik lajur.

• Pilih baris dengan kotak pilihan atau elemen UI lain.

4. Komuniti dan Sokongan Aktif

Meja TanStack diselenggara secara aktif dan disokong oleh komuniti yang hebat. Dokumentasi adalah tepat dan mudah difahami.

Cabaran utama apabila menggunakan Jadual TanStack

Walaupun Jadual TanStack menawarkan banyak kelebihan, ia juga mempunyai beberapa kelemahan.

• Menguruskan lebar lajur mengikut panjang data.

• Menjadikan jadual responsif untuk semua saiz skrin.

• Menyahpepijat jadual binaan tersuai menggunakan jadual TanStack

• Dokumen yang komprehensif boleh menyukarkan untuk mencari jawapan pantas.

• Keluk pembelajaran adalah curam.

Bermula dengan Jadual TanStack

Mari kita mulakan dengan contoh mudah. Kami akan mencipta jadual asas menggunakan Jadual TanStack.

Langkah 1: Pasang Jadual TanStack

Mula-mula, mari pasang Jadual TanStack dan kebergantungan rakan sebayanya.

npm install @tanstack/react-table

Langkah 2: Sediakan Jadual

Kami akan mulakan dengan menyediakan komponen jadual kami. Untuk contoh ini, kami akan menggunakan set data ringkas pengguna.

import * as React from 'react';
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';

export type User = {
  id: number;
  name: string;
  age: number;
  email: string;
  country: string;
  subscription: string;
  wallet_balance: number;
};

export const users: User[] = [
  {
    id: 1,
    name: 'John Doe',
    age: 35,
    email: 'john.doe@example.com',
    country: 'United States',
    subscription: 'Premium',
    wallet_balance: 150.25,
  },
  {
    id: 2,
    name: 'Alice Smith',
    age: 28,
    email: 'alice.smith@example.com',
    country: 'Canada',
    subscription: 'Basic',
    wallet_balance: 50.75,
  }
];

const columnHelper = createColumnHelper<User>();

const columns = [
  columnHelper.accessor('name', {
    header: () => 'Name',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('age', {
    header: () => 'Age',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('email', {
    header: () => 'Email',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('country', {
    header: () => 'Country',
  }),
  columnHelper.accessor('subscription', {
    header: 'Subscription',
  }),
  columnHelper.accessor('wallet_balance', {
    header: 'Wallet balance',
  }),
];

const Table = () => {
  const [data, _setData] = React.useState([...users]);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
  );
};

export default Table;

Dalam kod di atas kami mempunyai data pengguna untuk mengisi jadual. Kami menggunakan fungsi createColumnHelper untuk mencipta columnHelper yang kemudiannya digunakan untuk mentakrifkan tatasusunan lajur. Lajur ini menentukan cara data akan muncul dalam jadual. Ia mencipta lajur mengikut pengepala yang telah kami sediakan. Dalam kes ini, ia ialah "Nama", "Umur", "E-mel", dll. Kami boleh menyesuaikan gelagat pemaparan sel dengan menyediakan harta sel. Jika ia tidak disediakan maka ia menunjukkan bahawa tingkah laku pemaparan sel lalai akan digunakan.

useReactTable cangkuk digunakan untuk menyediakan komponen jadual dengan konfigurasi data dan lajur. Konfigurasi ini menentukan cara data akan dipaparkan dalam jadual. Kami menggunakan table.getHeaderGroups() dan table.getRowModel().rows untuk menjana pengepala dan badan jadual.

Selepas beberapa penggayaan, jadual akan kelihatan seperti imej di bawah:

Langkah 3: Sesuaikan dengan sewajarnya

Anda kini boleh mula menyesuaikan jadual mengikut keperluan anda. Anda boleh menambah carian, pengisihan, penomboran atau sebarang ciri lain. TanStack menyediakan cangkuk dan kemudahan untuk menambah semua fungsi ini. Anda boleh merujuk kepada dokumentasi rasmi mereka di sini.

Kesimpulan

Meja TanStack boleh menjadi pilihan yang bagus untuk jadual anda yang seterusnya. UI tanpa kepala menjadikan penyepaduan reka bentuk menjadi mudah dan set ciri yang kaya menjadikannya mudah untuk membuat penomboran, pengisihan, penapisan dan ciri lain. Untuk kejelasan lanjut, teroka contoh tambahan dalam dokumentasi.

Selamat mengekod!

Sumber

• Dokumentasi Jadual TanStack

---

Kami di CreoWis percaya dalam berkongsi pengetahuan secara terbuka untuk membantu komuniti pembangun berkembang. Mari berkolaborasi, bercita-cita dan mencipta semangat untuk menyampaikan pengalaman produk yang mengagumkan.

Jom sambung:

• X/Twitter

• LinkedIn

• Tapak web

Artikel ini dihasilkan oleh Prachi Sahu, pembangun yang bersemangat di CreoWis. Anda boleh menghubunginya di X/Twitter, LinkedIn, dan mengikuti kerjanya di GitHub.

Atas ialah kandungan terperinci Jadual TanStack Dijelaskan: Semua yang Anda Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!