Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: add widths for viritualized table

Browse Source
This commit is contained in:
Fredrik Oseberg 2022-08-10 13:15:33 +02:00
parent 1a30f42635
commit eaff77afd4
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
View File

@ -1,15 +1,14 @@
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import {SortingRule, useFlexLayout, useGlobalFilter, useSortBy, useTable} from 'react-table';
import { import {
SortableTableHeader, SortingRule,
Table, useFlexLayout,
TableBody, useGlobalFilter,
TableCell, useSortBy,
TablePlaceholder, useTable,
TableRow, VirtualizedTable, } from 'react-table';
} from 'component/common/Table';
import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { sortTypes } from 'utils/sortTypes'; import { sortTypes } from 'utils/sortTypes';
import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
@ -27,8 +26,8 @@ import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
import useLoading from 'hooks/useLoading'; import useLoading from 'hooks/useLoading';
import { VariantCell } from './VariantCell/VariantCell'; import { VariantCell } from './VariantCell/VariantCell';
import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell'; import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell';
import {PageHeader} from "../../../common/PageHeader/PageHeader"; import { PageHeader } from '../../../common/PageHeader/PageHeader';
import {PageContent} from "../../../common/PageContent/PageContent"; import { PageContent } from '../../../common/PageContent/PageContent';
const defaultSort: SortingRule<string> = { id: 'name' }; const defaultSort: SortingRule<string> = { id: 'name' };
const { value, setValue } = createLocalStorage( const { value, setValue } = createLocalStorage(
@ -88,7 +87,7 @@ export const PlaygroundResultsTable = ({
sortType: 'alphanumeric', sortType: 'alphanumeric',
filterName: 'variant', filterName: 'variant',
searchable: true, searchable: true,
width: 200, maxWidth: 200,
Cell: ({ Cell: ({
value, value,
row: { row: {
@ -112,10 +111,12 @@ export const PlaygroundResultsTable = ({
<FeatureStatusCell feature={row.original} /> <FeatureStatusCell feature={row.original} />
), ),
sortType: 'boolean', sortType: 'boolean',
maxWidth: 100,
sortInverted: true, sortInverted: true,
}, },
{ {
Header: '', Header: '',
maxWidth: 70,
id: 'info', id: 'info',
Cell: ({ row }: any) => ( Cell: ({ row }: any) => (
<FeatureResultInfoPopoverCell <FeatureResultInfoPopoverCell
@ -217,8 +218,6 @@ export const PlaygroundResultsTable = ({
// eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-render after search params change // eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-render after search params change
}, [loading, sortBy, searchValue]); }, [loading, sortBy, searchValue]);
return ( return (
<PageContent <PageContent
isLoading={loading} isLoading={loading}
@ -240,7 +239,6 @@ export const PlaygroundResultsTable = ({
/> />
} }
> >
<ConditionallyRender <ConditionallyRender
condition={!loading && !data} condition={!loading && !data}
show={() => ( show={() => (
@ -252,7 +250,9 @@ export const PlaygroundResultsTable = ({
)} )}
elseShow={() => ( elseShow={() => (
<Box ref={ref}> <Box ref={ref}>
<SearchHighlightProvider value={getSearchText(searchValue)}> <SearchHighlightProvider
value={getSearchText(searchValue)}
>
<VirtualizedTable <VirtualizedTable
rows={rows} rows={rows}
headerGroups={headerGroups} headerGroups={headerGroups}