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

Shopify’s admin product component library

.Polaris-IndexTable_14ou9 { position: relative; overflow: hidden; border-radius: inherit; }

.Polaris-IndexTable__LoadingContainer--enter_pborr { opacity: 0; transform: translateY(-100%); }

.Polaris-IndexTable--loadingContainerEnterActive_g73ly { opacity: 1; transition: opacity 100ms ease-out, transform 100ms ease-out; transform: translateY(0); }

.Polaris-IndexTable__LoadingContainer--exit_12qdn { opacity: 1; transform: translateY(0); }

.Polaris-IndexTable--loadingContainerExitActive_1mc5y { opacity: 0; transform: translateY(-100%); transition: opacity 100ms ease-in, transform 100ms ease-in; }

.Polaris-IndexTable__LoadingPanel_2h3bc { position: absolute; z-index: 37; top: 0; left: 0; display: flex; width: 100%; justify-content: center; align-items: center; background: var(--p-surface); padding: 0.5rem 1rem; box-shadow: 0 0 0 0.0625rem rgba(63, 63, 68, 0.05), 0 0.0625rem 0.1875rem 0 rgba(63, 63, 68, 0.15); }

.Polaris-IndexTable__LoadingPanel_2h3bc .Polaris-IndexTable__LoadingPanelRow_lfpzp { display: flex; flex-wrap: nowrap; width: 100%; background: var(--p-surface-highlight-subdued); padding: 0.5rem; padding-bottom: 0.25rem; border-radius: var(--p-border-radius-base); }

.Polaris-IndexTable__LoadingPanelText_1o2zz { margin-left: 0.75rem; color: var(--p-text); }

.Polaris-IndexTable__Table_2qj3m { width: 100%; min-width: 100%; border-collapse: collapse; }

.Polaris-IndexTable__Table--scrolling_1wn6c .Polaris-IndexTable__TableCell--first_1h1n6, .Polaris-IndexTable__Table--scrolling_1wn6c .Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd, .Polaris-IndexTable__Table--scrolling_1wn6c .Polaris-IndexTable__TableHeading--first_7e0t3, .Polaris-IndexTable__Table--scrolling_1wn6c .Polaris-IndexTable__TableHeading--second_13zlr { visibility: visible; background-color: var(--p-surface); }

.Polaris-IndexTable__Table--scrolling_1wn6c .Polaris-IndexTable__TableCell--first_1h1n6, .Polaris-IndexTable__Table--scrolling_1wn6c .Polaris-IndexTable__TableHeading--first_7e0t3 { filter: drop-shadow(0.0625rem 0 0 var(--p-divider)); }

@media (min-width: 28.625em) { .Polaris-IndexTable__Table--scrolling_1wn6c .Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd, .Polaris-IndexTable__Table--scrolling_1wn6c .Polaris-IndexTable__TableHeading--second_13zlr { filter: drop-shadow(0.0625rem 0 0 var(--p-divider)); } }

.Polaris-IndexTable__Table--scrolling_1wn6c.Polaris-IndexTable__Table--unselectable_2x68i .Polaris-IndexTable__TableHeading--second_13zlr, .Polaris-IndexTable__Table--scrolling_1wn6c.Polaris-IndexTable__Table--unselectable_2x68i .Polaris-IndexTable__TableCell_14vwd:first-child { visibility: visible; filter: drop-shadow(0.0625rem 0 0 var(--p-divider)); }

.Polaris-IndexTable__TableRow_1a85o { background-color: var(--p-surface); cursor: pointer; filter: drop-shadow(0 -0.0625rem 0 var(--p-divider)); }

.Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--unclickable_a4od4 { cursor: auto; }

.Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable--statusSuccess_pc5rl, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable--statusSuccess_pc5rl .Polaris-IndexTable__TableCell--first_1h1n6, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable--statusSuccess_pc5rl .Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd { background-color: var(--p-surface-primary-selected); }

.Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable--statusSubdued_cwcww, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable--statusSubdued_cwcww .Polaris-IndexTable__TableCell--first_1h1n6, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable--statusSubdued_cwcww .Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd { background-color: var(--p-surface-subdued); }

.Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--hovered_ef3tg, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--hovered_ef3tg .Polaris-IndexTable__TableCell--first_1h1n6, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--hovered_ef3tg .Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd { background-color: var(--p-surface-hovered); }

.Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--selected_1twnz, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--selected_1twnz .Polaris-IndexTable__TableHeading--first_7e0t3, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--selected_1twnz .Polaris-IndexTable__TableHeading--second_13zlr, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--selected_1twnz .Polaris-IndexTable__TableCell--first_1h1n6, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--selected_1twnz .Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd { background-color: var(--p-surface-selected); }

.Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--hovered_ef3tg.Polaris-IndexTable__TableRow--selected_1twnz, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--hovered_ef3tg.Polaris-IndexTable__TableRow--selected_1twnz .Polaris-IndexTable__TableCell--first_1h1n6, .Polaris-IndexTable__TableRow_1a85o.Polaris-IndexTable__TableRow--hovered_ef3tg.Polaris-IndexTable__TableRow--selected_1twnz .Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd { background-color: var(--p-surface-selected-hovered); }

