mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 01:38:07 +08:00
Jack Franklin
f3ebb1429d
This CL introduces the new DataGrid component, and is split into two: - DataGrid, which is a "plain" component that takes data and renders it. - DataGridController, which is a "smart" component that can take the data and manipulate it (e.g. sorting), before passing it into a DataGrid to be rendered. These components are not feature complete in that they do not support all features of the incumbent `DataGrid.js` but they are not designed to. The goal here is to land the initial data-grid components, and then work on using them in DevTools (as part of the protocol monitor). At that point we can extend functionality by seeing what is missing and testing in DevTools, rather than testing in isolation. This CL includes the implementation, unit tests and component documentation examples of the functionality that does exist, along with a README explaining the two components and when to use each one. Bug: 1125966 Change-Id: I1b5c9a0174c4563be64b5b4adcc8251d1498b55d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2461772 Commit-Queue: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Paul Lewis <aerotwist@chromium.org> Reviewed-by: Andres Olivares <andoli@chromium.org> Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
54 lines
1.6 KiB
HTML
54 lines
1.6 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>Basic Data grid controller example</title>
|
|
<style>
|
|
#container {
|
|
width: 80%;
|
|
border: 1px solid black;
|
|
padding: 20px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container">
|
|
</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.DataGridController.DataGridController();
|
|
|
|
component.data = {
|
|
columns: [
|
|
{ id: 'key', title: 'Key', sortable: true, widthWeighting: 1 },
|
|
{ id: 'value', title: 'Value', sortable: false, widthWeighting: 1 },
|
|
],
|
|
rows: [
|
|
// Each key is the ID of a column, and the value is the value for that column
|
|
{cells: [{ columnId: 'key', value: 'Bravo'}, { columnId: 'value', value: 'foobar'}] },
|
|
{cells: [{ columnId: 'key', value: 'Alpha'}, { columnId: 'value', value: 'bazbar'}] },
|
|
{cells: [{ columnId: 'key', value: 'Charlie'}, { columnId: 'value', value: 'bazbar'}] },
|
|
]
|
|
}
|
|
|
|
document.getElementById('container').appendChild(component)
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|