10 جدول فوق‌العاده با AngularJS
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 4 دقیقه

10 جدول فوق‌العاده با AngularJS

در این مقاله می خوایم بهتون تعدادی جدول زیبا که با AngularJS ساخته شدند رو معرفی کنی. همینطور که میدونید جداول جزء مهم‌ترین بلاک های اپلیکیشن های وب هستند. ما میتونیم جداول رو به کمک Angular 4 بسازیم و از قابلیت‌های خوب این تکنولوژی استفاده کنیم.

بهرحال با خلق تکنولوژِهای جدید و پیشروی به سمت اپلیکیشن های مدرن تر ممکنه شما هم به این فکر افتاده باشید که تغییراتی در جداول مورد استفاده تون بدین مثل واکنش گرا کردن, مرتب سازی داینامیک, فیلتر کردن نتایج و ویژگی‌های پیشرفته ی دیگر.

1 – ng2 Table

یک جدول ساده دارای سه پلاگین فیلتر کردن, صفحه بندی کردن, مرتب سازی. شما به پیکربندی خاصی برای ذخیره کردن تنظیمات پلاگین ها نیاز ندارید. کافیه طبق مثال آورده شده کار رو انجام بدید.

مسئولیت فیلترکردن محتوا به گردن کاربر هست. شما باید تعیین کنید که کدام ستون‌ها حاوی چه فیلتری باشه. شما میتونید فیلترهای مختلفی اعمال کنید. مثل فیلتر عنوان در هرستون. یا حتی فیلتر لیستی از اطلاعات در ستون ها.

مشاهده کدمشاهده دمو 

2 – Angular 2 Table Fluid Row

ngx-datatable یک کامپوننت Angular هست که برای نمایش اطلاعات بزرگ و پیچیده مناسبه. این کامپوننت شامل تمام ویژگی‌هاییست که شما از هر جدولی انتظار دارید, اما سبک و بدون وابستگی خارجی هست. این جدول طوری طراحی شده که بسیار منعطف و سبک باشه. این هیچ پیش فرضی درمورد اطلاعات شما یا اینکه شما چطور میخواهید فیلتر, مرتب یا صفحه بندی کنید, نداره. این برای مرورگرهای مدرن و توسط TypeScript, CSS3, HTML5 و Angular >=4 ساخته شده. این درواقع همزاد پروژه ای به نام angular-data-table هست که برای Angular 1٫x ساخته شده بود.

مشاهده کدمشاهده دمومستندات

3 – ng2 Table View

کامپوننت جدول به همراه مرتب سازی, فیلتر کردن, صفحه بندی, قالب سفارشی, … برای Angular2 هست و ازng2-table الهام گرفته. بهترین راه نصب این کامپوننت توسط NodeJS و از طریق npm هست.

مشاهده وبسایتمشاهده دمو

4 – ng2 Smart Table Library

یک جدول اطلاعاتی هوشمند به همراه قابلیت‌های مرتب سازی, فیلترینگ, صفحه بندی و اعمال اضافه/ویرایش/حذف. اولین کاری که باید انجام بدید اینه که دستورالعمل های ng2-smart-table رو به کامپوننت وارد کنید. تنها تنظیمی که برای کامپوننت وجود داره تا کار کنه تنظیمات ستون هاست. 

مشاهده کدمشاهده دمومستندات 

5 – Angular 2 Data Table Bootstrap 4

یک جدول ساده Angular 2 با امکانات داخلی مثل : صفحه بندی, مرتب سازی, انتخاب ردیف (تکی/چندتایی), ردیف های قابل گسترش, تغییر اندازه و انتخاب ستون ها. این کامپوننت علاوه بر کار کردن با مقادیر محلی, با منابع remote هم کار می کنه. قالب اون از بوت استرپ استفاده کرده بنابراین برای استفاده ازش نیاز به فایل css بوت استرپ هم دارید. دمو و کدها رو برای بدست آوردن اطلاعات بیشتر چک کنید :

مشاهده کدمشاهده دمو

6 – Fancy Grid Angular 2

این کامپوننت شامل امکانات فوق‌العاده‌ای مثل صفحه بندی, مرتب سازی, فیلترینگ, اعتبارسنجی, اطلاعات Ajax, اطلاعات فایل, RESTful. یکپارچه سازی با چارت ها, CRUD منعطف, ماژول فرم, قالب بندی و … هست.

مشاهده دمو

7 – Best Angular Data Grid Table

بهتون پیشنهاد میدیم هرچه زودتر استفاده از ag-Grid و Angular رو شروع کنید. شما با یک اپلیکیشن ساده شروع می‌کنید و بخش به بخش امکانات Grid رو بهش اضافه می‌کنید و درنهایت با یک اپلیکیشن تکامل یافته کارتون تموم میشه – اگر ag-Grid و Angular در قلب کارتون باشه. لطفاً درمورد اینکه چطور با این کامپوننت کار کنید و اطلاعات بیشتر و نمونه‌های انجام شده به لینک های زیر مراجعه بفرمایید.

مشاهده کدمشاهده دمومشاهده وبسایت

8 – Angular 2 Super Table

یک کامپوننت با ویژگی‌های کامل که توسط Angular2 ساخته شده. از قابلیت هاش میشه به : مجازی سازی ردیف ها, مرتب سازی ردیف ها, فرمت بندی, سفارشی سازی, تغییر سایز و فیلترینگ بر اساس ستون‌ها نام برد.

مشاهده کدمشاهده دمومستندات

9 – Vaadin Grid

Vaadin Grid یک کامپوننت با امکانات کامل هست که میتونه اطلاعات سنگین رو هم نمایش بده و بصورت کامل از صفحه بندی و بارگزاری دیتا از هر منبع دیتا پشتیبانی می کنه (مثل یک REST API) این کامپوننت به شما اجازه میده مرتب سازی و فیلتر اطلاعات انجام بدید و اینکه چطور جدول نمایش داده بشه رو سفارشی سازی کنید.

مشاهده کدمشاهده دمو

10 – Paper Datatable Implementation

یک پیاده‌سازی متریال دیزاین از جدول اطلاعاتی هست. راه اندازی اون بسیار سادست, به زیبایی استایل دهی میشه, پشتیبانی صفحه بندی و منابع دیتا خارجی رو داره و جفت حالات ویرایش inline و متریال دیزاین رو ساپورت می کنه. همچنین قابل استفاده در موبایل هاست, اما به خوبی اون رو پشتیبانی نمی کنه.

مشاهده کدمشاهده دمو

منبع

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
در انتظار ثبت رای

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید