如何在ag-grid表格列中实现进度条？求相关参考资源

Hey there! Even though the official AG Grid docs don’t have a dedicated "progress bar" section, you can easily build this using custom cell renderers—it’s one of the grid’s most powerful customization tools. Here’s how the community typically approaches this:

1. Pure JavaScript Cell Renderer (Framework-Agnostic) #

This works for vanilla JS setups. Create a reusable renderer function that generates the progress bar HTML dynamically:

// Define the progress bar renderer
const progressBarRenderer = function(params) {
  const progress = params.value || 0;
  
  // Create outer container
  const container = document.createElement('div');
  container.style.width = '100%';
  container.style.height = '20px';
  container.style.border = '1px solid #ddd';
  container.style.borderRadius = '4px';
  container.style.overflow = 'hidden';
  container.style.position = 'relative';

  // Create progress fill
  const fill = document.createElement('div');
  fill.style.width = `${progress}%`;
  fill.style.height = '100%';
  fill.style.backgroundColor = progress > 70 ? '#ef4444' : progress > 40 ? '#f59e0b' : '#10b981';
  fill.style.transition = 'width 0.3s ease';

  // Add percentage label (centered)
  const label = document.createElement('span');
  label.style.position = 'absolute';
  label.style.top = '50%';
  label.style.left = '50%';
  label.style.transform = 'translate(-50%, -50%)';
  label.style.color = 'white';
  label.style.fontSize = '12px';
  label.style.fontWeight = '500';
  label.textContent = `${progress}%`;

  container.appendChild(fill);
  container.appendChild(label);
  return container;
};

// Use it in your column definitions
const columnDefs = [
  { headerName: 'Project Name', field: 'name', width: 200 },
  { 
    headerName: 'Completion', 
    field: 'completion', 
    cellRenderer: progressBarRenderer,
    width: 250
  }
];

2. Framework-Specific Components (React/Vue/Angular) #

If you’re using a framework, you can leverage its component system for cleaner code. Here’s a React example:

// React component for progress bar cells
const ProgressBarCell = ({ value }) => {
  const progress = value || 0;
  const barColor = progress > 70 ? '#ef4444' : progress > 40 ? '#f59e0b' : '#10b981';

  return (
    <div className="progress-bar-container">
      <div 
        className="progress-bar-fill"
        style={{ width: `${progress}%`, backgroundColor: barColor }}
      />
      <span className="progress-label">{progress}%</span>
    </div>
  );
};

// Add CSS (in your stylesheet)
.progress-bar-container {
  width: 100%;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: 500;
}

// Column definition in AG Grid
const columnDefs = [
  { headerName: 'Project Name', field: 'name', width: 200 },
  {
    headerName: 'Completion',
    field: 'completion',
    cellRenderer: 'agReactCellRenderer',
    cellRendererParams: {
      reactComponent: ProgressBarCell
    },
    width: 250
  }
];

3. Pro Tips from the Community #

• Dynamic Updates: Ensure your data source is reactive (e.g., React state, Vue ref) and AG Grid will automatically re-render the progress bar when values change.
• Tooltip Enhancements: Add a tooltip to show extra details (like target completion dates) by setting tooltipField in your column definition, or adding a title attribute to the container element in your renderer.
• Theming: Match the progress bar styles to your app’s theme by using CSS variables instead of hardcoded colors.

内容的提问来源于stack exchange，提问作者pratik