.Polaris-IndexTable__TableRow--subdued_fuznb { color: var(--p-text-subdued); }

.Polaris-IndexTable__TableHeading_1e5bf { padding: 1rem; text-align: left; font-weight: 500; white-space: nowrap; border: 0; }

.Polaris-IndexTable__TableHeading--first_7e0t3 { position: sticky; left: 0; padding-left: 0.875rem; padding-right: 1.125rem; }

.Polaris-IndexTable__ColumnHeaderCheckboxWrapper_wbe3v { display: flex; }

.Polaris-IndexTable__FirstStickyHeaderElement_t5ww3 { margin-left: -0.125rem; padding-right: 0.125rem; }

.Polaris-IndexTable__TableHeading--second_13zlr:not(.Polaris-IndexTable__TableHeading--unselectable_w9xsx) { padding-left: 0; }

@media (min-width: 28.625em) { .Polaris-IndexTable__TableHeading--second_13zlr:not(.Polaris-IndexTable__TableHeading--unselectable_w9xsx) { position: sticky; z-index: auto; left: 0; } }

.Polaris-IndexTable__TableHeading--second_13zlr.Polaris-IndexTable__TableHeading--unselectable_w9xsx { position: sticky; z-index: auto; left: 0; }

.Polaris-IndexTable__TableCell_14vwd { z-index: 1; text-align: left; padding: 0.5rem 1rem; white-space: nowrap; }

.Polaris-IndexTable__TableCell--flush_1ofni { padding: 0; }

.Polaris-IndexTable__TableCell--first_1h1n6 { position: sticky; left: 0; z-index: 31; padding: 0; }

.Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd { left: var(--p-checkbox-offset); padding-left: 0; }

@media (min-width: 28.625em) { .Polaris-IndexTable__TableCell--first_1h1n6 + .Polaris-IndexTable__TableCell_14vwd { position: sticky; z-index: 31; padding: 0; } }

.Polaris-IndexTable__Table--unselectable_2x68i .Polaris-IndexTable__TableCell_14vwd:first-child { left: 0; background-color: var(--p-surface); position: sticky; z-index: 31; }

.Polaris-IndexTable__Table--unselectable_2x68i .Polaris-IndexTable--statusSuccess_pc5rl .Polaris-IndexTable__TableCell_14vwd:first-child { background-color: var(--p-surface-primary-selected); }

.Polaris-IndexTable__Table--unselectable_2x68i .Polaris-IndexTable--statusSubdued_cwcww .Polaris-IndexTable__TableCell_14vwd:first-child { background-color: var(--p-surface-subdued); }

.Polaris-IndexTable__Table--unselectable_2x68i .Polaris-IndexTable__TableRow--hovered_ef3tg .Polaris-IndexTable__TableCell_14vwd:first-child { background-color: var(--p-surface-hovered); }

@media (min-width: 28.625em) { .Polaris-IndexTable--tableStickyScrolling_19kr9 .Polaris-IndexTable__TableCell_14vwd:last-child, .Polaris-IndexTable--tableStickyScrolling_19kr9 .Polaris-IndexTable__TableHeading--last_qqggd { filter: drop-shadow(-0.0625rem 0 0 var(--p-divider)); } }

@media (min-width: 28.625em) { .Polaris-IndexTable--tableStickyLast_1kdje .Polaris-IndexTable__TableCell_14vwd:last-child { position: sticky; right: 0; background-color: var(--p-surface); z-index: 31; } }

@media (min-width: 28.625em) { .Polaris-IndexTable--tableStickyLast_1kdje .Polaris-IndexTable__TableHeading--last_qqggd { position: sticky; right: 0; background-color: var(--p-surface); z-index: auto; } }

.Polaris-IndexTable--tableStickyLast_1kdje .Polaris-IndexTable--statusSuccess_pc5rl .Polaris-IndexTable__TableCell_14vwd:last-child { background-color: var(--p-surface-primary-selected); }

.Polaris-IndexTable--tableStickyLast_1kdje .Polaris-IndexTable--statusSubdued_cwcww .Polaris-IndexTable__TableCell_14vwd:last-child { background-color: var(--p-surface-subdued); }

.Polaris-IndexTable--tableStickyLast_1kdje .Polaris-IndexTable__TableRow--hovered_ef3tg .Polaris-IndexTable__TableCell_14vwd:last-child { background-color: var(--p-surface-hovered); }

.Polaris-IndexTable--tableStickyLast_1kdje .Polaris-IndexTable__TableRow--selected_1twnz .Polaris-IndexTable__TableCell_14vwd:last-child { background-color: var(--p-surface-selected); }

.Polaris-IndexTable__StickyTable_1swiu { position: relative; top: 0; left: 0; right: 0; visibility: hidden; z-index: 37; }

.Polaris-IndexTable__StickyTableHeader_1ytkn { position: absolute; display: flex; width: 100%; }

