ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix table NoDataComponent layout

Browse Source
This commit is contained in:
IRBorisov 2023-10-10 11:30:12 +03:00
parent 5e0a8b7b7f
commit 3a67a1ae6b
1 changed files with 98 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
rsconcept/frontend/src/components/DataTable/index.tsx
View File

@ -108,106 +108,106 @@ export default function DataTable<TData extends RowData>({
} }
return ( return (
<div className='w-fit'> <div className='w-full'>
{isEmpty && (noDataComponent ?? <DefaultNoData />)} {isEmpty && (noDataComponent ?? <DefaultNoData />)}
{!isEmpty &&
{!isEmpty && <div className='flex flex-col items-stretch'>
<table> <table>
<thead <thead
className='clr-app shadow-border' className='clr-app shadow-border'
style={{ style={{
top: headPosition, top: headPosition,
position: 'sticky' position: 'sticky'
}} }}
>
{tableImpl.getHeaderGroups().map(
(headerGroup: HeaderGroup<TData>) => (
<tr key={headerGroup.id}>
{enableRowSelection &&
<th className='pl-3 pr-1'>
<SelectAll table={tableImpl} />
</th>}
{headerGroup.headers.map(
(header: Header<TData, unknown>) => (
<th key={header.id}
colSpan={header.colSpan}
className='px-2 py-2 text-xs font-semibold select-none whitespace-nowrap'
style={{
textAlign: header.getSize() > 100 ? 'left': 'center',
width: header.getSize(),
cursor: enableSorting && header.column.getCanSort() ? 'pointer': 'auto',
}}
onClick={enableSorting ? header.column.getToggleSortingHandler() : undefined}
>
{header.isPlaceholder ? null : (
<div className='flex gap-1'>
{flexRender(header.column.columnDef.header, header.getContext())}
{enableSorting && header.column.getCanSort() && <SortingIcon column={header.column} />}
</div>)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{tableImpl.getRowModel().rows.map(
(row: Row<TData>, index) => (
<tr
key={row.id}
className={
row.getIsSelected() ? 'clr-selected clr-hover' :
index % 2 === 0 ? 'clr-controls clr-hover' : 'clr-app clr-hover'
}
style={conditionalRowStyles && getRowStyles(row)}
> >
{enableRowSelection && {tableImpl.getHeaderGroups().map(
<td key={`select-${row.id}`} className='pl-3 pr-1 border-y'> (headerGroup: HeaderGroup<TData>) => (
<SelectRow row={row} /> <tr key={headerGroup.id}>
</td>} {enableRowSelection &&
{row.getVisibleCells().map( <th className='pl-3 pr-1'>
(cell: Cell<TData, unknown>) => ( <SelectAll table={tableImpl} />
<td </th>}
key={cell.id} {headerGroup.headers.map(
className='px-2 border-y' (header: Header<TData, unknown>) => (
style={{ <th key={header.id}
cursor: onRowClicked || onRowDoubleClicked ? 'pointer': 'auto', colSpan={header.colSpan}
paddingBottom: dense ? '0.25rem': '0.5rem', className='px-2 py-2 text-xs font-semibold select-none whitespace-nowrap'
paddingTop: dense ? '0.25rem': '0.5rem' style={{
}} textAlign: header.getSize() > 100 ? 'left': 'center',
onClick={event => onRowClicked && onRowClicked(row.original, event)} width: header.getSize(),
onDoubleClick={event => onRowDoubleClicked && onRowDoubleClicked(row.original, event)} cursor: enableSorting && header.column.getCanSort() ? 'pointer': 'auto',
> }}
{flexRender(cell.column.columnDef.cell, cell.getContext())} onClick={enableSorting ? header.column.getToggleSortingHandler() : undefined}
</td> >
))} {header.isPlaceholder ? null : (
</tr> <div className='flex gap-1'>
))} {flexRender(header.column.columnDef.header, header.getContext())}
</tbody> {enableSorting && header.column.getCanSort() && <SortingIcon column={header.column} />}
</div>)}
<tfoot> </th>
{tableImpl.getFooterGroups().map( ))}
(footerGroup: HeaderGroup<TData>) => ( </tr>
<tr key={footerGroup.id}>
{footerGroup.headers.map(
(header: Header<TData, unknown>) => (
<th key={header.id}>
{header.isPlaceholder ? null
: flexRender(header.column.columnDef.footer, header.getContext())
}
</th>
))}
</tr>
))} ))}
</tfoot> </thead>
</table>}
<tbody>
{!isEmpty && enablePagination && {tableImpl.getRowModel().rows.map(
<PaginationTools (row: Row<TData>, index) => (
table={tableImpl} <tr
paginationOptions={paginationOptions} key={row.id}
onChangePaginationOption={onChangePaginationOption} className={
/> row.getIsSelected() ? 'clr-selected clr-hover' :
} index % 2 === 0 ? 'clr-controls clr-hover' : 'clr-app clr-hover'
}
style={conditionalRowStyles && getRowStyles(row)}
>
{enableRowSelection &&
<td key={`select-${row.id}`} className='pl-3 pr-1 border-y'>
<SelectRow row={row} />
</td>}
{row.getVisibleCells().map(
(cell: Cell<TData, unknown>) => (
<td
key={cell.id}
className='px-2 border-y'
style={{
cursor: onRowClicked || onRowDoubleClicked ? 'pointer': 'auto',
paddingBottom: dense ? '0.25rem': '0.5rem',
paddingTop: dense ? '0.25rem': '0.5rem'
}}
onClick={event => onRowClicked && onRowClicked(row.original, event)}
onDoubleClick={event => onRowDoubleClicked && onRowDoubleClicked(row.original, event)}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
<tfoot>
{tableImpl.getFooterGroups().map(
(footerGroup: HeaderGroup<TData>) => (
<tr key={footerGroup.id}>
{footerGroup.headers.map(
(header: Header<TData, unknown>) => (
<th key={header.id}>
{header.isPlaceholder ? null
: flexRender(header.column.columnDef.footer, header.getContext())
}
</th>
))}
</tr>
))}
</tfoot>
</table>
{enablePagination &&
<PaginationTools
table={tableImpl}
paginationOptions={paginationOptions}
onChangePaginationOption={onChangePaginationOption}
/>}
</div>}
</div>); </div>);
} }