@shopify/polaris/build/esnext/components/DataTable/DataTable.css

Shopify’s admin product component library

/* stylelint-disable unit-disallowed-list */
/* stylelint-disable length-zero-no-unit */
/* Breakpoints - Aliases */
/* Breakpoints - Media conditions */
.Polaris-DataTable_1pikz { --pc-data-table-first-column-width: 9.0625rem; position: relative; max-width: 100vw; }

.Polaris-DataTable--condensed_b60cb .Polaris-DataTable__Navigation_1ajsq { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--p-space-4) var(--p-space-2); }

@media (min-width: 3em) { .Polaris-DataTable--condensed_b60cb .Polaris-DataTable__Navigation_1ajsq { justify-content: flex-end; } }

.Polaris-DataTable__Navigation_1ajsq { display: none; }

.Polaris-DataTable__IncreasedTableDensity_vzwx6 .Polaris-DataTable__Navigation_1ajsq { padding: var(--p-space-2) var(--p-space-2) 0 var(--p-space-2); }

.Polaris-DataTable__Pip_375sr { height: 0.375rem; width: 0.375rem; background: var(--p-text-subdued); border-radius: var(--p-border-radius-1); }

.Polaris-DataTable__Pip_375sr:not(:last-of-type) { margin-right: var(--p-space-1); }

.Polaris-DataTable__Pip--visible_1sajm { background: var(--p-text); }

