В частности, я хотел бы иметь возможность 1) установить ширину столбца dataTable 2) скрыть столбец
У меня есть кодовая ручка с работающей таблицей данных, но я не могу найти ссылку на css, который можно использовать.
Я пытаюсь сделать это без фреймворка и без Webpack или альтернатив. Т.е. просто css и не дерзко.
https://codepen.io/jgbgy/pen/bGdVNzL?editors=1111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Material Design Data Table</title>
<!-- material DEsign -->
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="table1" class="mdc-data-table">
<table class="mdc-data-table__table" aria-label="Dessert calories">
<thead>
<tr class="mdc-data-table__header-row">
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
<div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control"
aria-label="Checkbox for header row selection" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">data1</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">data2</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">data3</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">data4</th>
</tr>
</thead>
<tbody class="mdc-data-table__content">
<tr data-row-id="u0" class="mdc-data-table__row">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u0" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td class="mdc-data-table__cell">r1c1</td>
<td class="mdc-data-table__cell">r1c2</td>
<td class="mdc-data-table__cell">r1c3</td>
<td class="mdc-data-table__cell">r1c4</td>
</tr>
<tr data-row-id="u1" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u1" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td class="mdc-data-table__cell">Offline</td>
<td class="mdc-data-table__cell">monarch: prod shared ares-managed-features-provider-heavy</td>
<td class="mdc-data-table__cell">Huge</td>
<td class="mdc-data-table__cell">Triaged</td>
</tr>
<tr data-row-id="u2" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u2" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td class="mdc-data-table__cell">Online</td>
<td class="mdc-data-table__cell">monarch: prod shared ares-managed-features-provider-heavy</td>
<td class="mdc-data-table__cell">Minor</td>
<td class="mdc-data-table__cell">Not triaged</td>
</tr>
<tr data-row-id="u3" class="mdc-data-table__row">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u3" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td class="mdc-data-table__cell">Online</td>
<td class="mdc-data-table__cell">Arcus watch slowdown</td>
<td class="mdc-data-table__cell">Negligible</td>
<td class="mdc-data-table__cell">Triaged</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
console.log("initialised")
let MDCDataTable = mdc.dataTable.MDCDataTable;
let el = document.getElementById("table1");
let dataTable = new MDCDataTable(el);
</script>
</html>