@addev-be/ui 2.7.5 → 2.7.7

package/src/components/data/DataGrid/styles.ts

@@ -1,434 +1,446 @@
-import {
-  DEFAULT_FOOTER_ROW_HEIGHT,
-  DEFAULT_HEADER_ROW_HEIGHT,
-  DEFAULT_ROW_HEIGHT,
-  SELECTION_CELL_WIDTH,
-  TOOLBAR_HEIGHT,
-} from './constants';
-import { SpaceProps, space } from '../../../helpers/styled/space';
-import styled, { css } from 'styled-components';
-
-import { DataGridCellFCProps } from './types';
-import { ThemeColor } from '../../../providers/ThemeProvider/types';
-import { VirtualScrollerFiller } from '../VirtualScroller/styles';
-
-export const DataGridWrapper = styled.div<SpaceProps>`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-
-  ${space}
-`;
-
-export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: var(--space-1);
-  height: 100%;
-
-  ${({ $headerColor = 'base' }) => css`
-    background-color: var(--color-${$headerColor}-400);
-    &:hover,
-    &.active {
-      background-color: var(--color-${$headerColor}-500);
-    }
-  `}
-
-  cursor: col-resize;
-  display: none;
-`;
-
-type DataGridHeaderCellContainerProps = {
-  $isResizing?: boolean;
-  $headerColor?: ThemeColor;
-  $hasFilterOpened?: boolean;
-};
-
-export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContainerProps>`
-  align-items: center;
-  display: flex;
-  flex-wrap: nowrap;
-  font-weight: bold;
-  gap: var(--space-1);
-  height: 100%;
-  user-select: none;
-  line-height: 1.5rem;
-  padding: 0 var(--space-3);
-  position: relative;
-  box-sizing: border-box;
-
-  z-index: ${({ $isResizing }) => ($isResizing ? 1 : 0)};
-
-  ${({ $headerColor = 'base' }) =>
-    $headerColor
-      ? css`
-          background-color: var(--color-${$headerColor}-200);
-          color: var(--color-${$headerColor}-950);
-          &:hover {
-            background-color: var(--color-${$headerColor}-300);
-          }
-
-          & > button {
-            background-color: var(--color-${$headerColor}-400);
-            border-color: var(--color-${$headerColor}-500);
-            &:hover {
-              background-color: var(--color-${$headerColor}-500);
-              border-color: var(--color-${$headerColor}-600);
-            }
-          }
-          & > button.danger {
-            background-color: var(--color-red-400);
-            border-color: var(--color-red-500);
-            &:hover {
-              background-color: var(--color-red-500);
-              border-color: var(--color-red-600);
-            }
-          }
-        `
-      : css`
-          background-color: var(--color-base-200);
-          color: var(--color-text-950);
-          &:hover {
-            background-color: var(--color-base-300);
-          }
-        `}
-
-  button {
-    display: ${({ $hasFilterOpened }) => ($hasFilterOpened ? 'flex' : 'none')};
-  }
-
-  &:hover {
-    ${DataGridResizeGrip} {
-      display: block;
-    }
-    button {
-      display: flex;
-    }
-  }
-
-  & > span {
-    display: inline-block;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    flex: 1;
-    font-weight: bold;
-  }
-`;
-DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
-
-export const DataGridHeaderTextContainer = styled.div`
-  display: flex;
-  flex: 1;
-  line-height: 1rem;
-  align-items: center;
-  font-size: var(--text-md);
-  max-height: 100%;
-`;
-
-export const dataGridCellCss = css<DataGridCellFCProps>`
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding: 0 var(--space-3);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  user-select: ${({ $userSelect }) => ($userSelect ? 'text' : 'none')};
-  white-space: nowrap;
-  ${({ $headerColor = 'base' }) => css`
-    border-right: 1px solid var(--color-${$headerColor}-200);
-    border-bottom: 1px solid var(--color-${$headerColor}-200);
-    &:first-child {
-      border-left: 1px solid var(--color-${$headerColor}-300);
-    }
-    &:last-child {
-      border-right: 1px solid var(--color-${$headerColor}-300);
-    }
-  `}
-  background-color: ${({ $color = 'base' }) => `var(--color-${$color}-50)`};
-  text-align: ${({ $textAlign = 'left' }) => $textAlign};
-`;
-
-export const DataGridCell = styled.div<DataGridCellFCProps>`
-  ${dataGridCellCss}
-`;
-DataGridCell.displayName = 'DataGridCell';
-
-export const DataGridHeaderTitle = styled.div`
-  white-space: normal;
-  font-weight: bold;
-  color: var(--color-text-800);
-  height: auto;
-`;
-
-export const DataGridToolsRow = styled.div`
-  grid-column-start: 1;
-  grid-column-end: -1;
-  grid-row: 1;
-  display: flex;
-  gap: var(--space-2);
-  padding: var(--space-2);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  align-items: flex-end;
-`;
-
-export const DataGridToolsRowHeaderContent = styled.div`
-  flex: 1;
-`;
-
-export const DataGridToolsRowButtonsContainer = styled.div`
-  flex-shrink: 0;
-  display: flex;
-  gap: var(--space-1);
-  align-items: center;
-  padding: 0 var(--space-1);
-  position: sticky;
-  left: 0;
-`;
-
-export const DataGridContainer = styled.div<{
-  $headerRowHeight?: number;
-  $rowHeight?: number;
-  $rowsCount: number;
-  $showToolsHeader?: boolean;
-  $withFooter?: boolean;
-  $fixedColumnWidths?: (string | number)[];
-}>`
-  display: grid;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-base-50);
-  font-size: var(--text-base);
-  overflow: scroll;
-  grid-template-rows: ${({
-    $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT,
-    $withFooter = false,
-  }) =>
-    `${$headerRowHeight}px auto ${
-      $withFooter ? DEFAULT_FOOTER_ROW_HEIGHT + 'px' : ''
-    }`};
-
-  ${DataGridToolsRow} {
-    height: ${TOOLBAR_HEIGHT}px;
-  }
-  ${DataGridHeaderCellContainer} {
-    position: sticky;
-    top: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-      `${$headerRowHeight}px`};
-    height: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-      `${$headerRowHeight}px`};
-  }
-  ${DataGridCell} {
-    height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
-    line-height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
-    box-sizing: border-box;
-  }
-
-  ${({ $fixedColumnWidths = [] }) =>
-    $fixedColumnWidths.map(
-      (width, i) => `
-    ${DataGridHeaderCellContainer}:nth-child(${i + 1}) {
-      position: sticky;
-      left: ${
-        i === 0
-          ? '0'
-          : `calc(${$fixedColumnWidths
-              .slice(0, i)
-              .map((w) => (typeof w === 'number' ? `${w}px` : w))
-              .join(' + ')})`
-      };
-      z-index: 1;
-    }`
-    )}
-
-  ${({ $fixedColumnWidths = [] }) =>
-    $fixedColumnWidths.map(
-      (width, i) => `
-    ${DataGridCell}:nth-child(${i + 1}) {
-      position: sticky;
-      left: ${
-        i === 0
-          ? '0'
-          : `calc(${$fixedColumnWidths
-              .slice(0, i)
-              .map((w) => (typeof w === 'number' ? `${w}px` : w))
-              .join(' + ')})`
-      };
-      background-color: var(--color-base-50);
-      z-index: 1;
-    }`
-    )}
-
-  ${VirtualScrollerFiller} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: 2;
-  }
-
-  scrollbar-color: var(--color-base-500) var(--color-base-100);
-  scrollbar-width: auto;
-`;
-DataGridContainer.displayName = 'DataGridContainer';
-
-type DataGridHeaderOrFooterRowProps = {
-  $headerRowHeight?: number;
-  $headerColor?: ThemeColor;
-  $gridTemplateColumns: string;
-};
-
-const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
-  display: grid;
-  grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-    `${$headerRowHeight}px`};
-  z-index: 10;
-  position: sticky;
-  align-items: center;
-
-  ${({ $headerColor = 'base' }) =>
-    $headerColor
-      ? css`
-          background-color: var(--color-${$headerColor}-100);
-          color: var(--color-${$headerColor}-900);
-          ${DataGridHeaderCellContainer}:first-child {
-            border-left: 1px solid var(--color-${$headerColor}-300);
-          }
-          ${DataGridHeaderCellContainer}:last-child {
-            border-right: 1px solid var(--color-${$headerColor}-300);
-          }
-        `
-      : css`
-          background-color: var(--color-base-200);
-          color: var(--color-text-800);
-          ${DataGridHeaderCellContainer}:first-child {
-            border-left: 1px solid var(--color-base-300);
-          }
-          ${DataGridHeaderCellContainer}:last-child {
-            border-right: 1px solid var(--color-base-300);
-          }
-        `}
-`;
-
-export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
-  ({ $gridTemplateColumns }) => ({
-    style: {
-      gridTemplateColumns: $gridTemplateColumns,
-    },
-  })
-)`
-  ${dataGridHeaderOrFooterRowCss}
-  top: 0;
-  border-top: 1px solid
-    var(--color-${({ $headerColor = 'base' }) => $headerColor}-300);
-`;
-DataGridHeaderRow.displayName = 'DataGridHeaderRow';
-
-export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
-  ({ $gridTemplateColumns }) => ({
-    style: {
-      gridTemplateColumns: $gridTemplateColumns,
-    },
-  })
-)`
-  ${dataGridHeaderOrFooterRowCss}
-  border-top: 1px solid var(--color-${({ $headerColor = 'base' }) =>
-    $headerColor}-300);
-  border-bottom: 1px solid
-    var(--color-${({ $headerColor = 'base' }) => $headerColor}-300);
-  bottom: 0;
-`;
-DataGridFooterRow.displayName = 'DataGridFooterRow';
-
-type DataGridRowProps = {
-  $edited?: boolean;
-};
-
-export const DataGridRow = styled.div<DataGridRowProps>`
-  display: contents;
-
-  /* &:last-child > ${DataGridCell} {
-    border-bottom: none;
-  } */
-
-  &:hover > ${DataGridCell} {
-    background-color: var(--color-blue-100);
-  }
-
-  ${({ $edited }) =>
-    $edited &&
-    css`
-      & > ${DataGridCell}, & > ${SelectionCell} {
-        background-color: var(--color-warning-100);
-        color: var(--color-warning-900);
-      }
-      &:hover > ${DataGridCell}, &:hover > ${SelectionCell} {
-        background-color: var(--color-blue-100);
-      }
-    `}
-`;
-DataGridRow.displayName = 'DataGridRow';
-
-export const LoadingCell = styled(DataGridCell)`
-  padding: var(--space-2);
-  box-sizing: border-box;
-
-  &.animate-pulse > div {
-    background-color: var(--color-base-200);
-    border-radius: var(--rounded-full);
-    width: 100%;
-    height: 100%;
-  }
-`;
-LoadingCell.displayName = 'LoadingCell';
-
-const selectionCellStyle = css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--space-8);
-  cursor: pointer;
-  width: ${SELECTION_CELL_WIDTH};
-
-  & > input[type='checkbox'] {
-    margin: 0;
-    height: var(--space-4);
-    width: var(--space-4);
-    border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-base-300);
-    color: var(--color-primary-600);
-  }
-`;
-
-export const SelectionCell = styled(DataGridCell)`
-  ${selectionCellStyle}
-  padding: 0 var(--space-1);
-`;
-SelectionCell.displayName = 'SelectionCell';
-
-export const HeaderSelectionCell = styled(DataGridHeaderCellContainer)`
-  ${selectionCellStyle}
-  padding: 0;
-  ${({ $headerColor = 'base' }) => css`
-    background-color: var(--color-${$headerColor}-200);
-  `}
-`;
-
-HeaderSelectionCell.displayName = 'HeaderSelectionCell';
-
-export const ResizeBackdrop = styled.div.attrs({
-  className: 'ResizeBackdrop',
-})`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0);
-  cursor: col-resize;
-  z-index: 100;
-`;
-ResizeBackdrop.displayName = 'ResizeBackdrop';
+import {
+  DEFAULT_FOOTER_ROW_HEIGHT,
+  DEFAULT_HEADER_ROW_HEIGHT,
+  DEFAULT_ROW_HEIGHT,
+  SELECTION_CELL_WIDTH,
+  TOOLBAR_HEIGHT,
+} from './constants';
+import { SpaceProps, space } from '../../../helpers/styled/space';
+import styled, { css } from 'styled-components';
+
+import { DataGridCellFCProps } from './types';
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+import { VirtualScrollerFiller } from '../VirtualScroller/styles';
+
+export const DataGridWrapper = styled.div<SpaceProps>`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  ${space}
+`;
+
+export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--space-1);
+  height: 100%;
+
+  ${({ $headerColor = 'base' }) => css`
+    background-color: var(--color-${$headerColor}-400);
+    &:hover,
+    &.active {
+      background-color: var(--color-${$headerColor}-500);
+    }
+  `}
+
+  cursor: col-resize;
+  display: none;
+`;
+
+type DataGridHeaderCellContainerProps = {
+  $isResizing?: boolean;
+  $headerColor?: ThemeColor;
+  $hasFilterOpened?: boolean;
+  $textAlign?: 'left' | 'center' | 'right';
+};
+
+export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContainerProps>`
+  align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  font-weight: bold;
+  gap: var(--space-1);
+  height: 100%;
+  user-select: none;
+  line-height: 1.5rem;
+  padding: 0 var(--space-3);
+  position: relative;
+  box-sizing: border-box;
+  justify-content: ${({ $textAlign = 'left' }) =>
+    $textAlign === 'left'
+      ? 'flex-start'
+      : $textAlign === 'center'
+      ? 'center'
+      : 'flex-end'};
+
+  z-index: ${({ $isResizing }) => ($isResizing ? 1 : 0)};
+
+  ${({ $headerColor = 'base' }) =>
+    $headerColor
+      ? css`
+          background-color: var(--color-${$headerColor}-200);
+          color: var(--color-${$headerColor}-950);
+          &:hover {
+            background-color: var(--color-${$headerColor}-300);
+          }
+
+          & > button {
+            background-color: var(--color-${$headerColor}-400);
+            border-color: var(--color-${$headerColor}-500);
+            &:hover {
+              background-color: var(--color-${$headerColor}-500);
+              border-color: var(--color-${$headerColor}-600);
+            }
+          }
+          & > button.danger {
+            background-color: var(--color-red-400);
+            border-color: var(--color-red-500);
+            &:hover {
+              background-color: var(--color-red-500);
+              border-color: var(--color-red-600);
+            }
+          }
+        `
+      : css`
+          background-color: var(--color-base-200);
+          color: var(--color-text-950);
+          &:hover {
+            background-color: var(--color-base-300);
+          }
+        `}
+
+  button {
+    display: ${({ $hasFilterOpened }) => ($hasFilterOpened ? 'flex' : 'none')};
+  }
+
+  &:hover {
+    ${DataGridResizeGrip} {
+      display: block;
+    }
+    button {
+      display: flex;
+    }
+  }
+
+  & > span {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex: 1;
+    font-weight: bold;
+  }
+`;
+DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
+
+export const DataGridHeaderTextContainer = styled.div`
+  display: flex;
+  flex: 1;
+  line-height: 1rem;
+  align-items: center;
+  font-size: var(--text-md);
+  max-height: 100%;
+`;
+
+export const dataGridCellCss = css<DataGridCellFCProps>`
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 var(--space-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: ${({ $userSelect }) => ($userSelect ? 'text' : 'none')};
+  white-space: nowrap;
+  ${({ $headerColor = 'base' }) => css`
+    border-right: 1px solid var(--color-${$headerColor}-200);
+    border-bottom: 1px solid var(--color-${$headerColor}-200);
+    &:first-child {
+      border-left: 1px solid var(--color-${$headerColor}-300);
+    }
+    &:last-child {
+      border-right: 1px solid var(--color-${$headerColor}-300);
+    }
+  `}
+  background-color: ${({ $color = 'base' }) => `var(--color-${$color}-50)`};
+  justify-content: ${({ $textAlign = 'left' }) =>
+    $textAlign === 'left'
+      ? 'flex-start'
+      : $textAlign === 'center'
+      ? 'center'
+      : 'flex-end'};
+`;
+
+export const DataGridCell = styled.div<DataGridCellFCProps>`
+  ${dataGridCellCss}
+`;
+DataGridCell.displayName = 'DataGridCell';
+
+export const DataGridHeaderTitle = styled.div`
+  white-space: normal;
+  font-weight: bold;
+  color: var(--color-text-800);
+  height: auto;
+`;
+
+export const DataGridToolsRow = styled.div`
+  grid-column-start: 1;
+  grid-column-end: -1;
+  grid-row: 1;
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  align-items: flex-end;
+`;
+
+export const DataGridToolsRowHeaderContent = styled.div`
+  flex: 1;
+`;
+
+export const DataGridToolsRowButtonsContainer = styled.div`
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-1);
+  align-items: center;
+  padding: 0 var(--space-1);
+  position: sticky;
+  left: 0;
+`;
+
+export const DataGridContainer = styled.div<{
+  $headerRowHeight?: number;
+  $rowHeight?: number;
+  $rowsCount: number;
+  $showToolsHeader?: boolean;
+  $withFooter?: boolean;
+  $fixedColumnWidths?: (string | number)[];
+}>`
+  display: grid;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-base-50);
+  font-size: var(--text-base);
+  overflow: scroll;
+  grid-template-rows: ${({
+    $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT,
+    $withFooter = false,
+  }) =>
+    `${$headerRowHeight}px auto ${
+      $withFooter ? DEFAULT_FOOTER_ROW_HEIGHT + 'px' : ''
+    }`};
+
+  ${DataGridToolsRow} {
+    height: ${TOOLBAR_HEIGHT}px;
+  }
+  ${DataGridHeaderCellContainer} {
+    position: sticky;
+    top: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
+      `${$headerRowHeight}px`};
+    height: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
+      `${$headerRowHeight}px`};
+  }
+  ${DataGridCell} {
+    height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
+    line-height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
+    box-sizing: border-box;
+  }
+
+  ${({ $fixedColumnWidths = [] }) =>
+    $fixedColumnWidths.map(
+      (width, i) => `
+    ${DataGridHeaderCellContainer}:nth-child(${i + 1}) {
+      position: sticky;
+      left: ${
+        i === 0
+          ? '0'
+          : `calc(${$fixedColumnWidths
+              .slice(0, i)
+              .map((w) => (typeof w === 'number' ? `${w}px` : w))
+              .join(' + ')})`
+      };
+      z-index: 1;
+    }`
+    )}
+
+  ${({ $fixedColumnWidths = [] }) =>
+    $fixedColumnWidths.map(
+      (width, i) => `
+    ${DataGridCell}:nth-child(${i + 1}) {
+      position: sticky;
+      left: ${
+        i === 0
+          ? '0'
+          : `calc(${$fixedColumnWidths
+              .slice(0, i)
+              .map((w) => (typeof w === 'number' ? `${w}px` : w))
+              .join(' + ')})`
+      };
+      background-color: var(--color-base-50);
+      z-index: 1;
+    }`
+    )}
+
+  ${VirtualScrollerFiller} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: 2;
+  }
+
+  scrollbar-color: var(--color-base-500) var(--color-base-100);
+  scrollbar-width: auto;
+`;
+DataGridContainer.displayName = 'DataGridContainer';
+
+type DataGridHeaderOrFooterRowProps = {
+  $headerRowHeight?: number;
+  $headerColor?: ThemeColor;
+  $gridTemplateColumns: string;
+};
+
+const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
+  display: grid;
+  grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
+    `${$headerRowHeight}px`};
+  z-index: 10;
+  position: sticky;
+  align-items: center;
+
+  ${({ $headerColor = 'base' }) =>
+    $headerColor
+      ? css`
+          background-color: var(--color-${$headerColor}-100);
+          color: var(--color-${$headerColor}-900);
+          ${DataGridHeaderCellContainer}:first-child {
+            border-left: 1px solid var(--color-${$headerColor}-300);
+          }
+          ${DataGridHeaderCellContainer}:last-child {
+            border-right: 1px solid var(--color-${$headerColor}-300);
+          }
+        `
+      : css`
+          background-color: var(--color-base-200);
+          color: var(--color-text-800);
+          ${DataGridHeaderCellContainer}:first-child {
+            border-left: 1px solid var(--color-base-300);
+          }
+          ${DataGridHeaderCellContainer}:last-child {
+            border-right: 1px solid var(--color-base-300);
+          }
+        `}
+`;
+
+export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
+  ({ $gridTemplateColumns }) => ({
+    style: {
+      gridTemplateColumns: $gridTemplateColumns,
+    },
+  })
+)`
+  ${dataGridHeaderOrFooterRowCss}
+  top: 0;
+  border-top: 1px solid
+    var(--color-${({ $headerColor = 'base' }) => $headerColor}-300);
+`;
+DataGridHeaderRow.displayName = 'DataGridHeaderRow';
+
+export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
+  ({ $gridTemplateColumns }) => ({
+    style: {
+      gridTemplateColumns: $gridTemplateColumns,
+    },
+  })
+)`
+  ${dataGridHeaderOrFooterRowCss}
+  border-top: 1px solid var(--color-${({ $headerColor = 'base' }) =>
+    $headerColor}-300);
+  border-bottom: 1px solid
+    var(--color-${({ $headerColor = 'base' }) => $headerColor}-300);
+  bottom: 0;
+`;
+DataGridFooterRow.displayName = 'DataGridFooterRow';
+
+type DataGridRowProps = {
+  $edited?: boolean;
+};
+
+export const DataGridRow = styled.div<DataGridRowProps>`
+  display: contents;
+
+  /* &:last-child > ${DataGridCell} {
+    border-bottom: none;
+  } */
+
+  &:hover > ${DataGridCell} {
+    background-color: var(--color-blue-100);
+  }
+
+  ${({ $edited }) =>
+    $edited &&
+    css`
+      & > ${DataGridCell}, & > ${SelectionCell} {
+        background-color: var(--color-warning-100);
+        color: var(--color-warning-900);
+      }
+      &:hover > ${DataGridCell}, &:hover > ${SelectionCell} {
+        background-color: var(--color-blue-100);
+      }
+    `}
+`;
+DataGridRow.displayName = 'DataGridRow';
+
+export const LoadingCell = styled(DataGridCell)`
+  padding: var(--space-2);
+  box-sizing: border-box;
+
+  &.animate-pulse > div {
+    background-color: var(--color-base-200);
+    border-radius: var(--rounded-full);
+    width: 100%;
+    height: 100%;
+  }
+`;
+LoadingCell.displayName = 'LoadingCell';
+
+const selectionCellStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-8);
+  cursor: pointer;
+  width: ${SELECTION_CELL_WIDTH};
+
+  & > input[type='checkbox'] {
+    margin: 0;
+    height: var(--space-4);
+    width: var(--space-4);
+    border-radius: var(--rounded-sm);
+    border: 1px solid var(--color-base-300);
+    color: var(--color-primary-600);
+  }
+`;
+
+export const SelectionCell = styled(DataGridCell)`
+  ${selectionCellStyle}
+  padding: 0 var(--space-1);
+`;
+SelectionCell.displayName = 'SelectionCell';
+
+export const HeaderSelectionCell = styled(DataGridHeaderCellContainer)`
+  ${selectionCellStyle}
+  padding: 0;
+  ${({ $headerColor = 'base' }) => css`
+    background-color: var(--color-${$headerColor}-200);
+  `}
+`;
+
+HeaderSelectionCell.displayName = 'HeaderSelectionCell';
+
+export const ResizeBackdrop = styled.div.attrs({
+  className: 'ResizeBackdrop',
+})`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0);
+  cursor: col-resize;
+  z-index: 100;
+`;
+ResizeBackdrop.displayName = 'ResizeBackdrop';