Arkusz w panel — CSV zamieniony w gotową tabelę
Masz plik z danymi (CSV, eksport z Excela, arkusz Google) i chcesz go szybko przejrzeć — posortować, wyszukać, pogrupować — bez otwierania Excela i bez uczenia się nowego programu. Ten skill bierze Twoje dane i buduje jeden plik panel.html, który otwierasz zwykłym dwuklikiem. Wszystko — dane, wygląd, logika sortowania — jest wewnątrz tego jednego pliku. Nic nie trzeba instalować, nic nie łączy się z internetem.
Kiedy uruchomić
- Masz CSV albo eksport z arkusza (sprzedaż, leady, zapasy, lista klientów, wyniki ankiety) i chcesz go szybko przejrzeć jako tabelę.
- Chcesz wysłać komuś gotowy podgląd danych — koledze, klientowi, wspólnikowi — który nie ma Excela ani dostępu do Twojego arkusza. Wystarczy jeden plik i dwuklik.
- Mówisz: „zrób z tego panel", „zamień CSV w tabelę", „chcę to sortować/grupować", „zrób mi prosty dashboard z danych", „wrzuć te dane w ładną tabelkę".
Kiedy NIE uruchamiać
- Chcesz edytować dane, dopisywać wiersze, zapisywać zmiany — to nie jest arkusz kalkulacyjny, tylko panel do patrzenia. Do edycji zostań przy Excelu / Google Sheets.
- Potrzebujesz danych na żywo (aktualizujących się automatycznie) albo wielu osób pracujących na tym samym widoku jednocześnie — to jest statyczny plik, zamrożony zrzut danych z chwili wygenerowania.
- Masz dziesiątki tysięcy wierszy i więcej — plik zrobi się ciężki, przeglądarka może zwolnić. Kilka tysięcy wierszy działa bez problemu, ale to nie jest narzędzie do wielkich baz danych.
Procedura
- Zbierz dane i cel. Poproś użytkownika o dane (wklejony CSV/tekst albo ścieżkę do pliku) i o jedno zdanie kontekstu: co to za dane i co chce widzieć najpierw (np. „chcę widzieć sumę sprzedaży per miasto"). To podpowiada, którą kolumnę zaproponować jako domyślną do grupowania.
- Wczytaj i rozpoznaj strukturę. Ustal separator (przecinek czy średnik — w polskich eksportach z Excela częściej średnik, bo przecinek to separator dziesiętny), nazwy kolumn z pierwszego wiersza, i typ każdej kolumny: liczbowa (da się sumować/uśredniać) albo tekstowa (grupuje się i filtruje, ale się nie sumuje). Zobacz zasady wykrywania niżej.
- Zbuduj jeden plik HTML ze wszystkim wbudowanym w środku — danymi, stylami, logiką (specyfikacja niżej). Zero linków na zewnątrz.
- Zapisz plik jako
panel.html (albo <nazwa-danych>-panel.html, jeśli generujesz kilka paneli) — domyślnie obok pliku źródłowego, albo tam, gdzie wskaże użytkownik.
- Powiedz, jak otworzyć (sekcja niżej) i w 3-4 zdaniach opisz, co panel umie — żeby użytkownik od razu wiedział, że może kliknąć nagłówek, wpisać coś w szukajkę i wybrać grupowanie z listy.
Wykrywanie typu kolumny
| Sygnał |
Traktuj jako |
| ≥90% wartości w kolumnie parsuje się na liczbę (po usunięciu spacji jako separatora tysięcy i zamianie przecinka dziesiętnego na kropkę) |
liczbowa — sortowanie numeryczne, wchodzi do podsumowania (suma, średnia) |
| Wartości tekstowe, daty w dowolnym formacie, kody, nazwy |
tekstowa — sortowanie alfabetyczne, dostępna do grupowania i wyszukiwania |
| Kolumna z małą liczbą unikalnych wartości powtarzających się w wielu wierszach (np. kategoria, miasto, status, sprzedawca) |
dobry kandydat na domyślne grupowanie — zaproponuj ją, ale nie wymuszaj |
Pułapka polskich danych: w polskich eksportach z Excela przecinek często oznacza część dziesiętną („1234,56"), więc plik CSV bywa rozdzielany średnikami, nie przecinkami. Zawsze sprawdź pierwszy wiersz pliku, zanim założysz separator.
Twarda reguła — zero zależności zewnętrznych
Wygenerowany plik musi działać offline, bez internetu, jako pojedynczy plik:
- Cały CSS w jednym
<style> w nagłówku pliku — żadnego <link rel="stylesheet">.
- Cały JavaScript w jednym
<script> na końcu pliku — żadnego <script src="https://...">, żadnego CDN, żadnej biblioteki (bez jQuery, bez Chart.js, bez Bootstrap, bez Google Fonts).
- Dane wbudowane wprost w kod JavaScript jako tablica obiektów (np.
const dane = [...]) — nie wczytywane z osobnego pliku fetch(), bo przeglądarki blokują to przy otwieraniu pliku dwuklikiem (file://).
<meta charset="UTF-8"> w nagłówku — inaczej polskie znaki (ą, ę, ć, ś, ż, ź, ł, ń, ó) wyjdą jako krzaki.- Zero wywołań do internetu jakiegokolwiek rodzaju. Jeśli plik ma zadziałać w samolocie albo na komputerze bez Wi-Fi — musi.
Co ma zawierać panel.html
| Element |
Zachowanie |
| Pasek podsumowania (góra strony) |
Liczba wierszy (widocznych / wszystkich, jeśli filtr aktywny), a dla każdej kolumny liczbowej: suma i średnia, sformatowane z separatorem tysięcy i sensowną liczbą miejsc po przecinku |
| Pole wyszukiwania |
Jedno pole tekstowe, filtruje wiersze po dowolnym dopasowaniu w dowolnej kolumnie (nie tylko jednej), aktualizuje się na bieżąco przy pisaniu |
| Sortowanie |
Klik w nagłówek kolumny = sortuj rosnąco, drugi klik = malejąco, strzałka (▲/▼) pokazuje aktualny kierunek. Liczby sortują się numerycznie, tekst alfabetycznie |
| Grupowanie |
Rozwijana lista nad tabelą z nazwami kolumn tekstowych + opcja „Brak grupowania". Po wybraniu kolumny wiersze dzielą się na sekcje z nagłówkiem grupy (wartość + liczba wierszy + suma kolumn liczbowych w tej grupie), każdą sekcję można zwinąć/rozwinąć klikiem |
| Szczegóły wiersza |
Klik w wiersz rozwija pod nim pełny widok wszystkich pól „nazwa kolumny: wartość" — przydatne, gdy kolumn jest dużo i nie mieszczą się wygodnie w tabeli na wąskim ekranie |
| Wygląd |
Czytelna, prosta tabela — naprzemienne tło wierszy, wyraźne nagłówki, responsywna (nie łamie się na węższym ekranie laptopa), bez ozdóbek utrudniających czytanie danych |
Czego NIE robi (uczciwe ograniczenie)
To jest panel do przeglądania i prostej analizy — nie baza danych i nie narzędzie do edycji na żywo. Nie zapisuje zmian, nie dodaje wierszy, nie łączy się z żadnym źródłem danych, nie odświeża się automatycznie. Jeśli dane się zmienią w oryginalnym pliku, trzeba wygenerować panel jeszcze raz. Dla naprawdę dużych zbiorów danych (dziesiątki tysięcy wierszy i więcej) to nie jest właściwe narzędzie — wtedy potrzebna jest prawdziwa baza danych albo program BI.
Jak otworzyć panel.html
- Znajdź plik
panel.html w Finderze (albo tam, gdzie go zapisano).
- Kliknij dwa razy — otworzy się w domyślnej przeglądarce (Chrome, Safari, Edge — dowolna).
- Jeśli otworzy się w złym programie: kliknij prawym przyciskiem → „Otwórz za pomocą" → wybierz przeglądarkę.
- Działa bez internetu. Można go też wysłać mailem albo na pendrive — u odbiorcy zadziała tak samo, dwuklikiem.
Przykład
„Mam CSV ze sprzedażą, 200 wierszy: Data, Produkt, Kategoria, Ilość, Cena, Wartość, Sprzedawca."
Dostajesz panel.html, w którym:
- na górze widzisz: „200 wierszy · suma Wartość: 184 320,00 zł · średnia Cena: 87,40 zł · suma Ilość: 2 110",
- w polu szukaj wpisujesz „Kowalski" i tabela od razu pokazuje tylko wiersze tego sprzedawcy,
- klikasz nagłówek „Wartość" i największe transakcje wskakują na górę,
- z listy grupowania wybierasz „Kategoria" i widzisz sekcje: Elektronika (42 wiersze, suma 61 200 zł), Odzież (58 wierszy, suma 38 900 zł) itd., każdą można zwinąć,
- klikasz dowolny wiersz i pod nim rozwija się pełny zestaw pól tej transakcji.
Wszystko w jednym pliku, otwartym dwuklikiem, bez Excela.
1---2name: arkusz-w-panel3description: Zamienia plik z danymi (CSV, eksport z Excela lub arkusza Google) w jeden plik `panel.html` z sortowaniem, wyszukiwaniem i grupowaniem, który otwiera się dwuklikiem i działa bez internetu. Użyj, gdy mówisz „zrób z tego panel", „zamień CSV w tabelę", „chcę te dane sortować i grupować", „zrób mi prosty dashboard z danych", albo gdy chcesz wysłać komuś podgląd danych bez dostępu do swojego arkusza.4---56# Arkusz w panel — CSV zamieniony w gotową tabelę78Masz plik z danymi (CSV, eksport z Excela, arkusz Google) i chcesz go szybko przejrzeć — posortować, wyszukać, pogrupować — bez otwierania Excela i bez uczenia się nowego programu. Ten skill bierze Twoje dane i buduje **jeden plik `panel.html`**, który otwierasz zwykłym dwuklikiem. Wszystko — dane, wygląd, logika sortowania — jest wewnątrz tego jednego pliku. Nic nie trzeba instalować, nic nie łączy się z internetem.910## Kiedy uruchomić11- Masz CSV albo eksport z arkusza (sprzedaż, leady, zapasy, lista klientów, wyniki ankiety) i chcesz go szybko przejrzeć jako tabelę.12- Chcesz **wysłać komuś gotowy podgląd danych** — koledze, klientowi, wspólnikowi — który nie ma Excela ani dostępu do Twojego arkusza. Wystarczy jeden plik i dwuklik.13- Mówisz: „zrób z tego panel", „zamień CSV w tabelę", „chcę to sortować/grupować", „zrób mi prosty dashboard z danych", „wrzuć te dane w ładną tabelkę".1415## Kiedy NIE uruchamiać16- Chcesz **edytować dane, dopisywać wiersze, zapisywać zmiany** — to nie jest arkusz kalkulacyjny, tylko panel do patrzenia. Do edycji zostań przy Excelu / Google Sheets.17- Potrzebujesz **danych na żywo** (aktualizujących się automatycznie) albo **wielu osób pracujących na tym samym widoku jednocześnie** — to jest statyczny plik, zamrożony zrzut danych z chwili wygenerowania.18- Masz **dziesiątki tysięcy wierszy i więcej** — plik zrobi się ciężki, przeglądarka może zwolnić. Kilka tysięcy wierszy działa bez problemu, ale to nie jest narzędzie do wielkich baz danych.1920## Procedura211. **Zbierz dane i cel.** Poproś użytkownika o dane (wklejony CSV/tekst albo ścieżkę do pliku) i o jedno zdanie kontekstu: co to za dane i co chce widzieć najpierw (np. „chcę widzieć sumę sprzedaży per miasto"). To podpowiada, którą kolumnę zaproponować jako domyślną do grupowania.222. **Wczytaj i rozpoznaj strukturę.** Ustal separator (przecinek czy średnik — w polskich eksportach z Excela częściej średnik, bo przecinek to separator dziesiętny), nazwy kolumn z pierwszego wiersza, i typ każdej kolumny: **liczbowa** (da się sumować/uśredniać) albo **tekstowa** (grupuje się i filtruje, ale się nie sumuje). Zobacz zasady wykrywania niżej.233. **Zbuduj jeden plik HTML** ze wszystkim wbudowanym w środku — danymi, stylami, logiką (specyfikacja niżej). Zero linków na zewnątrz.244. **Zapisz plik** jako `panel.html` (albo `<nazwa-danych>-panel.html`, jeśli generujesz kilka paneli) — domyślnie obok pliku źródłowego, albo tam, gdzie wskaże użytkownik.255. **Powiedz, jak otworzyć** (sekcja niżej) i w 3-4 zdaniach opisz, co panel umie — żeby użytkownik od razu wiedział, że może kliknąć nagłówek, wpisać coś w szukajkę i wybrać grupowanie z listy.2627## Wykrywanie typu kolumny28| Sygnał | Traktuj jako |29|---|---|30| ≥90% wartości w kolumnie parsuje się na liczbę (po usunięciu spacji jako separatora tysięcy i zamianie przecinka dziesiętnego na kropkę) | **liczbowa** — sortowanie numeryczne, wchodzi do podsumowania (suma, średnia) |31| Wartości tekstowe, daty w dowolnym formacie, kody, nazwy | **tekstowa** — sortowanie alfabetyczne, dostępna do grupowania i wyszukiwania |32| Kolumna z małą liczbą unikalnych wartości powtarzających się w wielu wierszach (np. kategoria, miasto, status, sprzedawca) | dobry kandydat na **domyślne grupowanie** — zaproponuj ją, ale nie wymuszaj |3334**Pułapka polskich danych:** w polskich eksportach z Excela przecinek często oznacza część dziesiętną („1234,56"), więc plik CSV bywa rozdzielany średnikami, nie przecinkami. Zawsze sprawdź pierwszy wiersz pliku, zanim założysz separator.3536## Twarda reguła — zero zależności zewnętrznych37Wygenerowany plik **musi działać offline, bez internetu, jako pojedynczy plik**:38- Cały CSS w jednym `<style>` w nagłówku pliku — żadnego `<link rel="stylesheet">`.39- Cały JavaScript w jednym `<script>` na końcu pliku — żadnego `<script src="https://...">`, żadnego CDN, żadnej biblioteki (bez jQuery, bez Chart.js, bez Bootstrap, bez Google Fonts).40- Dane wbudowane wprost w kod JavaScript jako tablica obiektów (np. `const dane = [...]`) — **nie** wczytywane z osobnego pliku `fetch()`, bo przeglądarki blokują to przy otwieraniu pliku dwuklikiem (`file://`).41- `<meta charset="UTF-8">` w nagłówku — inaczej polskie znaki (ą, ę, ć, ś, ż, ź, ł, ń, ó) wyjdą jako krzaki.42- Zero wywołań do internetu jakiegokolwiek rodzaju. Jeśli plik ma zadziałać w samolocie albo na komputerze bez Wi-Fi — musi.4344## Co ma zawierać panel.html45| Element | Zachowanie |46|---|---|47| **Pasek podsumowania** (góra strony) | Liczba wierszy (widocznych / wszystkich, jeśli filtr aktywny), a dla każdej kolumny liczbowej: suma i średnia, sformatowane z separatorem tysięcy i sensowną liczbą miejsc po przecinku |48| **Pole wyszukiwania** | Jedno pole tekstowe, filtruje wiersze po dowolnym dopasowaniu w dowolnej kolumnie (nie tylko jednej), aktualizuje się na bieżąco przy pisaniu |49| **Sortowanie** | Klik w nagłówek kolumny = sortuj rosnąco, drugi klik = malejąco, strzałka (▲/▼) pokazuje aktualny kierunek. Liczby sortują się numerycznie, tekst alfabetycznie |50| **Grupowanie** | Rozwijana lista nad tabelą z nazwami kolumn tekstowych + opcja „Brak grupowania". Po wybraniu kolumny wiersze dzielą się na sekcje z nagłówkiem grupy (wartość + liczba wierszy + suma kolumn liczbowych w tej grupie), każdą sekcję można zwinąć/rozwinąć klikiem |51| **Szczegóły wiersza** | Klik w wiersz rozwija pod nim pełny widok wszystkich pól „nazwa kolumny: wartość" — przydatne, gdy kolumn jest dużo i nie mieszczą się wygodnie w tabeli na wąskim ekranie |52| **Wygląd** | Czytelna, prosta tabela — naprzemienne tło wierszy, wyraźne nagłówki, responsywna (nie łamie się na węższym ekranie laptopa), bez ozdóbek utrudniających czytanie danych |5354## Czego NIE robi (uczciwe ograniczenie)55To jest **panel do przeglądania i prostej analizy — nie baza danych i nie narzędzie do edycji na żywo**. Nie zapisuje zmian, nie dodaje wierszy, nie łączy się z żadnym źródłem danych, nie odświeża się automatycznie. Jeśli dane się zmienią w oryginalnym pliku, trzeba wygenerować panel jeszcze raz. Dla naprawdę dużych zbiorów danych (dziesiątki tysięcy wierszy i więcej) to nie jest właściwe narzędzie — wtedy potrzebna jest prawdziwa baza danych albo program BI.5657## Jak otworzyć panel.html581. Znajdź plik `panel.html` w Finderze (albo tam, gdzie go zapisano).592. Kliknij dwa razy — otworzy się w domyślnej przeglądarce (Chrome, Safari, Edge — dowolna).603. Jeśli otworzy się w złym programie: kliknij prawym przyciskiem → „Otwórz za pomocą" → wybierz przeglądarkę.614. Działa bez internetu. Można go też wysłać mailem albo na pendrive — u odbiorcy zadziała tak samo, dwuklikiem.6263## Przykład64„Mam CSV ze sprzedażą, 200 wierszy: Data, Produkt, Kategoria, Ilość, Cena, Wartość, Sprzedawca."6566Dostajesz `panel.html`, w którym:67- na górze widzisz: „200 wierszy · suma Wartość: 184 320,00 zł · średnia Cena: 87,40 zł · suma Ilość: 2 110",68- w polu szukaj wpisujesz „Kowalski" i tabela od razu pokazuje tylko wiersze tego sprzedawcy,69- klikasz nagłówek „Wartość" i największe transakcje wskakują na górę,70- z listy grupowania wybierasz „Kategoria" i widzisz sekcje: Elektronika (42 wiersze, suma 61 200 zł), Odzież (58 wierszy, suma 38 900 zł) itd., każdą można zwinąć,71- klikasz dowolny wiersz i pod nim rozwija się pełny zestaw pól tej transakcji.7273Wszystko w jednym pliku, otwartym dwuklikiem, bez Excela.
studiogo