Skip to main content
SimilarExport ZIP
100%

sortable table

✓ Published0🌍 Public
XXiaoyu Su
Last edited Apr 28, 2021
Created on Mar 15, 2021
Forked from HTML Starter

This interactive table displays product data with sortable columns for name, price, and stock. Built with React, it uses custom hooks containing `useState` and `useMemo` to manage and calculate sorting logic, toggling between ascending and descending order on click. The header buttons trigger the sort and display directional indicators defined in CSS. D3 is included in the page for potential data manipulation, though the core functionality relies on React state and event handling.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows sales data for supermarket orders, broken down by city, with stacked bars representing categories like Furniture, Office Supplies, and Technology. A dropdown menu filters the display by customer segment, and a checkbox toggles between sorting bars by total sales or by city order. Built with React and D3 v5, it uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG chart, with `transition` methods animating updates when filters change. The data comes from a CSV file containing individual order records.

Hhyejinid
71% match
Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a sortable, searchable DataTable of grocery store sales data. It uses React and D3 version 6 to asynchronously fetch a CSV file from a GitHub gist, parse it with `d3.csvParseRows`, and build an HTML table element. The table is then enhanced with the DataTables jQuery library for interactive features, while a React component adds a static label above the visualization.

NNaveed945
70% match
Loading thumbnail…

D3.js Sortable & Responsive Table

This interactive table displays police station accident data from a CSV file, allowing users to sort rows by clicking any column header. Built with D3.js v3, the visualization loads data via `d3.csv` and dynamically creates an HTML table. Clicking a header toggles ascending and descending sort order, updating arrow indicators on the active column. The table is responsive, using CSS media queries to transform from a standard layout on desktop to a card-style display on mobile devices, where each cell is labeled with its corresponding column name.

Aachintyatripathi
69% match
Loading thumbnail…

Untitled

This interactive table displays data records with fields like filename, label, and perplexity scores, controlled by two sliders that filter the dataset by user-defined ranges. Built with React and rendered as SVG with animation, the visualization uses D3.js for slider creation and data binding, Crossfilter for multidimensional filtering, and the dc.js library for data table and count management.

Vvaynexie
68% match
Loading thumbnail…

geneInfoTable

This example presents a sortable data table of gene information, displaying columns such as gene name, DEG values, and subcellular location lists. The table is built with D3 v5 and React, using `d3.select` and `d3.ascending`/`d3.descending` for column sorting. Data is loaded from JSON and TSV files via `d3.json` and `d3.tsv`, with the table rendered as SVG and styled via CSS.

MMinwoo Pak
68% match
Loading thumbnail…

Untitled

This interactive scatter plot displays sales versus profit for individual customers, with data points colored by region and filtered by a year selector. Built with React and D3.js v4, it renders as an SVG animation, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeSet2` for regional colors, and `d3.csv` to load the Superstore dataset. A dropdown menu populated via `d3.select` and `append('option')` lets viewers switch between years, updating the plotted circles while tooltips show customer details on mouseover.

SSai SriHarsha Griddaluru
67% match
Loading thumbnail…

D3 with react

This example demonstrates a simple data summary using D3 and React. It loads a CSV file of CSS named colors and displays its size, row count, and column count as large text. The code uses React’s `useState` and `useEffect` to manage the asynchronous data loading, with `d3.csv` fetching the data from a GitHub gist and `d3.csvFormat` measuring the payload in kilobytes. The rendered output updates from “loading” to the formatted message once the data arrives, showing integration of D3’s parsing utilities within a React component lifecycle.

JJasmyne Okudo
67% match
Loading thumbnail…

Untitled

A 3D scatter plot visualizes five product categories—Garment, Electronics, Decoration, Fitness, and Footwear—using three axes: Number of Orders, Sales, and Available in Stock. Each category appears as a distinct colored marker, encoding the relationship between order volume, revenue, and inventory across the dataset. The code loads a CSV via d3.csv, filters rows by category using a custom unpack function, and constructs five Plotly trace objects of type scatter3d. These traces are passed to Plotly.newPlot, which renders the interactive chart inside the designated div with a minimal margin layout.

Llibramanju
67% match