80bb372920
Summary: Changelog: most data tables allow for horizontal scrolling now if they run out of space This diff introduces support for horizontal scrolling in datatables. Originally thought about making this a view option, but doing automatically works actually quite fine. By default the columns resize as they did, but if either a column is made bigger or the window is so small no space is left, a horizontal scrollbar can be used. This adresses several usability issues reported in GH / workplace fixes https://github.com/facebook/flipper/issues/2608 Reviewed By: antonk52 Differential Revision: D33368216 fbshipit-source-id: 206c761a5873cf0396af091f2cbdedc3e638afac
48 lines
1013 B
TypeScript
48 lines
1013 B
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {DataTable, DataTableColumn} from 'flipper-plugin';
|
|
import {useCallback} from 'react';
|
|
|
|
export type KeyValueItem = {
|
|
key: string;
|
|
value: string;
|
|
};
|
|
|
|
const columns: DataTableColumn<KeyValueItem>[] = [
|
|
{
|
|
key: 'key',
|
|
width: 160,
|
|
title: 'Key',
|
|
},
|
|
{
|
|
key: 'value',
|
|
title: 'Value',
|
|
wrap: true,
|
|
},
|
|
];
|
|
|
|
export function KeyValueTable({items}: {items: KeyValueItem[]}) {
|
|
const handleCopyRows = useCallback((rows: KeyValueItem[]) => {
|
|
return rows.map(({key, value}) => `${key}: ${value}`).join('\n');
|
|
}, []);
|
|
|
|
return (
|
|
<DataTable<KeyValueItem>
|
|
columns={columns}
|
|
records={items}
|
|
enableSearchbar={false}
|
|
scrollable={false}
|
|
enableHorizontalScroll={false}
|
|
onCopyRows={handleCopyRows}
|
|
/>
|
|
);
|
|
}
|