{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c1a5480b226a3131566d493b347f788bfae1c29","tarball":"https://registry.npmjs.org/@material/data-table/-/data-table-3.0.0-alpha.1.tgz","fileCount":39,"integrity":"sha512-hzELq45cHQBFaglSwUT8acsBmazQ52Q/35SEu9qHN5blZvoE03WpMRoflU3iNP01BQYpGgaD3+qyf9ELWTBgyA==","signatures":[{"sig":"MEUCIFG4YIkg2LLiGnCk1Or9dfBd8+nl3MtCoE5JvwKYdGZrAiEA2VBNrOgI2tbBpoGK1L+336C/cwm++i2sOIxs9MHh8C4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxJCRA9TVsSAnZWagAAB7AP/2V4iXMw4ttdB9107fAZ\n7vn76hP5z5njli9l5hrYd8TvMZ4v2DlhimU0a0dfWykge4K55ddx/B6l8jRW\ny+u3r3+XpAP/Bb9mre1+U1L9+Bafe2xc9vS3qu0wDhlzgZ5wcyGyoj84w/ho\nmBH3MebAai2jxJmrkP/ySm/VPAGPSkyHlj9bW+7ZxZUtH28eGrAoNxuDBCt6\nVFd8c5E6m/w34rH+6nB9mqRLRS1ZtAha44DACe3+AuVWHmQnxqgPinQD1D5k\nGq3kuIjHpujSATu7w5mv4RlDvHK3fIcXRCY+0MkFPiSeFUzSvJUDZN6efI7D\nw/qPiyryeTGq7assp6ZAgRR0Yw8B4BuX6MwX97dqERP+3vDHQTXTR9ugY7qG\nHMxItKDj/+IO9LD3538Sf16xJWLegAHE9lKCxgMV1OpQcrJ40oWF7rjCbxNO\nChk/O3gbuYu4ji0Y7eQe5yJqXRYcHBRuXphcnsfvldqObJ6tDGlnrIYVw8ic\n6FFpiXRJTmhXVs976atpd34LwSnHfFNwYbA8DsobdMmVlRG6diYd+p1DT+2t\nTuXa0isVkqZcygyIOZH7Ak5ER8b3Z4nGBQoyEi4JZkehqhBjbOYQyAvqHcbR\nds8D7kMwWC7vsKpeY6lIA845GTQX+0aurp9EhI7ORmG8QDASzKjxPxHWKVmG\n4REg\r\n=mPen\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.dataTable.js","name":"@material/data-table","types":"dist/mdc.dataTable.d.ts","module":"index.js","readme":"\n\n# Data Table\n\nData tables display sets of data.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/data-table\n```\n\n### Styles\n\n```scss\n@import \"@material/data-table/mdc-data-table\";\n```\n\n> *NOTE*: Styles for any components you intend to include within data-table (e.g. Checkboxes, etc.) must also be\n> imported.\n\n### JavaScript Instantiation\n\n```js\nimport {MDCDataTable} from '@material/data-table';\nconst dataTable = new MDCDataTable(document.querySelector('.mdc-data-table'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n> Instantiating `MDCDataTable` component is only required to add interactions for example, row selection.\n\nMDC Data Table component auto instantiates `MDCCheckbox` for header row checkbox and all row checkboxes. Make sure to set required class names to instantiate checkbox component. We suggest to use `layout` API when rows are added or removed from data table to register new checkbox components.\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DessertCarbs (g)Protein (g)Comments
Frozen yogurt244.0Super tasty
Ice cream sandwich374.3I like ice cream more
Eclair246.0New filing flavor
\n
\n```\n## Variants\n\n### Data table with row selection\n\n```html\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n \n \n
\n
\n
\n 		DessertCarbs (g)Protein (g)
\n
\n \n
\n \n \n \n
\n
\n
\n 		Frozen yogurt244.0
\n
\n \n
\n \n \n \n
\n
\n
\n 		Ice cream sandwich374.3
\n
\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-data-table` | Mandatory. The root DOM element containing `table` and other supporting elements.\n`mdc-data-table__table` | Mandatory. Table element. Added to `table` HTML tag.\n`mdc-data-table__header-row` | Mandatory. Table header row element. Added to `thead > tr` HTML tag.\n`mdc-data-table__header-cell` | Mandatory. Table header cell element. Added to `thead > th > td` HTML tag.\n`mdc-data-table__header-cell--checkbox` | Optional. Table header cell element that contains `mdc-checkbox`. Added to `thead> th > td:first-child` HTML tag.\n`mdc-data-table__content` | Mandatory. Table body element. Added to `tbody` HTML tag.\n`mdc-data-table__row` | Mandatory. Table row element. Added to `tbody > tr` HTML tag.\n`mdc-data-table__cell` | Mandatory. Table cell element. Added to `tbody > tr > td` HTML tag.\n`mdc-data-table__cell--numeric` | Optional. Table cell element that contains numeric data. Added to `tbody > tr > td` HTML tag.\n`mdc-data-table__cell--checkbox` | Optional. Table cell element that contains `mdc-checkbox`. Added to `thead> th > td:first-child` HTML tag.\n`mdc-data-table__header-row-checkbox` | Optional. Checkbox element rendered inside table header row element. Add this class name to `mdc-checkbox` element to override styles required for data-table.\n`mdc-data-table__row-checkbox` | Optional. Checkbox element rendered inside table row element. Add this class name to `mdc-checkbox` element to override styles required for data-table.\n`mdc-data-table__row--selected` | Optional. Modifier class added to `mdc-data-table__row` when table row is selected.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-data-table-fill-color($color)` | Sets the background color of data-table surface.\n`mdc-data-table-row-fill-color($color)` | Sets the background color of table row container.\n`mdc-data-table-header-row-fill-color($color)` | Sets the background color of table header row container.\n`mdc-data-table-selected-row-fill-color($color)` | Sets the background color of selected row container.\n`mdc-data-table-checked-icon-color($color)` | Sets the checked icon color.\n`mdc-data-table-divider-color($color)` | Sets the table rows divider color.\n`mdc-data-table-divider-size($size)` | Sets the table rows divider size.\n`mdc-data-table-row-hover-fill-color($color)` | Sets the background color of table row on hover.\n`mdc-data-table-header-row-text-color($color)` | Sets the header row text color.\n`mdc-data-table-row-text-color($color)` | Sets the row text color.\n`mdc-data-table-shape-radius($radius)` | Sets the rounded shape with given radius size. `$radius` can be single radius or list radius values up to 4 list size.\n`mdc-data-table-stroke-size($size)` | Sets the border size of data-table.\n`mdc-data-table-stroke-color($color)` | Sets the border color of data-table.\n`mdc-data-table-header-row-height($height)` | Sets the header row height.\n`mdc-data-table-row-height($height)` | Sets row height.\n`mdc-data-table-cell-padding($leading-padding, $trailing-padding)` | Sets leading & trailing padding for all cells.\n`mdc-data-table-column-widths($width-list)` | Sets the custom widths for each table column.\n\n## Accessibility\n\nPlease refer [WAI-ARIA Authoring Practices for table](https://www.w3.org/TR/wai-aria-practices-1.1/#table) for ARIA recommended role, states & properties required for table element.\n\n## Events\n\nPlease use MDCDataTable's constants file to access these event constants.\n\n```ts\nconst {events} from '@material/data-table/constants';\n// `events.ROW_SELECTION_CHANGED` to access event constant.\n```\n\nEvent constant | Event name | Description\n-- | -- | --\n`ROW_SELECTION_CHANGED` | `MDCDataTable:changed` | Event emitted when row checkbox is checked or unchecked.\n`SELECTED_ALL` | `MDCDataTable:selectedAll` | Event emitted when header row checkbox is checked.\n`UNSELECTED_ALL` | `MDCDataTable:unselectedAll` | Event emitted when header row checkbox is unchecked.\n\n## `MDCDataTable` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`layout() => void` | Registers new row checkboxes, header row checkbox and updates the state of header row checkbox. Use this when rows are added / removed from data table.\n`getRows() => HTMLElement[]` | Returns array of row elements.\n`getSelectedRowIds() => Array` | Returns array of selected row ids.\n`setSelectedRowIds(rowIds: string[])` | Sets selected row ids. Overwrites previously selected rows.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Data Table for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDataTableAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClassAtRowIndex(rowIndex: number, cssClasses: string) => void` | Adds a class name to row element at given row index excluding header row.\n`getRowCount() => number` | Returns row count excluding header row.\n`getRowElements() => HTMLElement[]` | Returns array of row elements excluding header row.\n`getRowIdAtIndex(rowIndex: number) => string | null` | Returns row id of row element at given row index based on `data-row-id` attribute on row element `tr`.\n`getRowIndexByChildElement(el: Element) => number` | Returns index of row element that contains give child element.\n`getSelectedRowCount() => number` | Returns selected row count.\n`isHeaderRowCheckboxChecked() => boolean` | Returns true if header row checkbox is checked.\n`isRowsSelectable() => boolean` | Returns true if table rows are selectable.\n`notifyRowSelectionChanged(data: MDCDataTableRowSelectionChangedEventDetail) => void` | Notifies when row selection is changed.\n`notifySelectedAll() => void` | Notifies when header row is checked.\n`notifyUnselectedAll() => void` | Notifies when header row is unchecked.\n`registerHeaderRowCheckbox() => Promise | void` | Initializes header row checkbox. Destroys previous header row checkbox instance if any. Can return Promise only if registering checkbox is asynchronous.\n`registerRowCheckboxes() => Promise | void` | Initializes all row checkboxes. Destroys all previous row checkbox instances if any. This is usually called when row checkboxes are added or removed from table. Can return Promise only if registering checkbox is asynchronous.\n`removeClassAtRowIndex(rowIndex: number, cssClasses: string) => void` | Removes class name from row element at give row index.\n`setAttributeAtRowIndex(rowIndex: number, attr: string, value: string) => void` | Sets attribute to row element at given row index.\n`setHeaderRowCheckboxChecked(checked: boolean) => void` | Sets header row checkbox checked or unchecked.\n`setHeaderRowCheckboxIndeterminate(indeterminate: boolean) => void` | Sets header row checkbox to indeterminate.\n`setRowCheckboxCheckedAtIndex(rowIndex: number, checked: boolean) => void` | Sets row checkbox to checked or unchecked at given row index.\n\n### `MDCDataTableFoundation`\n\nMethod Signature | Description\n--- | ---\n`layout() => void` | Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. Use this if registering checkbox is synchronous.\n`layoutAsync() => Promise | void` | Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. Use this only if `registerRowCheckboxes` and `registerHeaderRowCheckboxe` are asynchronous.\n`getRows() => HTMLElement[]` | Returns array of row elements.\n`setSelectedRowIds(rowIds: string[]) => void` | Sets selected row ids. Overwrites previously selected rows.\n`getSelectedRowIds() => Array` | Returns array of selected row ids.\n`handleHeaderRowCheckboxChange() => void` | Handles header row checkbox change event.\n`handleRowCheckboxChange(event: Event) => void` | Handles change event originated from row checkboxes.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","data table"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components Web data table component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.1","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.1","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/checkbox":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/data-table_3.0.0-alpha.1_1560366151871_0.08274786601854323","host":"s3://npm-registry-packages"},"_id":"@material/data-table@3.0.0-alpha.1","version":"3.0.0-alpha.1"}