Repository: gradio-app/gradio
File: js/dataframe/shared/Table.svelte (Svelte)

Code before:
	export let headers: Headers = [];
	export let values: (string | number)[][] = [];
	export let col_count: [number, "fixed" | "dynamic"];
	export let row_count: [number, "fixed" | "dynamic"];
	export let latex_delimiters: {
		left: string;
		right: string;
		display: boolean;
	}[];

	export let editable = true;
	export let wrap = false;
	export let root: string;
	export let i18n: I18nFormatter;

	export let max_height = 500;
	export let line_breaks = true;
	export let column_widths: string[] = [];
	export let show_row_numbers = false;
	export let upload: Client["upload"];
	export let stream_handler: Client["stream"];
	export let show_fullscreen_button = false;
	export let show_copy_button = false;
	export let value_is_output = false;
	export let max_chars: number | undefined = undefined;
	export let frozen_cols = 0;

	let actual_frozen_cols = 0;
	$: actual_frozen_cols =
		frozen_cols && data?.[0]?.length
			? Math.min(frozen_cols, data[0].length)
			: 0;

	let selected_cells: CellCoordinate[] = [];
	$: selected_cells = [...selected_cells];
	let selected: CellCoordinate | false = false;
	$: selected =
		selected_cells.length > 0
			? selected_cells[selected_cells.length - 1]
			: false;

	export let display_value: string[][] | null = null;
	export let styling: string[][] | null = null;
	let t_rect: DOMRectReadOnly;
	let els: Record<
		string,
		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
	> = {};
	let data_binding: Record<string, (typeof data)[0][0]> = {};

	const dispatch = createEventDispatcher<{

Review comment (suggestion):
main changes here are adding some frozen CSS classes and always freezing the row number column if it's present

Code after:
	export let headers: Headers = [];
	export let values: (string | number)[][] = [];
	export let col_count: [number, "fixed" | "dynamic"];
	export let row_count: [number, "fixed" | "dynamic"];
	export let latex_delimiters: {
		left: string;
		right: string;
		display: boolean;
	}[];

	export let editable = true;
	export let wrap = false;
	export let root: string;
	export let i18n: I18nFormatter;

	export let max_height = 500;
	export let line_breaks = true;
	export let column_widths: string[] = [];
	export let show_row_numbers = false;
	export let upload: Client["upload"];
	export let stream_handler: Client["stream"];
	export let show_fullscreen_button = false;
	export let show_copy_button = false;
	export let value_is_output = false;
	export let max_chars: number | undefined = undefined;
	export let pinned_columns = 0;

	let actual_pinned_columns = 0;
	$: actual_pinned_columns =
		pinned_columns && data?.[0]?.length
			? Math.min(pinned_columns, data[0].length)
			: 0;

	let selected_cells: CellCoordinate[] = [];
	$: selected_cells = [...selected_cells];
	let selected: CellCoordinate | false = false;
	$: selected =
		selected_cells.length > 0
			? selected_cells[selected_cells.length - 1]
			: false;

	export let display_value: string[][] | null = null;
	export let styling: string[][] | null = null;
	let t_rect: DOMRectReadOnly;
	let els: Record<
		string,
		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
	> = {};
	let data_binding: Record<string, (typeof data)[0][0]> = {};

	const dispatch = createEventDispatcher<{