.Polaris-DataTable__ScrollContainer_lf5n1 { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

.Polaris-DataTable__Table_2qj3m { width: 100%; border-spacing: 0; }

@media (min-width: 3em) { .Polaris-DataTable--hoverable_1q7x3:hover .Polaris-DataTable__Cell_yixs7 { background: var(--p-surface-hovered); } }

.Polaris-DataTable__TableRow_1a85o + .Polaris-DataTable__TableRow_1a85o .Polaris-DataTable__Cell_yixs7 { border-top: var(--p-border-divider); }

.Polaris-DataTable__Cell_yixs7 { padding: var(--p-space-4); white-space: nowrap; text-align: left; transition: background-color var(--p-duration-200) var(--p-ease-in-out); }

.Polaris-DataTable__IncreasedTableDensity_vzwx6 .Polaris-DataTable__Cell_yixs7 { padding: var(--p-space-2) var(--p-space-4); }

.Polaris-DataTable__ZebraStripingOnData_nd99o .Polaris-DataTable__TableRow_1a85o:nth-child(2n + 1) .Polaris-DataTable__Cell_yixs7, .Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__RowCountIsEven_1i22x .Polaris-DataTable__TableRow_1a85o:nth-child(2n) .Polaris-DataTable__Cell_yixs7, .Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__ShowTotalsInFooter_194e2 .Polaris-DataTable__TableRow_1a85o:nth-child(2n) .Polaris-DataTable__Cell_yixs7, .Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__ShowTotalsInFooter_194e2.Polaris-DataTable__RowCountIsEven_1i22x .Polaris-DataTable__TableRow_1a85o:nth-child(2n + 1) .Polaris-DataTable__Cell_yixs7 { background: none; }

.Polaris-DataTable__ZebraStripingOnData_nd99o .Polaris-DataTable__TableRow_1a85o:nth-child(2n) .Polaris-DataTable__Cell_yixs7, .Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__RowCountIsEven_1i22x .Polaris-DataTable__TableRow_1a85o:nth-child(2n + 1) .Polaris-DataTable__Cell_yixs7, .Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__ShowTotalsInFooter_194e2 .Polaris-DataTable__TableRow_1a85o:nth-child(2n + 1) .Polaris-DataTable__Cell_yixs7, .Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__ShowTotalsInFooter_194e2.Polaris-DataTable__RowCountIsEven_1i22x .Polaris-DataTable__TableRow_1a85o:nth-child(2n) .Polaris-DataTable__Cell_yixs7 { background: var(--p-surface-subdued); }

.Polaris-DataTable__Cell--firstColumn_2o4gk { font-weight: var(--p-font-weight-regular); color: var(--p-text); text-align: left; white-space: normal; }

.Polaris-DataTable__Cell--numeric_1ld9f { text-align: right; }

.Polaris-DataTable__Cell--truncated_1chsk { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; max-width: var(--pc-data-table-first-column-width); }

.Polaris-DataTable__Cell--header_sv8he { font-weight: var(--p-font-weight-regular); color: var(--p-text); border-bottom: var(--p-border-divider); border-top: 0; }

.Polaris-DataTable__IncreasedTableDensity_vzwx6 .Polaris-DataTable__Cell--header_sv8he { font-weight: var(--p-font-weight-medium); font-size: var(--p-font-size-1); }

.Polaris-DataTable__Cell--sortable_yf7r1 { padding: 0; }

.Polaris-DataTable__IncreasedTableDensity_vzwx6 .Polaris-DataTable__Cell--sortable_yf7r1 { padding: var(--p-space-2) var(--p-space-3); }

.Polaris-DataTable__IncreasedTableDensity_vzwx6 .Polaris-DataTable__Cell--sortable_yf7r1:first-child { padding-left: var(--p-space-3); }

.Polaris-DataTable__IncreasedTableDensity_vzwx6 .Polaris-DataTable__Cell--sortable_yf7r1:first-child button { padding-right: 0; padding-left: var(--p-space-1); }

.Polaris-DataTable__IncreasedTableDensity_vzwx6 .Polaris-DataTable__Cell--sortable_yf7r1:last-child { padding-right: var(--p-space-3); }

.Polaris-DataTable__Cell--verticalAlignTop_1042b { vertical-align: top; }

.Polaris-DataTable__Cell--verticalAlignBottom_1dkyy { vertical-align: bottom; }

.Polaris-DataTable__Cell--verticalAlignMiddle_mmoue { vertical-align: middle; }

.Polaris-DataTable__Cell--verticalAlignBaseline_sl0em { vertical-align: baseline; }

.Polaris-DataTable__Icon_yj27d { display: flex; align-self: flex-end; opacity: 0; transition: opacity var(--p-duration-200) var(--p-ease), fill var(--p-duration-200) var(--p-ease); }

.Polaris-DataTable__Heading_1brcv { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: none; border: none; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; position: relative; position: relative; display: inline-flex; justify-content: flex-end; align-items: baseline; color: var(--p-text); transition: color var(--p-duration-200) var(--p-ease); cursor: pointer; padding: var(--p-space-2); margin: var(--p-space-2); }

.Polaris-DataTable__Heading_1brcv:focus { outline: none; }

.Polaris-DataTable__Heading_1brcv::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-DataTable__Heading_1brcv svg { fill: var(--p-icon); }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm [data-sticky-active] .Polaris-DataTable__Heading_1brcv { visibility: hidden; }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm [data-sticky-active] .Polaris-DataTable__StickyTable_1swiu .Polaris-DataTable__Heading_1brcv { visibility: visible; }

.Polaris-DataTable__IncreasedTableDensity_vzwx6 .Polaris-DataTable__Heading_1brcv { font-weight: var(--p-font-weight-medium); font-size: var(--p-font-size-1); padding: 0; padding-right: var(--p-space-1); margin: 0; }

.Polaris-DataTable__Heading_1brcv:hover { color: var(--p-interactive-hovered); }

.Polaris-DataTable__Heading_1brcv:hover svg { fill: var(--p-interactive-hovered); }

.Polaris-DataTable__Heading_1brcv:hover .Polaris-DataTable__Icon_yj27d { opacity: 1; }

.Polaris-DataTable__Heading_1brcv:hover .Polaris-DataTable__Icon_yj27d svg { fill: var(--p-icon-disabled); }

.Polaris-DataTable__Heading_1brcv:focus:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-DataTable__Heading_1brcv:focus:not(:active) .Polaris-DataTable__Icon_yj27d { opacity: 1; }

.Polaris-DataTable__Heading_1brcv:focus:not(:active) .Polaris-DataTable__Icon_yj27d svg { fill: var(--p-icon-disabled); }

.Polaris-DataTable__Heading--left_au11s { justify-content: flex-start; flex-direction: row-reverse; }

.Polaris-DataTable__Cell--sorted_ea2kb .Polaris-DataTable__Icon_yj27d { opacity: 1; }

.Polaris-DataTable__Cell--sorted_ea2kb .Polaris-DataTable__Heading_1brcv:focus:not(:active) svg { fill: var(--p-icon); }

.Polaris-DataTable__Cell--total_99xdh { font-weight: var(--p-font-weight-semibold); background: var(--p-surface-subdued); border-bottom: var(--p-border-divider); }

.Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__ShowTotals_6ybi5 .Polaris-DataTable__Cell--total_99xdh { background: var(--p-surface-subdued); }

.Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__ShowTotals_6ybi5.Polaris-DataTable__RowCountIsEven_1i22x .Polaris-DataTable__Cell--total_99xdh, .Polaris-DataTable__ZebraStripingOnData_nd99o.Polaris-DataTable__ShowTotalsInFooter_194e2 .Polaris-DataTable__Cell--total_99xdh { background: none; }

.Polaris-DataTable--cellTotalFooter_1fqr9 { border-top: var(--p-border-divider); border-bottom: none; }

.Polaris-DataTable--cellTotalFooter_1fqr9:first-child { border-bottom-left-radius: var(--p-border-radius-2); }

.Polaris-DataTable--cellTotalFooter_1fqr9:last-child { border-bottom-right-radius: var(--p-border-radius-2); }

.Polaris-DataTable__Footer_z4ij5 { padding: var(--p-space-4); background: var(--p-surface-subdued); color: var(--p-text-subdued); text-align: center; border-top: var(--p-border-divider); border-bottom-left-radius: var(--p-border-radius-2); border-bottom-right-radius: var(--p-border-radius-2); }

.Polaris-DataTable__ZebraStripingOnData_nd99o .Polaris-DataTable__Footer_z4ij5 { background: none; }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm .Polaris-DataTable__StickyTable_1swiu { position: relative; top: 0; left: 0; right: 0; visibility: hidden; z-index: var(--p-z-1); }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm .Polaris-DataTable__StickyTableHeader_1ytkn { position: absolute; display: flex; flex-direction: column; width: 100%; overflow: hidden; }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm .Polaris-DataTable__StickyTableHeader_1ytkn:not(.Polaris-DataTable__StickyTableHeader--isSticky_1sidr) { top: -624.9375rem; left: -624.9375rem; }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm .Polaris-DataTable__StickyHeaderCell_nc4xr { flex-shrink: 0; }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm .Polaris-DataTable__StickyTableColumnHeader--isScrolling_pjnvm { box-shadow: 0.0625rem 0.0625rem 0 0 var(--p-border-divider), 0.0625rem 0 0.0625rem 0.0625rem rgba(63, 63, 68, 0.05), 0.0625rem 0 0.1875rem 0 rgba(63, 63, 68, 0.15); }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm .Polaris-DataTable__StickyTableHeadingsRow_1k51s { flex: 1 1 auto; display: flex; overflow-x: auto; background-color: var(--p-surface); justify-content: space-between; scrollbar-width: none; }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm .Polaris-DataTable__StickyTableHeadingsRow_1k51s::-webkit-scrollbar { -webkit-appearance: none; appearance: none; height: 0; width: 0; }

.Polaris-DataTable__StickyHeaderEnabled_m2nwm .Polaris-DataTable__StickyTableHeader--isSticky_1sidr { visibility: visible; background-color: var(--p-surface); box-shadow: var(--p-shadow-base); }