Cara membuat jadual yang boleh disusun dan boleh ditapis dalam React

Artikel ini menunjukkan membina komponen jadual dinamik, disusun, dan boleh ditapis dalam React menggunakan Vite. Mari kita menyelaraskan penjelasan dan meningkatkan kejelasan.

Ciri -ciri Utama:

• Persediaan Rapid dengan Vite: Leverage Vite untuk Penciptaan Projek Pantas dan Persekitaran Pembangunan yang Dilancarkan.
• Pengendalian Data Dinamik: Gunakan Hook React untuk menguruskan data jadual, membolehkan penyortiran dan penapisan yang cekap. useState
• kebolehbacaan yang dipertingkatkan: Meningkatkan pengalaman pengguna dengan memformat nilai boolean (✅/❌) dan memanfaatkan tajuk meja.
• Kawalan interaktif: Melaksanakan medan input intuitif dan butang untuk pengurusan data yang lancar.
• overfiltering maklum balas: Menyediakan pemesejan yang jelas apabila tiada keputusan memadankan kriteria penapis.

Membina jadual:

Tutorial ini menganggap kebiasaan dengan konsep HTML, CSS, JavaScript, dan Basic React. Kami akan menggunakan TypeScript untuk keselamatan jenis, tetapi logik teras tetap disesuaikan dengan JavaScript.

1. Persediaan Projek: Buat projek React baru menggunakan Vite:

   <code class="language-bash">npm create vite@latest my-react-table -- --template react-ts</code>

2. Struktur Komponen: Susun projek anda dengan struktur berikut:

   <code>src
   ├── components
   │   └── Table
   │       ├── index.ts
   │       ├── table.css
   │       └── Table.tsx
   └── App.tsx</code>

3. Mock Data: Menjana data sampel menggunakan penjana JSON (mis., https://www.php.cn/link/8A1DF180EA2C0D298AA1D739FE720A0C ). Simpan data ini dalam . src/data.ts

pelaksanaan komponen ():

4. Komponen teras secara dinamik menjadikan jadual berdasarkan data yang disediakan. Ia termasuk fungsi untuk memformat nilai boolean dan memanfaatkan tajuk. Gaya ini dikendalikan dalam Table.tsx.

   table.css

   Menambah Kawalan:
Meningkatkan komponen dengan medan input untuk penapisan dan jatuh turun untuk memilih lajur penyortiran. Butang bertukar -tukar urutan semacam (menaik/menurun).

5. Penapisan Logik:
Fungsi penapis secara dinamik mengemas kini baris yang dipaparkan berdasarkan nilai input. Ia menukarkan data ke huruf kecil untuk carian kes-insensitif.

6. Logik Menyusun:
Fungsi penyortiran menggunakan lajur yang dipilih dan menyusun pesanan untuk mengatur data.

7. pengendalian overfiltering:
Paparkan mesej apabila tiada hasil sepadan dengan kriteria penapis.

8. Hasil Akhir:

Kod sumber lengkap boleh didapati di GitHub (pautan yang akan disediakan). Tutorial ini memberikan pendekatan ringkas dan cekap untuk mewujudkan komponen meja yang kuat dan mesra pengguna dalam React.

Atas ialah kandungan terperinci Cara membuat jadual yang boleh disusun dan boleh ditapis dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!