mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 01:38:07 +08:00
Jack Franklin
cfda4f910c
One of the features we need to support in the new DataGrid is a context menu to hide/show columns. Therefore in preparation this CL updates the API for a `column` from just the `hidden` field to `visible` and `hideable`. The former denotes if the column is visible or not, and `hideable` denotes if the user can hide/show it via the context menu. There's no user facing change here, just type changes in preparation for future work. Bug: 1150793, 1125968 Change-Id: Idfa95a27aab741388548e10ff83263c6b7338724 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2550075 Reviewed-by: Paul Lewis <aerotwist@chromium.org> Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
73 lines
2.0 KiB
HTML
73 lines
2.0 KiB
HTML
<!--
|
|
Copyright 2020 The Chromium Authors. All rights reserved.
|
|
Use of this source code is governed by a BSD-style license that can be
|
|
found in the LICENSE file.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>Adding data example</title>
|
|
<style>
|
|
#container {
|
|
width: 80%;
|
|
border: 1px solid black;
|
|
padding: 20px;
|
|
}
|
|
|
|
button {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div id="container">
|
|
<button id="add">Add</button>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
|
|
import * as Components from '../../ui/components/components.js';
|
|
|
|
ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent())
|
|
|
|
const renderComponent = () => {
|
|
const component = new Components.DataGrid.DataGrid();
|
|
|
|
component.data = {
|
|
columns: [
|
|
{ id: 'key', title: 'Key', widthWeighting: 1, visible: true, hideable: false },
|
|
{ id: 'value', title: 'Value', widthWeighting: 1, visible: true, hideable: false },
|
|
],
|
|
rows: [
|
|
{cells:[{ columnId: 'key', value: 'foo', title: 'foo' }, { columnId: 'value', value: 'bar', title: 'bar' }]}
|
|
]
|
|
}
|
|
|
|
document.getElementById('container').appendChild(component)
|
|
|
|
document.querySelector('#add').addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
|
|
const key = Math.floor(Math.random() * 10);
|
|
const value = Math.floor(Math.random() * 10);
|
|
const randomDataRow = {cells:[
|
|
{ columnId: 'key', value: `Key: ${key}`, title: `Key: ${key}`},
|
|
{ columnId: 'value', value: `Value: ${value}`, title: `Value: ${value}`},
|
|
]}
|
|
|
|
component.data = {
|
|
...component.data,
|
|
rows: [...component.data.rows, randomDataRow]
|
|
}
|
|
})
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|