.Polaris-IndexTable__StickyTableHeader_1ytkn:not(.Polaris-IndexTable__StickyTableHeader--isSticky_1sidr) { top: -62.5rem; left: -62.5rem; }

.Polaris-IndexTable__StickyTableColumnHeader_3fyec { flex: 0 0 auto; }

.Polaris-IndexTable__StickyTableColumnHeader--isScrolling_pjnvm { box-shadow: 0.0625rem 0.0625rem 0 0 var(--p-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-IndexTable__StickyTableHeadings_c6d08 { overflow: hidden; flex: 1 1 auto; display: flex; }

.Polaris-IndexTable__StickyTableHeading--second_7u33u { padding-left: 0; }

@media (min-width: 28.625em) { .Polaris-IndexTable__StickyTableHeading--second_7u33u { display: none; } }

.Polaris-IndexTable__StickyTableHeading--second_7u33u.Polaris-IndexTable--unselectable_vpzgl { display: none; }

.Polaris-IndexTable--stickyTableHeadingSecondScrolling_18frd { padding: 0 0.0375rem 0 1rem; display: none; }

@media (min-width: 28.625em) { .Polaris-IndexTable--stickyTableHeadingSecondScrolling_18frd { display: block; } }

.Polaris-IndexTable__StickyTableHeader--isSticky_1sidr { visibility: visible; background-color: var(--p-surface); box-shadow: 0 0 0 0.0625rem rgba(63, 63, 68, 0.05), 0 0.0625rem 0.1875rem 0 rgba(63, 63, 68, 0.15); }

.Polaris-IndexTable_14ou9:hover .Polaris-IndexTable__ScrollLeft_1ccqr { display: block; }

.Polaris-IndexTable_14ou9:hover .Polaris-IndexTable__ScrollRight_4u2ec { display: block; }

.Polaris-IndexTable_14ou9 .Polaris-IndexTable__ScrollRight--onboarding_1x8yb { display: block; }

.Polaris-IndexTable__BulkActionsWrapper_9c77q { visibility: visible; position: relative; z-index: 36; top: 0; left: 0; right: 0; padding: 0.5rem; background: var(--p-surface); }

.Polaris-IndexTable__ScrollBarContainer_1rt01 { position: sticky; z-index: 35; bottom: 0; padding: 0.125rem; border-top: 0.0625rem solid var(--p-divider); background-color: var(--p-surface); border-bottom-right-radius: var(--p-border-radius-base); border-bottom-left-radius: var(--p-border-radius-base); }

.Polaris-IndexTable--scrollBarContainerCondensed_x4kca { visibility: hidden; pointer-events: none; }

.Polaris-IndexTable__ScrollBar_1du2f { overflow-x: scroll; width: 100%; margin: 0; padding: 0; }

.Polaris-IndexTable__ScrollBar_1du2f::-webkit-scrollbar-track { border-radius: 0.25rem; background-color: transparent; }

.Polaris-IndexTable__ScrollBar_1du2f::-webkit-scrollbar { -webkit-appearance: none; appearance: none; height: 0.5rem; width: 0.5rem; background-color: transparent; }

.Polaris-IndexTable__ScrollBar_1du2f::-webkit-scrollbar-thumb { border-radius: 0.25rem; background-color: var(--p-border-neutral-subdued); -webkit-transition: background-color 100ms ease-out; transition: background-color 100ms ease-out; }

.Polaris-IndexTable__ScrollBar_1du2f:hover::-webkit-scrollbar-thumb { background-color: var(--p-border-depressed); }

.Polaris-IndexTable--disableTextSelection_1rwab { -webkit-user-select: none; user-select: none; }

.Polaris-IndexTable--selectMode_4098j { transform: translateY(-3.25rem); margin-bottom: -3.25rem; }

.Polaris-IndexTable__EmptySearchResultWrapper_ainc2 { padding: 1rem; }

.Polaris-IndexTable--condensedRow_1bwvn { width: calc(100% + 2.125rem); transform: translateX(-2.125rem); transition: transform cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; display: flex; border-top: 0.0625rem solid var(--p-divider); filter: none; align-items: center; }

[data-selectmode='true'] .Polaris-IndexTable--condensedRow_1bwvn { transform: none; }

.Polaris-IndexTable__CondensedList_agren { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }

.Polaris-IndexTable__HeaderWrapper_9w2pa { position: relative; display: flex; align-items: flex-start; width: 100%; min-height: 3.5rem; padding: 0.625rem 1rem; background-color: var(--p-surface); }

.Polaris-IndexTable__HeaderWrapper_9w2pa.Polaris-IndexTable--unselectable_vpzgl { min-height: auto; padding: 0; }

.Polaris-IndexTable__StickyTable--condensed_g7gz8 { visibility: visible; }

.Polaris-IndexTable__StickyTableHeader--condensed_d52ci { padding: 1rem 1rem 0.5rem; }

.Polaris-IndexTable__ScrollBarContent_1iz36 { height: 0.0625rem; width: var(--p-scroll-bar-content-width); }