table.tsx 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import {useMemo} from 'react';
  2. import {COL_WIDTH_MINIMUM} from 'sentry/components/gridEditable';
  3. import {
  4. Body as _TableWrapper,
  5. Grid as _Table,
  6. GridBody,
  7. GridBodyCell,
  8. GridHead,
  9. GridHeadCell,
  10. GridRow,
  11. } from 'sentry/components/gridEditable/styles';
  12. interface TableProps extends React.ComponentProps<typeof _TableWrapper> {}
  13. export function Table({children, style, ...props}: TableProps) {
  14. return (
  15. <_TableWrapper {...props}>
  16. <_Table style={style}>{children}</_Table>
  17. </_TableWrapper>
  18. );
  19. }
  20. const MINIMUM_COLUMN_WIDTH = COL_WIDTH_MINIMUM;
  21. interface UseTableStylesOptions {
  22. items: any[];
  23. minimumColumnWidth?: number;
  24. }
  25. export function useTableStyles({
  26. items,
  27. minimumColumnWidth = MINIMUM_COLUMN_WIDTH,
  28. }: UseTableStylesOptions) {
  29. const tableStyles = useMemo(() => {
  30. const columns = new Array(items.length).fill(`minmax(${minimumColumnWidth}px, auto)`);
  31. return {
  32. gridTemplateColumns: columns.join(' '),
  33. };
  34. }, [items.length, minimumColumnWidth]);
  35. return {tableStyles};
  36. }
  37. export const TableBody = GridBody;
  38. export const TableBodyCell = GridBodyCell;
  39. export const TableHead = GridHead;
  40. export const TableHeadCell = GridHeadCell;
  41. export const TableRow = GridRow;