@equinor/eds-data-grid-react/dist/esm/components/TableCell.js

A feature-rich data-grid written in React, implementing the Equinor Design System

import { Table } from '@equinor/eds-core-react';
import { tokens } from '@equinor/eds-tokens';
import styled from 'styled-components';
import { ResizeInner } from './Resizer.js';

const FilterVisibility = styled.div.withConfig({
  displayName: "TableCell__FilterVisibility",
  componentId: "sc-1g0k23m-0"
})([""]);
const TableCell = styled(Table.Cell).withConfig({
  displayName: "TableCell",
  componentId: "sc-1g0k23m-1"
})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}", ":not(:focus-within){opacity:", ";}&:hover ", "{opacity:1;}", ":focus-within{opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
  if (p.$pinned) {
    return `${p.$pinned}: ${p.$offset}px;`;
  }
  return '';
}, p => {
  if (p.$sticky && p.$pinned) return 'z-index: 13';
  if (p.$sticky || p.$pinned) return 'z-index: 12';
}, ResizeInner, tokens.colors.interactive.primary__hover.rgba, FilterVisibility, ({
  $activeFilter
}) => $activeFilter ? 1 : 0, FilterVisibility, FilterVisibility);

export { FilterVisibility, TableCell };