@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
100 lines • 2.63 kB
TypeScript
/**
* Styling utilities for DataTable components
*/
import type { DataTableColumn, PinnedColumnStyleOptions } from '../types';
/**
* Generate consistent styling for pinned columns
*/
export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions): {
backgroundColor: (theme: any) => any;
backgroundImage: (theme: any) => string;
boxShadow: string;
left?: number;
right?: number;
zIndex?: number;
whiteSpace: "normal";
wordBreak: "break-word";
overflow: "visible";
textOverflow?: undefined;
boxSizing: string;
maxWidth: string | number;
minWidth: number;
width: string | number;
} | {
backgroundColor: (theme: any) => string;
boxShadow: string;
left?: number;
right?: number;
zIndex?: number;
whiteSpace: "normal";
wordBreak: "break-word";
overflow: "visible";
textOverflow?: undefined;
boxSizing: string;
maxWidth: string | number;
minWidth: number;
width: string | number;
} | {
backgroundColor: (theme: any) => any;
backgroundImage: (theme: any) => string;
boxShadow: string;
left?: number;
right?: number;
zIndex?: number;
overflow: "hidden";
whiteSpace: "nowrap";
textOverflow: "ellipsis";
wordBreak?: undefined;
boxSizing: string;
maxWidth: string | number;
minWidth: number;
width: string | number;
} | {
backgroundColor: (theme: any) => string;
boxShadow: string;
left?: number;
right?: number;
zIndex?: number;
overflow: "hidden";
whiteSpace: "nowrap";
textOverflow: "ellipsis";
wordBreak?: undefined;
boxSizing: string;
maxWidth: string | number;
minWidth: number;
width: string | number;
};
/**
* Common table cell styling
*/
export declare const tableCellStyles: {
readonly sticky: {
readonly position: "sticky";
readonly zIndex: 10;
readonly backgroundColor: "background.paper";
};
readonly pinned: {
readonly borderRight: "1px solid";
readonly borderColor: "divider";
};
};
/**
* Common table row styling
*/
export declare const tableRowStyles: {
readonly hover: {
readonly '&:hover': {
readonly backgroundColor: "action.hover";
};
};
readonly striped: {
readonly '&:nth-of-type(odd)': {
readonly backgroundColor: "action.selected";
};
};
};
/**
* Get text alignment style from column metadata
*/
export declare function getColumnAlignment(column?: DataTableColumn<any>): 'left' | 'center' | 'right';
//# sourceMappingURL=styling-helpers.d.ts.map