July 6th, 2017
In the six months since our last post about Angular Material, the team been hard at work building cool new components and applying a heaping of polish. Some of the highlights include:
- Datepicker, expansion panel, and accordion components
- Improved support for @angular/platform-server
- Configurable scrolling strategies for Overlays
- Strict-null checks and no-unused-params compliance
- Typography extension to theming
- Live theme-picker on material.angular.io
- Lots and lots of bug fixes
We’re excited to announce today’s release of the brand new Component Dev Kit, and the initial version of the data-table component with Angular Material beta 8.
Component Dev Kit
Over the course of working on Angular Material, an important goal has been crafting a general, reusable foundation upon which components can be built. We’ve reached the point now where we want to start sharing this foundation with everyone as a standalone package: the Angular CDK.
The goal of the CDK is to give developers more tools to build awesome components for the web. This will be especially useful for projects that want to take advantage of the features of Angular Material without adopting the Material Design visual language.
The first beta release of the CDK is now available on npm as @angular/cdk. This initial release includes features pertaining to accessibility, text directionality, platform detection, and dynamic component instantiation. We’ll be continuing to move additional code from Angular Material into CDK with subsequent releases.
To get started building components using the CDK, install it from our npm repository and take a look at our documentation on GitHub for usage information.
By far the most requested feature for Angular Material, the data-table is now making its debut. We’re now releasing two table implementations, <md-table> as part of @angular/material, and <cdk-table> as part of @angular/cdk. Our styled implementation of our Material Design <md-table> is based on the functionality provided by the <cdk-table> component from the new CDK.
The <cdk-table> is an unopinionated, customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience.
@angular/material also builds on the data-table functionality, offering <md-paginator> and mdSort directives. These directives provide a UI for pagination and sorting in-line with the Material Design guidelines without being tightly coupled to the data-table itself.
For more information on how to get started with the data-table, see our guide, or check out the rest of the documentation on material.angular.io.
This is just the first taste of what we have in store for data-tables. You can watch the development of upcoming features like sticky headers, sticky columns, incremental row rendering, colspans, and more on our GitHub Pulse! You can also see the team’s planned work on GitHub.