Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
import { Title } from '@ui5/webcomponents-react/lib/Title';
import React from 'react';
import notes from '../AnalyticalTable.md';
import generateData from './generateData';
const columns = [
{
Header: 'Name',
accessor: 'name' // String-based value accessors!
},
{
Header: 'Age',
accessor: 'age',
hAlign: TextAlign.End,
disableGrouping: true,
className: 'superCustomClass'
},
{
Header: 'Friend Name',
accessor: 'friend.name'
},
{
Header: () => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age',
hAlign: TextAlign.End,
filter: (rows, accessor, filterValue) => {
if (filterValue === 'all') {
return rows;
}
if (filterValue === 'true') {
},
{
Header: 'Age',
accessor: 'age',
hAlign: TextAlign.End,
disableGrouping: true,
className: 'superCustomClass'
},
{
Header: 'Friend Name',
accessor: 'friend.name'
},
{
Header: () => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age',
hAlign: TextAlign.End,
filter: (rows, accessor, filterValue) => {
if (filterValue === 'all') {
return rows;
}
if (filterValue === 'true') {
return rows.filter((row) => row.values[accessor] >= 21);
}
return rows.filter((row) => row.values[accessor] < 21);
},
Filter: ({ column }) => {
return (
<select> column.setFilter(event.target.value)}
style={{ width: '100%' }}
value={column.filterValue ? column.filterValue : 'all'}
></select>
hooks.getCellProps.push((cellProps, { cell: { column }, instance }) => {
const { classes, rowHeight } = instance.webComponentsReactProperties;
const style: CSSProperties = {};
if (rowHeight) {
style.height = `${rowHeight}px`;
}
switch (column.hAlign) {
case TextAlign.Begin:
style.textAlign = 'start';
break;
case TextAlign.Center:
style.textAlign = 'center';
break;
case TextAlign.End:
style.textAlign = 'end';
break;
case TextAlign.Left:
style.textAlign = 'left';
break;
case TextAlign.Right:
style.textAlign = 'right';
break;
}
switch (column.vAlign) {
case VerticalAlign.Bottom:
style.verticalAlign = 'bottom';
break;
case VerticalAlign.Middle:
style.verticalAlign = 'middle';
break;
export const useCellStyling = ({ rowHeight }, classes) => ({ column }) => {
const style: CSSProperties = {};
if (rowHeight) {
style.height = `${rowHeight}px`;
}
switch (column.hAlign) {
case TextAlign.Begin:
style.justifyContent = 'flex-start';
break;
case TextAlign.Center:
style.justifyContent = 'center';
break;
case TextAlign.End:
style.justifyContent = 'flex-end';
break;
case TextAlign.Left:
style.justifyContent = 'left';
break;
case TextAlign.Right:
style.justifyContent = 'right';
break;
}
switch (column.vAlign) {
case VerticalAlign.Bottom:
style.alignItems = 'flex-end';
break;
case VerticalAlign.Middle:
style.alignItems = 'center';
break;