JenniferFuBook

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

import './abap/abap.contribution';
import './apex/apex.contribution';
import './azcli/azcli.contribution';
import './bat/bat.contribution';
import './bicep/bicep.contribution';

JenniferFuBook

import Editor from '@monaco-editor/react';

function App() {
  return (
    <Editor height="100vh" language="javascript" value="console.log('Hello, World!');" />
  );
}

export default App;

JenniferFuBook

{
  "name": "@monaco-editor/react",
  "version": "4.4.6",
  "description": "Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins",
  "author": "Suren Atoyan <[email protected]>",
  "main": "lib/cjs/index.js",
  "module": "lib/es/index.js",
  "unpkg": "lib/umd/monaco-react.min.js",
  "jsdelivr": "lib/umd/monaco-react.min.js",
  "types": "lib/types.d.ts",

JenniferFuBook

import { useEffect, useMemo, useState } from 'react';
import { Button, Table } from 'antd';
import { EnterOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import {
  createNewRow,
  createTableData,
  getAllParentNodeKeys,
  getTableRowCount,
  removeRowFromTableData,

JenniferFuBook

import {
  adjectives,
  animals,
  colors,
  countries,
  uniqueNamesGenerator,
} from 'unique-names-generator';

export const createName = () =>
  uniqueNamesGenerator({

JenniferFuBook

import { TreeTable } from './TreeTable';

function App() {
  return <TreeTable/>;
}

export default App;

JenniferFuBook

function App() {
  const [tableData, setTableData] = useState(createTableData(10));
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);
  const [newRowKey, setNewRowKey] = useState();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [tableNodeCount, setTableNodeCount] = useState(0);

  ...

  useEffect(() => setTableNodeCount(getTableRowCount(tableData)), [tableData]);

JenniferFuBook

import { useEffect, useMemo, useState } from 'react';
import { Table } from 'antd';
import { EnterOutlined } from '@ant-design/icons';
import styled from 'styled-components';

...

const Container = styled.div`
  td.ant-table-cell.ant-table-cell-with-append {
    display: flex;

JenniferFuBook

const columns = useMemo(
  () => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    { title: 'Country', dataIndex: 'country', key: 'country' },
    {
      title: 'Add',

JenniferFuBook

import { useEffect, useMemo, useState } from 'react';
import { Table } from 'antd';

...

function App() {
  const [tableData, setTableData] = useState(createTableData(10));
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);
  const [newRowKey, setNewRowKey] = useState();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);