در این درس از این دوره می خواهیم قابلیت مرتب سازی را به جدول اضافه کنیم. این قابلیت به کاربر اجازه می دهد تا با کلیک بر روی عنوان ستون، اطلاعات جدول را بر اساس حالت صعودی و نزولی ستون مورد نظر مرتب سازی کند. همچنین کاربر با نگه داشتن دکمه ctrl می تواند چند ستون را برای مرتب سازی انتخاب کند.
برای مرتب سازی سه توجه عامل نیاز است:
- نام ستون یا ستون هایی که می خواهیم بر اساس آنها اطلاعات مرتب سازی کنیم
- صعودی یا نزولی بودن مرتب سازی برای هر یک از ستون های انتخاب شده
- ترتیب مرتب سازی در زمان انتخاب چند ستون
در ابتدا هیچ مرتب سازی بر روی ستون ها انجام نمی شود. اولین کلیک کاربر بر روی هر ستون باعث مرتب سازی جدول به صورت صعودی بر اساس آن ستون می شود. دومین کلیک بر روی همان ستون باعث مرتب سازی نزولی بر اساس همان ستون می شود و با سومین کلیک وضعیت به حالت اولیه بر می گردد یعنی نمایش اطلاعات جدول بدون مرتب سازی. همچنین کلیک بر روی هر ستون باعث لغو مرتب سازی بر اساس سایر ستون ها خواهد شد.
با نگه داشتن دکمه ctrl صفحه کلید و کلیک بر روی نام ستون ها می توانیم چند ستون را برای انجام عملیات مرتب سازی انتخاب کنیم. در این حالت چند بار کلیک بر روی یک ستون وضعیت مرتب سازی بر اساس آن ستون را از صعودی به نزولی به عدم مرتب سازی بر اساس آن ستون تغییر می دهد.
برای انجام مرتب سازی بر روی لیست آیتم ها از کتابخانه lodash استفاده می کنیم.